Beispiel für ein Css-Menü

Hier ein einfaches Beispiel für ein Css-Menü.

Das Menü benötigt nur ein Image. Wenn der Mauszeiger über einen Menüpunkt fährt, wird das Image einfach verschoben.
Image für das Menü

Das HTML des Menüs:


<div id="navcontainer">
 <ul>
  <li><a href="#" id="current">Home</a></li>

  <li><a href="#">Menüpunkt 1</a></li>
  <li><a href="#">Menüpunkt 2</a></li>
  <li><a href="#">Menüpunkt 3</a></li>

  <li><a href="#">Menüpunkt usw.</a></li>
 </ul>
</div>

Die CSS-Regeln für das Menü:


#navcontainer {width: 177px; text-align: left; 
		border: 1px solid black; 
		border-bottom: none; 
		margin-bottom: 2em;}

#navcontainer ul {margin: 0; padding: 0;	
  list-style-type: none;
  text-indent: 20px;letter-spacing: 1px;}
  
#navcontainer li {list-style-image: none;
  margin:0; border-bottom: 1px solid black;}

#navcontainer a {display: block;
  width: 177px;height: 22px;
  font: bold 12px/22px Verdana, Arial, 
  Helvetica, sans-serif; }

#navcontainer  a:link, #navcontainer  a:visited {
  background: url(MenueBeispiel.gif);
  color: #CC6600;text-decoration: none; 
  padding-bottom: 0;}

#navcontainer li a:hover {
  background: url(MenueBeispiel.gif) 
  /* hier wird das Image verschoben */
  0px -22px no-repeat; 
  color: #fff;text-decoration: none;}

#navcontainer li a#current {
  background: url(MenueBeispiel.gif)
   /* hier wird das Image verschoben */ 
  0px -22px no-repeat;
  color: #fff;text-decoration: none;}

Zurück zum Artikel Css Menü - Css Navigation