fallen
Aktives Mitglied
Thread Starter
- Dabei seit
- 15.12.2003
- Beiträge
- 534
- Reaktionspunkte
- 10
guten morgen,
ich bin gerade an einer homepage, und die brauchte ein menü. da dachte ich mir mal, dass ein css dropdown menü ganz gut wäre. gesagt getan, allerdings passt es irgendwie nicht richtig. das soll oben und links ganz bündig sein, aber es bleibt immernoch weiss vom hintergrund an den rändern. (beim body ist margin 0!)
wäre toll, wenn jemand den fehler sehen würde...!
html code:
mit diesem css code:
ich bin gerade an einer homepage, und die brauchte ein menü. da dachte ich mir mal, dass ein css dropdown menü ganz gut wäre. gesagt getan, allerdings passt es irgendwie nicht richtig. das soll oben und links ganz bündig sein, aber es bleibt immernoch weiss vom hintergrund an den rändern. (beim body ist margin 0!)
wäre toll, wenn jemand den fehler sehen würde...!
html code:
Code:
<ul id="nav">
<li id="menu" class="off"><a href="#">Aktuelles</a>
<ul>
<li><a href="#">Meldungen</a></li>
<li><a href="#">Termine</a></li>
</ul></li>
<li id="menu" class="off"><a href="#">Verband</a>
<ul>
<li><a href="#">Aufgaben</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Projekte</a></li>
<li><a href="#">Vorstand</a></li>
<li><a href="#">Mitglieder</a></li>
<li><a href="#">Geschichte</a></li>
</ul></li>
<li id="menu" class="on"><a href="#">Gewerbe</a>
<ul>
<li><a href="#">Statistik</a></li>
<li><a href="#">Recht</a></li>
</ul></li>
<li id="menu" class="off"><a href="#">Service</a>
<ul>
<li><a href="#">Preisempfehlung</a></li>
<li><a href="#">Broschüren</a></li>
<li><a href="#">Infos</a></li>
<li><a href="#">Seminare</a></li>
</ul></li>
<li id="menu" class="off"><a href="#">Kontakt</a>
<ul>
<li><a href="#">Geschäftsstelle</a></li>
<li><a href="#">Presse</a></li>
</ul></li>
</ul>mit diesem css code:
Code:
<style type="text/css" media="all">
#divNav {
margin: 0;
padding: 0;
height: 53px;
width: 999px;
}
#nav {
position: relative;
height: 53px;
background-image: url(../images/nav.jpg);
background-repeat: repeat-x;
width: 999px;
padding-left: 0px;
}
#nav li ul, #nav li ul {
margin: 0;
padding: 0;
}
#nav a {
text-decoration: none;
}
#nav li { /*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 0px;
}
#nav li ul {
display: none;
}
#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
top: 28px;
left: 0;
padding-top: 0px;
height: 25px;
width: 999px;
padding-left: 0px;
background-image: url(../images/nav2.jpg);
}
#nav li.on ul {
background-image: url(../images/nav2.jpg);
}
#nav li.on:hover ul, #nav li.over ul { /*for ie*/
background-image: url(../images/nav2.jpg);
}
#nav li a {
color: #FFFFFF;
font-weight: bold;
display: block;
width: 124px;
padding: 0;
}
#nav li.on a {
color: #000000;
}
#nav li.on ul a, #nav li.off ul a {
border: 0;
float: left; /*ie doesn't inherit the float*/
background-image: url(../images/nav2_kl.jpg);
width: auto;
margin-right: 0px;
}
#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
background-image: url(../images/nav2_kl.jpg);
}
#nav li.on ul {
display: block;
}
#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}
#nav li.off a:hover, #nav li.on a:hover {
color: #FFFFFF;
}
/*do the image replacement*/
#menu a {
display: block;
position: relative;
height: 28px; /*contains all hover states*/
background-image: url(../images/nav.jpg);
background-repeat: repeat-x;
}
/*first, put the initial states in place*/
#menu a {
background-position: 0 0;
}
/*active area - for this demo - the code could be based on a body class, and probably work better.*/
#menu.on a {
background-position: 0px -28px;
} /*add selectors for the other li's and background-positions*/
/*hover states*/
#menu a:hover, #menu:hover a, #menu.over a {
background-position: 0 -28px;
}
/*subnav formatting*/
#nav li.off ul a, #nav li.on ul a {
display: block;
color: #000000;
font-family: arial, verdana, sans-serif;
font-size: 10px;
}
#nav li.on ul a {
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
