tutorials.de - Navigation Breite des Topmenu "fixieren", Submenu hat feste Breite

by SpiceLab

HTML

<div id="menu">
   <ul class="child">
      <li class="topmenu">
         <a id="main" href="Link">Startseite</a>
         <ul>
            <li class="submenu"><a href="Link">Über uns</a></li>
            <li class="submenu"><a href="Link">Anfahrt</a></li>
            <li class="submenu"><a href="Link">Kontakt</a></li>
            <li class="submenu"><a href="Link">Impressum</a></li>
         </ul>
       </li>
    </ul>
</div>

CSS

#menu {
  padding-top: 5px;
  float: right;
  font-size: 13px;
  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}
 
#menu > .child {
  position: relative;
  left: 50%;
}
 
#menu ul {
  list-style-type: none;
  list-style-image: none;
  margin: 0px;
  padding: 0px;
}
 
#menu li.topmenu {
  float: left;
  font-family: 'Verdana';
  position: relative;
}
 
.topmenu a {
  float: left;
  width: auto;
  text-align: center;
}
 
#menu ul ul {
  display: none;
  position: absolute;
  left: 0px;
  top: 100% /* geändert von SpiceLab */
}
 
.topmenu a, .submenu a{
  padding: 10px 7px;
  color: #e5e5e5;
  font-weight: bold;
  text-decoration: none;
background: #13237F;
border-width: 0.1px;
border-color: #ffffff;
border-style: solid;
  margin: 0px;
  -moz-border-radius: 0em;
  -webkit-border-radius: 0em;
  border-radius: 0em;
}
 
.submenu a{
  font-size: 12px;
  width: 170px;
  position: relative;
  clear: both; /* special IE6 */
}
 
#menu a:hover, .topmenu.on a {
  color:#0E1A5E;
background: #e5e5e5;
border-width: 0.1px;
border-color: #000000;
border-style: solid;
}
 
#menu li:hover ul {
  display:block;
  z-index:500;
}