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

by SpiceLab

HTML

<div id="menu">
            <ul>
                  <li class="topmenu">
                    <a id="main" href="http://w9z0f5z73.homepage.t-online.de/seyda/">Startseite</a>
                    <ul>
                      <li class="submenu"><a href="http://w9z0f5z73.homepage.t-online.de/seyda/?page_id=15">Über uns</a></li>
                     <li class="submenu"><a href="http://w9z0f5z73.homepage.t-online.de/seyda/?page_id=19">Anfahrt</a></li>
                       </ul>
                 </li>
 
                  <li class="topmenu">
                    <a id="main" href="http://w9z0f5z73.homepage.t-online.de/seyda/?page_id=38">Tor- & Zaunanlagen</a>
                   <ul>
                     <li class="submenu"><a href="http://w9z0f5z73.homepage.t-online.de/seyda/?page_id=40">Toranlagen</a></li>
                    <li class="submenu"><a href="http://w9z0f5z73.homepage.t-online.de/seyda/?page_id=79">Zaunanlagen</a></li>
                      </ul>
                </li>
</ul>
</div>

CSS

#menu {
  font-size:13px;
  position: absolute;
}
 
#menu ul {
  list-style-type: none;
  list-style-image: none;
  margin: 0px;
  padding: 0px;
}
 
#menu li.topmenu { 
  float: left;
  font-family: 'Verdana';
  position: relative /* ergänzt von SpiceLab */
}
 
.topmenu a {
  float: left;
  width: auto;
  text-align: center;
}
 
#menu ul ul { /* Selektor umbenannt von SpiceLab */
  display: none;
  position: absolute; /* ergänzt von SpiceLab */
  left: 0; /* ergänzt von SpiceLab */
  top: 23px /* ergänzt von SpiceLab */
}
 
.topmenu a, .submenu a{
  padding: 2px 2px;
  border: 1px solid #060354;
  border-collapse: collapse;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  background-color: #060354;
  margin: 1px;
}
 
.submenu a{
  font-size: 12px;
  width: 170px;
  position: relative;
  clear: both; /* special IE6 */
}
 
#menu a:hover, .topmenu.on a {
  color:#000000;
  background-color:#FFFFFF !important;
}
 
#menu li:hover ul { /* Selektor umbenannt von SpiceLab */
  display:block;
  z-index:500;
}