Hallo Leute,
ich zweifel hier gerade so richtig an meinen html und css Kenntnissen, da ein DropDown Menü (reines CSS) nur im IE nicht funktioniert. Es werden die Submenüs nicht aufgeklappt. Hier ist der Quellcode:
HTML:
CSS:
Vielen Dank für die Hilfe im Vorraus ;)
ich zweifel hier gerade so richtig an meinen html und css Kenntnissen, da ein DropDown Menü (reines CSS) nur im IE nicht funktioniert. Es werden die Submenüs nicht aufgeklappt. Hier ist der Quellcode:
HTML:
HTML:
<ul class="menu">
<li id="item-435" class="current active">
<a href="#" >Home</a>
</li>
<li id="item-294" class="parent">
<a href="#" >Site Map</a>
<ul>
<li id="item-290"><a href="#" >Articles</a></li>
<li id="item-438" class="parent"><a href="#" >Weblinks</a>
<ul>
<li id="item-465"><a href="#" >Sub Sub Menu Item</a></li>
<li id="item-466"><a href="#" >Sub Sub Menu Item (2)</a></li>
</ul>
</li>
<li id="item-439"><a href="#" >Contacts</a></li>
</ul>
</li>
<li id="item-238" class="parent"><a href="#" >Sample Sites</a>
<ul>
<li id="item-445"><a href="#" >Parks</a></li>
<li id="item-446"><a href="#" >Shop</a></li>
</ul>
</li>
<li id="item-455"><a href="#" >Example Pages</a></li>
</ul>CSS:
HTML:
#topnav ul.menu,
#topnav ul.menu li,
#topnav ul.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#topnav ul.menu {
position: relative;
z-index: 597;
float: left;
}
#topnav ul.menu li {
float: left;
line-height: 1.3em;
vertical-align: middle;
}
#topnav ul.menu li.parent {
background: url(../images/topnav_arr.png) no-repeat right center;
}
#topnav ul.menu li ul li.parent {
background: url(../images/topnav_sub_arr.png) no-repeat right center;
}
#topnav ul.menu li ul ul li.parent {
background: url(../images/topnav_sub_arr.png) no-repeat right center;
}
#topnav ul.menu li.hover,
#topnav ul.menu li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#topnav ul.menu ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#topnav ul.menu ul li {
float: none;
}
#topnav ul.menu ul ul {
top: 0;
left: 100%;
}
#topnav ul.menu li:hover > ul {
display: block;
}
/* Menu Style */
#topnav {
}
#topnav ul.menu {
float: right;
}
#topnav ul.menu li {
}
#topnav ul.menu li.hover,
#topnav ul.menu li:hover {
}
#topnav ul.menu li {
opacity: 0.7;
filter: alpha(opacity = 70);
padding: 0 20px;
height: 70px;
display: block;
}
#topnav ul.menu li a{
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size: 18px;
line-height: 70px;
text-shadow: none;
}
#topnav ul.menu a:link,
#topnav ul.menu a:visited {
color: #fff;
text-decoration: none;
}
#topnav ul.menu li:hover {
opacity: 0.6;
filter: alpha(opacity = 60);
background: #000;
}
#topnav ul.menu ul {
width: 200px;
margin-top: 0;
background: #000;
}
#topnav ul.menu ul li a {
line-height: 30px;
font-size: 16px;
}
#topnav ul.menu ul li {
height: 30px;
}
#topnav ul.menu ul li:hover, #topnav ul.menu ul li.parent:hover {
opacity: 1;
filter: alpha(opacity = 100);
background: #222;
}Vielen Dank für die Hilfe im Vorraus ;)
