djeric
Gebruiker
- Lid geworden
- 22 nov 2006
- Berichten
- 955
hallo mijn menu past zich niet goed aan de breedte van een mobiele versie. de top menu's schuiven dan over elkaar heen, hoe krijg je dit netjes?
ik heb echter wel een max-width opgegeven in de nav.
ik heb echter wel een max-width opgegeven in de nav.
opmaak is met html5 en css.max-width: 100%;
Code:
/* reset */
html, body, div, ul, li, a, p, img, span, iframe, h1, h2, h3, h4 {
margin: 0; padding: 0; border: 0; outline: 0;
font-size: 100%; vertical-align: baseline; background: transparent;
}
body {background: url(images/bg-dark.jpg) fixed; color: #FFFFFF; font: normal 1em arial, helvetica, sans-serif;} /* verander kleur van de p atribuut */
#skippy
{
position: absolute;
left: -2000px;
top: 0;
z-index: 50;
width: 10.5em;
border: red solid 3px;
background: white;
font-size: 2em;
text-align: center;
line-height: 2em;
}
#skippy:focus,
#skippy:active
{
left: 50%;
margin-left: -5.25em;
}
nav
{
display: block;
width: 39.8em;
max-width: 100%;
margin: 30px auto 0;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
li
{
position: relative;
float: left;
width: 6.5em;
color: black;
background: #e4e4e4;
line-height: 2em;
text-align: center;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
-webkit-transition: 0.2s;
transition: 0.2s;
}
#top > li
{
border: black solid;
border-width: 1px 1px 1px 0;
}
#top li:first-child
{
border-left: black solid 1px;
}
li ul
{
position: absolute;
top: -2000px;
left: -1px;
opacity: 0;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
li li
{
border: black solid;
border-width: 0 1px 1px;
}
nav a
{
display: block;
text-decoration: none;
color: black;
}
li:hover
{
background: white;
}
li:hover ul
{
top: 2em;
margin-top: 1px;
opacity: 1;
}
HTML:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hitdance radio</title>
<meta name="description" content="hitdance radio, met muziek voor jong en oud, en de leukste dj's">
<meta name="keywords" content="dance, hardstyle, apresski, nederlands, rock, jaren 70, jaren 80, jaren 90, hitdance, radio, studio, radio station, verzoekplaat, live streams, hitdance radio, spiegelplaat, online, dj team, speler, verzoekje, boekingen, dj eric, dj sylvester, facebook, programma, draaien, informatie, sponsors">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<link href="hitdance.css" rel="stylesheet" type="text/css">
</head>
<body>
<a id="skippy" href="#content" tabindex="1">Skip menu met links</a>
<nav>
<ul id="top">
<li>Knop 1
<ul>
<li><a href="menu-066-achter-dl.html" title="Knop 1 - 1">Knop 1 - 1</a></li>
<li><a href="menu-066-achter-dl.html" title="Knop 1 - 2">Knop 1 - 2</a></li>
</ul>
</li>
<li>Knop 2
<ul>
<li><a href="menu-066-achter-dl.html" title="Knop 2 - 1">Knop 2 - 1</a></li>
<li><a href="menu-066-achter-dl.html" title="Knop 2 - 2">Knop 2 - 2</a></li>
</ul>
</li>
<li>Knop 3
<ul>
<li><a href="menu-066-achter-dl.html" title="Knop 3 - 1">Knop 3 - 1</a></li>
<li><a href="menu-066-achter-dl.html" title="Knop 3 - 2">Knop 3 - 2</a></li>
</ul>
</li>
<li>Knop 4
<ul>
<li><a href="menu-066-achter-dl.html" title="Knop 4 - 1">Knop 4 - 1</a></li>
<li><a href="menu-066-achter-dl.html" title="Knop 4 - 2">Knop 4 - 2</a></li>
</ul>
</li>
<li>Knop 5
<ul>
<li><a href="menu-066-achter-dl.html" title="Knop 5 - 1">Knop 5 - 1</a></li>
<li><a href="menu-066-achter-dl.html" title="Knop 5 - 2">Knop 5 - 2</a></li>
</ul>
</li>
<li>Knop 6
<ul>
<li><a href="menu-066-achter-dl.html" title="Knop 6 - 1">Knop 6 - 1</a></li>
<li><a href="menu-066-achter-dl.html" title="Knop 6 - 2">Knop 6 - 2</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>