Hy habe folgendes problem, meine unternavi bleibt nicht sichtbar. kann mir jemand helfen, wie ich das mache, sitze schon ewig davor. wenn ich z.b. auf menschen klicke, dann bleibt navi und unter navi sichtbar, auch wenn ich den maus cursor unten links in die ecke stelle, aber wenn ich dann weiter klicke, z.b auf team, verschwindet meine navi sofort, wenn ich den maus zeiger nur ein wenig verschiebe. ich möchte aber, dass die navi immer aus geklappt bleibt, solange ich keinen neuen menüpunkt auswähle.
seht ihr den fehler im css******
gruß alex
seht ihr den fehler im css******
gruß alex
Code:
//html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>navi ein faden</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="menu">
<ul id="nav">
<li><a class="nav_2" href="#" tabindex="1">agentur</a>
<ul>
<li><a href="#" tabindex="2">konzept</a></li>
<li><a href="#" tabindex="2">philosophie</a></li>
<li><a href="#" tabindex="2">anspruch</a></li>
</ul>
</li>
<li><a class="nav_2" href="#" tabindex="1">menschen</a>
<ul>
<li><a href="#" tabindex="2">geschichte</a></li>
<li><a class="nav_2" href="#" tabindex="2">team</a>
<ul>
<li><a href="#" tabindex="3">test1</a></li>
<li><a href="#" tabindex="3">test2</a></li>
<li><a href="#" tabindex="3">test3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="nav_2" href="#" tabindex="1">leistungen</a>
<ul>
<li><a href="#">angebot</a></li>
<li><a href="#">portfolio</a></li>
</ul>
</li>
<li><a class="nav_2" href="#" tabindex="1">projekte</a>
<ul>
<li><a href="#" tabindex="2">erfahrungen</a></li>
<li><a class="nav_2" href="#" tabindex="2">look & taste</a>
<ul>
<li><a href="#" tabindex="3">test1</a></li>
<li><a href="#" tabindex="3">test2</a></li>
<li><a href="#" tabindex="3">test3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
/* CSS Document */
@charset "utf-8";
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;}
100% {zoom:1;}
}
.menu {width:700px; margin:0; padding:30px 20px 0 20px;;}
#nav {position:relative; font-size:12px; height:38px; z-index:100;}
#nav, #nav ul {padding:0; margin:0; list-style:none; width:700px; text-align:left;}
#nav ul {position:absolute; top:0; left:-9999px; height:0;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;}
#nav li {display:inline; height:38px;}
#nav li a {display:inline-block; height:38px; line-height:38px; padding:0 20px 0 10px; font-size:11px; color:#dedede; /*text-shadow: 1px -1px 1px #000;*/ text-decoration:none; font-weight:bold; outline:0; text-transform:lowercase;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;}
#nav ul li a {font-size:0;}
#nav li a.nav_2 {color:#dedede;}
#nav li ul li a.nav_2 {font-size:11px; color:#dedede;}
#nav li:hover > a {color:#f00;}
#nav li:hover > a.nav_2 {color:#f00;}
#nav li > a:active {color:#000;}
#nav li > a.nav_2:active {color:#000;}
#nav li > a:focus {color:#000; }
#nav li > a.nav_2:focus {color:#000; }
#nav li a:active + ul {top:20px; left:0;}
#nav li a:active + ul > li > a {font-size:11px;height:38px;}
#nav li a:focus + ul {top:20px; left:0;}
#nav li a:focus + ul > li > a {font-size:11px;height:38px;}
#nav li > ul:hover {top:20px; left:0;}
#nav li > ul:hover > li > a {font-size:11px;height:38px;}
