Hallo,
ich habe mal einen Prototypen von einem css menü erstellt, aber irgendwie bekomme ich es nicht hin, dass sich das Untermenü genau neben dem Oberpunkt öffnet.
Statt dessen hängt es immer ca. einen Menüeintrag tiefer (also im Firefox, im IE geht das ja ohne weiteres sowieso nicht und das is mir auch erstmal wurst)
Hier mal der Code, hoffe jemand kann mir helfen
Danke!! Euer Az
ich habe mal einen Prototypen von einem css menü erstellt, aber irgendwie bekomme ich es nicht hin, dass sich das Untermenü genau neben dem Oberpunkt öffnet.
Statt dessen hängt es immer ca. einen Menüeintrag tiefer (also im Firefox, im IE geht das ja ohne weiteres sowieso nicht und das is mir auch erstmal wurst)
Hier mal der Code, hoffe jemand kann mir helfen
Danke!! Euer Az
Code:
<div id="nav_container">
<ul id="navigation">
<li><a href="#site1">Seite 1</a></li>
<li><a href="#site2">Seite 2</a>
<ul>
<li><a href="#site2a">Seite 2a</a></li>
<li><a href="#site2b">Seite 2b</a></li>
</ul>
</li>
<li><a href="#site3">Seite 3</a></li>
<li><a id="selected" href="#site4">Seite 4</a>
</ul>
</div>
Code:
div#nav_container {
padding: 0.8em;
border: 1px solid black;
background-color: green;
}
div#nav_container div {
clear: left;
}
ul#navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#navigation li {
list-style: none;
width: 8.6em;
position: relative;
margin: 0em; padding: 0;
}
ul#navigation li ul {
display: block;
margin: 0; padding: 0;
position: absolute;
top: 0em;
left: 8.6em;
}
ul#navigation li ul li {
float: none;
display: block;
margin-bottom: 0em;
}
ul#navigation a, ul#navigation span {
display: block;
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: yellow; background-color: #ccc;
}
ul#navigation a:hover, ul#navigation span, li a#selected {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: blue;
}
li a#selected { /* selectede Rubrik kennzeichnen */
color: maroon; background-color: red;
}
ul#navigation li ul span { /* selectede Unterseite kennzeichnen */
background-color: yellow;
}
ul#navigation li>ul {
display: none; top: 1.6em;
}
ul#navigation li:hover>ul, ul#navigation li>a#selected+ul {
display: block;
}