dropdown menü nach rechts

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

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

Code: 
<!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>

Code: 
* {
 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;
  }
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück