lars: Dropdown Menü

Beitrag lesen

SELF-Forum

Dropdown Menü

lars
– Informationen zu den Bewertungsregeln

mittlerweile läuft es schon.

/*CSS File/*  
/*Body*/  
body {  
 font-family:'Verdana','Arial','Helvetica','sans serif'; font-size:12px; color:black;  
 line-height:20px; background:white;  
}  
  
/*Menü*/  
 .menue {  
background-color: #FFEC8B;  
padding: 5px;  
width: 150px;  
float: left;  
position: absolute;  
  
}  
  
.menue a {  
display: block;  
background-color: blue;  
border-bottom: 1px solid #000000;  
margin-bottom: 2px;  
padding: 3px;  
color: #ffffff;  
}  
  
.menue a:hover {  
background-color: yellow;  
border-bottom: 1px solid #000000;  
margin-bottom: 2px;  
padding: 3px;  
color: #000000;  
}  
  
ul.dropdown {  
    list-style: none;  
    margin:0px;  
    z-index:99;  
 background-color: #FFEC8B;  
 padding: 5px;  
 width: 150px;  
 float: left;  
 position: absolute;  
 top: 170px;  
 left: 0px;  
}  
  
ul.dropdown * ul {  
    list-style: none;  
    margin:0;  
    padding: 0;  
 display:none;  
 position:absolute;  
 z-index:99;  
 width:20em;  
}  
  
ul.dropdown li {  
    float:left;  
    position: absolut;  
    left: 150px;  
 }  
  
ul.dropdown li * li {  
    border:1px solid #fff;  
    float:none;  
    position: absolut;  
}  
  
ul.dropdown ul * ul {  
    left:98%;  
    top:0;  
  
}  
  
ul.dropdown a {  
    display:block;  
 background-color: blue;  
 border-bottom: 1px solid #000000;  
 margin-bottom: 2px;  
 padding: 3px;  
 color: #ffffff;  
  
}  
  
ul.dropdown a:hover {  
background-color: yellow;  
border-bottom: 1px solid #000000;  
margin-bottom: 2px;  
padding: 3px;  
color: #000000;  
}  
  
ul.dropdown ul * a {  
    height:100%;  
}  
  
ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul {  
    display:none;  
}  
  
ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul {  
    display:block;  
 background-color: blue;  
 border-bottom: 1px solid #000000;  
 margin-bottom: 2px;  
 padding: 3px;  
 color: #000000;  
 position: absolute;  
 left: 150px;  
}  
  
div.blau {  
 width:144px;  
}

[code lang=html]<html>
  <head>
    <title>Dropdown</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

<body>
 <!--Menue-->
 <ul class="dropdown" id="mainmenu">
  <li><a href=""><div class="blau">Test1</div></a>
   <ul>
   <li>blub</li>
   <li>blub</li>
   <li>blub</li>
   </ul>
  <li><a href=""><div class="blau">Test2</div></a>
   <ul>
   <li>blub</li>
   <li>blub</li>
   <li>blub</li>
 </ul>

</body>
</html>[/color]

das dropdown menü wird jedoch noch ein wenig zu weit unten angezeigt...
wie mache ich dass es direkt neben dem "button" steht auf dem ich mich mit der maus befinde???

thx

Beitrag melden
–
Informationen zu den Bewertungsregeln