opiWahn
New member
Hallo,
ich hab hier ein sehr schönes DropDownMenue, das fast schon zum Einbauen fertig ist - aber eben nur fast.
Wo bzw. wie muß ich das CSS anpassen um dem ganzen auch noch Unterpunkte bei zu bringen, die sich dann seitlich daneben zeigen?
Im Prinzip bin ich, glaub ich, garnicht soweit vom Ziel entfernt. Denoch bleibt mir die 3. Ebene sichtbar auf der Zweiten liegen. Ziel ist aber, daß sie erst beim hover sichtbar wird. Ich habe mir schon einige Teile angeschaut, aber offensichtlich gibt es hierfür keine Standardlösung. Etwas verwirrt habe ich schon mindestens 3-4 relativ unterschiedliche Ansätze gesehen.
HTML
CSS
Der gesamte Code mit img. liegt als zip bei.
Danke schon mal im Voraus
opiWahn
ich hab hier ein sehr schönes DropDownMenue, das fast schon zum Einbauen fertig ist - aber eben nur fast.
Wo bzw. wie muß ich das CSS anpassen um dem ganzen auch noch Unterpunkte bei zu bringen, die sich dann seitlich daneben zeigen?
Im Prinzip bin ich, glaub ich, garnicht soweit vom Ziel entfernt. Denoch bleibt mir die 3. Ebene sichtbar auf der Zweiten liegen. Ziel ist aber, daß sie erst beim hover sichtbar wird. Ich habe mir schon einige Teile angeschaut, aber offensichtlich gibt es hierfür keine Standardlösung. Etwas verwirrt habe ich schon mindestens 3-4 relativ unterschiedliche Ansätze gesehen.
HTML
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="menu_style.css" type="text/css" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Seite 1</a>
<ul>
<li><a href="#">Seite 1.1</a>
<ul>
<li><a href="#">Seite 1.1.1</a></li>
<li><a href="#">Seite 1.1.2</a></li>
</ul>
</li>
<li><a href="#">Seite 1.2</a>
<ul>
<li><a href="#">Seite 1.2.1</a></li>
<li><a href="#">Seite 1.2.2</a></li>
</ul>
</li>
<li><a href="#">Seite 1.3</a>
<ul>
<li><a href="#">Seite 1.3.1</a></li>
<li><a href="#">Seite 1.3.2</a></li>
</ul>
</li>
<li><a href="#">Seite 1.4</a></li>
</ul>
</li>
<li><a href="#">Seite 2</a>
<ul>
<li><a href="#">Seite 2.1</a></li>
<li><a href="#">Seite 2.2</a></li>
<li><a href="#">Seite 2.3</a></li>
<li><a href="#">Seite 2.4</a></li>
</ul>
</li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
</body>
</html>CSS
PHP:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #f68618;
border-right:2px solid #f68618;
border-bottom:2px solid #f68618;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}Der gesamte Code mit img. liegt als zip bei.
Danke schon mal im Voraus
opiWahn
