# dropdown menü nach rechts



## sumilink (14. Februar 2013)

guten tag

habe ein dropdown menü das sich nach unten öffnet gemacht, nun sollte es sich noch nach rechts öffnen für weitere links weiss aber nicht wie man das macht 
kann mir jemand helfen ?

dropdown menü ------- > http://www.workupload.com/file/9z6u0vE


----------



## djheke (14. Februar 2013)

So vielleicht?
http://www.gipspferd.de/css/anleitung/horizontale navigation/


----------



## sumilink (14. Februar 2013)

Danke : D  ...............

bringe das drop down menü nicht in die mitte  div align="center">  oder <center> funktionieren nicht 


```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kochrezepte</title>
<link href="css/dropmenu.css" rel="stylesheet" type="text/css">
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
  
<div align="center">
  <p><img src="bilder/header.png" alt="header" width="1023" height="212" class="header"/></p>
</div>




<ul id="navi">
 <li><a href="#">Home </a></li>
 <li><a class="titel" href="#kat1">Kategorie 1 </a>
  <ul>
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 </a>
     <ul>
       <li><a href="#">Thema 4.1 </a></li>
       <li><a href="#">Thema 4.2 </a></li>
       <li><a href="#">Thema 4.3 </a>
	    <ul>
        <li><a href="#">Thema 4.3.1 </a></li>
        <li><a href="#">Thema 4.3.2 </a></li>
        <li><a href="#">Thema 4.3.3 </a></li>
       </ul>
	   </li>
     </ul>
   </li>
  </ul> 
 </li>

 <li><a class="titel"  href="#kat2">Kategorie 2 </a>
 <ul id="knoten_2">
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 </a>
   <ul>
       <li><a href="#">Thema 4.1 </a></li>
       <li><a href="#">Thema 4.2 </a></li>
       <li><a href="#">Thema 4.3 </a></li>
     </ul>
   </li> 
  </ul> 
 </li>

 <li><a class="titel"  href="#kat3">Kategorie 3 </a>
  <ul id="knoten_3">
    <li><a href="#">Thema 1 </a></li>
    <li><a href="#">Thema 2 </a></li>
    <li><a href="#">Thema 3 </a></li>
    <li><a href="#">Thema 4 </a></li>
  </ul>
 </li>
</ul>


</body>
</html>
```


```
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}


ul#navi  {
  float:left;
  background:#333;
                  
}

ul#navi a {
 display:block;
 padding:5px;
 color:#fff;
 font-weight:bold;
 border-right:1px solid #fff;
 text-align:center;
}


ul#navi li  {
 position:relative;            
 float:left;                    /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */
 width:9.375em                  /* Hinzugefügt 150px / 16 = 9.375em */
}

/* Alle Ebenen ausblenden */

ul#navi ul  ,
ul#navi  li:hover ul ul , 
ul#navi  li:hover  ul ul ul  {
 position:absolute;
 left:-9999px;
 background:#000;
}

ul#navi  li:hover ul {
  background:#dad;
}

ul#navi  li:hover ul ul {
  background:#777;
}

ul#navi  li:hover ul ul ul {
  background:#444;
}

ul#navi ul {
 top:auto;                    /* Neue Position definiert 16px Schriftgröße + (2 x 5px) padding = 30px / 16 = 1.875em*/
}


/* Einzelne Ebenen einblenden */ 
ul#navi li:hover ul  {
 left:0;
 }


                                 /* Neuer Deklarationsblock um die Unterpunkte präzise zu positionieren */
ul#navi ul  li:hover  ul , 
ul#navi ul  ul li:hover  ul  {
 position:absolute;
 left:100%;
 top:0;
 }


/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
ul#navi li:hover > a , ul#navi  ul li:hover  > a, ul#navi ul  ul  li:hover  > a, ul#navi ul  ul ul  li:hover  > a  {
  background:#a33;
  color:#fff;
}

ul#navi a span {
 float:right;
  font-weight:normal;
  }
```


----------

