html.de - Menü mittig (center)

by SpiceLab

HTML

<div id="menu">
  <ul class="child">
    <li class="topmenu">
      <a href="">Startseite.html</a>
      <ul>
        <li class="submenu"><a href="">Unterpunkt 1.1</a></li>
        <li class="submenu"><a href="">Unterpunkt 1.2</a></li>
      </ul>
    </li>
    <li class="topmenu">
      <a href="">Fertige Projekte</a>
      <ul>
        <li class="submenu"><a href="">Währungsrechner</a></li>
        <li class="submenu"><a href="">Unterpunkt 2.2</a></li>
      </ul>
    </li>
    <li class="topmenu">
      <a href="">Logout</a>
    </li>
  </ul>
</div>

CSS

#menu {
  float: right;

  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}
#menu > .child {
  position: relative;
  left: 50%;
}

#menu {
/*text-align: center; */
font-family: Gotham;
font-size: 20px;
color: #797979;
/*margin: 0 auto;*/
}
  
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
  
#menu li.topmenu {
float:left;
}
  
.topmenu a {
float:left;
width:auto;
text-align:center;
}
  
.topmenu ul{
/*position:absolute;
left:0;
top:15px; */
display:none;
}
 
.topmenu a, .submenu a{
padding:1px 5px;
border-collapse:collapse;
color:#797979;
font-weight:bold;
text-decoration:none;
margin:0;
}
 
.submenu a{
font-size:15px;
width:auto;
position:relative;
clear:both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
color:#4C4C4C;
background-color:#ffddbb !important;
}

.topmenu:hover ul {
display:block;
z-index:500;
}