lars: Dropdown Menü

Beitrag lesen

SELF-Forum

Dropdown Menü

lars
– Informationen zu den Bewertungsregeln

Hallo

Ich möchte ein Dropdown Menü erstellen.
Doch leider funktioniert funktioniert es nicht so wie ich das möchte...
Ich habe bereits etliche Tutorials ausprobiert.

<html>  
  <head>  
    <title>Dropdown</title>  
    <link rel="stylesheet" type="text/css" href="styles.css">  
  </head>  
  
<body>  
 <!--Menue-->  
 <div class="menue">  
  <ul class="dropdown" id="mainmenu">  
  <li><a href="">Test1</a>  
  <ul>  
  <li>Test1</li>  
  <li>Test2</li>  
  <li>Test3</li>  
  </ul>  
  
  <a href="">Test2</a>  
  <a href="">Test3</a>  
  <a href="">Test4</a>  
  
 </div>  
  
</body>  
</html>

/*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;  
top: 170px;  
left: 0px;  
}  
  
.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: relative;  
}  
  
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: yellow;  
 border-bottom: 1px solid #000000;  
 margin-bottom: 2px;  
 padding: 3px;  
 color: #000000;  
}

Wenn man in der HTML-Datei die ul und li rauslöscht sieht man wie das Design eiegntlich sein sollte.
Ich möchte das nun das Dropdown Menü rechts neben dem Menü erscheint.

Danke für eure Hilfe

mfg

Beitrag melden
–
Informationen zu den Bewertungsregeln