CSS Navigation mit Dropdown

In diesem Artikel schauen wir uns mal an, wie wir eine ansehnliches Menü mit CSS hinbekommen. Dafür brauchen wir nur ein wenig HTML und CSS. Als erstes erstellen wir uns unsere HTML Datei, in der wir unser Menü erstellen.


//index.html
<div class="navigation">
 <ul>
  <li><a href="#">Startseite</a>
   <ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Informationen</a></li>
    <li><a href="#">Sonstiges</a></li>
   </ul>
  </li>
  <li><a href="#">Kategorien</a>
   <ul>
    <li><a href="#">Sub-1</a></li>
    <li><a href="#">Sub-2</a></li>
    <li><a href="#">Sub-3</a></li>
    <li><a href="#">Sub-4</a></li>
    <li><a href="#">Sub-5</a></li>
   </ul>
  </li>
  <li><a href="#">Kontakt</a>
   <ul>
    <li><a href="#">Kontaktformular</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Google+</a></li>
    <li><a href="#">Pinterest</a></li>
   </ul>
  </li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Impressum</a></li>
 </ul>
</div>

Das war der Teil mit dem HTML. Wenn wir uns das Ganze nun anschauen würden, wäre nur ein Listenmenü zu sehen. Deswegen kommen wir nun an das wichtigste, die Formatierung mit CSS.


/* layout.css */
.navigation {
 background-color: #444;
 overflow: hidden;
 border-right: 1px solid #333;
 font-family:verdana;
}
 
.navigation li {
 list-style: none;
 float:left;
 padding: 5px 8px 5px 8px;
 height: 30px;
 background-color: #444;
 border:1px solid #333;
}
 
.navigation li ul {
 display: none;
 width: 220px;
 margin: 10px 0px 0px -50px;
}
 
.navigation li a {
 display: block;
 color: #fff;
}
 
.navigation li a:hover{
 text-decoration: none;
}
 
.navigation li:hover > ul{
 display: block;
 position: absolute;
}
 
.navigation li:hover li{
 float: none;
 border-left:3px solid transparent;
}
 
.navigation li li:hover {
 background-color: #666;
 border-left:3px solid #82b965;
}
 
.navigation li li:hover a {
 color:#82b965;
}

Wenn wir nun alles richtig gemacht haben, dann sollte das Ergebnis so aussehen, wie im folgenden Screenshot.

Ich hoffe, ich konnte mit meinem Artikel ein wenig helfen.

Impressum | 2014 © Wissen Lernen - Webpixelpromoter.com