Tweet
Hi,
ich hab mir ne horizontale Navi mit Subebenen gebastelt.
Einblenden bei Hover funktioniert auch wunderbar im IE wie auch im Mozilla.
Das Problem ist jetzt. Wenn ein Navi Element aktiv ist, wird die Subnavi immer angezeigt(logisch). Sie soll wenn man über ein anderes Navielement fährt wieder ausgeblendet werden.
Für jeden Ansatz dankbar.
Hier mal der Code:
ich hab mir ne horizontale Navi mit Subebenen gebastelt.
Einblenden bei Hover funktioniert auch wunderbar im IE wie auch im Mozilla.
Das Problem ist jetzt. Wenn ein Navi Element aktiv ist, wird die Subnavi immer angezeigt(logisch). Sie soll wenn man über ein anderes Navielement fährt wieder ausgeblendet werden.
Für jeden Ansatz dankbar.
Hier mal der Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<title>Web04 - 1</title>
<style type="text/css">
.clear {
clear: both;
}
body {
text-align: center;
background-image: url("../background.jpg");
padding: 0;
margin: 0;
}
a {
cursor: pointer;
}
#top {
width: 100%;
background-image: url("../milchglas.png");
background-repeat: repeat-x;
text-align: center;
}
#infoNavi {
width: 100%;
height: 23px;
text-align: right;
}
#teaserTop {
width: 951px;
height: 58px;
margin: 0 auto;
text-align: left;
}
#naviTop {
width: 951px;
height: 119px;
margin: 0 auto;
text-align: left;
background-image: url("../topNaviBG.png");
background-repeat: repeat-x;
background-color: #FFFFFF;
}
#naviTop ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#naviTop ul li {
width: 120px;
height: 58px;
float: left;
background-image: url("../navi_off.png");
background-repeat: no-repeat;
}
#naviTop ul li ul.sub {
display: none;
position: absolute;
top: 160px;
width: 400px;
list-style-type: none;
padding: 0;
margin: 0;
}
#naviTop ul li ul.sub li {
display: none;
width: 40px;
float: left;
background-image: none;
}
#naviTop ul li:hover ul.sub {
display: block;
}
#naviTop ul li:hover ul.sub li {
display: block;
}
#naviTop ul li.last {
width: 0px;
clear: both;
background-image: none;
}
#naviTop ul li ul.active {
display: block;
}
#naviTop ul li ul.active li {
display: block;
}
#naviTop ul li:hover ul.active {
display: none;
}
#naviTop ul li:hover ul.active li {
display: none;
}
#banner {
width: 951px;
height: 161px;
margin: 0 auto;
text-align: justify;
}
#bannerShad {
width: 951px;
height: 14px;
margin: 0 auto;
}
#bottom {
width: 951px;
margin: 0 auto;
}
#left {
float: left;
padding: 0 14px;
}
#middle {
float: left;
padding: 0 14px;
}
#right {
float: left;
padding: 0 14px;
}
#navi {
float: left;
width: 286px;
padding: 0 14px;
}
#threeCols #left, #threeCols #middle, #threeCols #right {
width: 286px;
}
#threeCols #middle, #threeCols #right {
margin-left: 3px;
}
#twoCols #left, #twoCols #right {
width: 286px;
}
#oneCols #left {
width: 600px;
}
#footer {
width: 951px;
margin: 0 auto;
text-align: left;
}
</style>
</head>
<body>
<div id="top">
<div id="infoNavi">infoNavi</div>
<div id="teaserTop">teaserTop</div>
<div id="naviTop"><!-- Max 7 Stück -->
<ul>
<li>
Test
<ul class="sub">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li class="last"></li>
</ul>
</li>
<li>
Test
<ul class="sub">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li class="last"></li>
</ul>
</li>
<li>
<a href="">Test</a>
<ul class="sub active">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li class="last"></li>
</ul>
</li>
<li>
Test
<ul class="sub">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li class="last"></li>
</ul>
</li>
<li>
Test
<ul class="sub">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li class="last"></li>
</ul>
</li>
<li>
Test
<ul class="sub">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li class="last"></li>
</ul>
</li>
<li>
Test
<ul class="sub">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li class="last"></li>
</ul>
</li>
<li class="last"></li>
</ul>
</div>
<div id="banner" style="background-image:url('../banner.png');">banner</div>
<div id="bannerShad" style="background-image:url('../banner_schatten.png');"></div>
</div>
<div id="bottom">
<div id="oneCols">
<div id="navi">navi</div>
<div id="left">left</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Moderatorin
Kommentar