html.de - Wie bekomme ich mein Menü in die Mitte?

by SpiceLab

HTML

<div class="nav">
            <ul>
                <li>Startseite</li>
                <li>Minecraft
                    <ul>
                        <li>Statuscheck</li>
                        <li>Verfügbarkeit</li>
                        <li>Bestellen</li>
                    </ul>
                </li>
                <li>Musik Bots
                    <ul>
                        <li>Verfügbarkeit</li>
                        <li>Bestellen</li>
                    </ul>
                </li>
                <li>Kontakt</li>
                <li>Server Status</li>
                <li>Kundenlogin</li>
            </ul>
</div>

CSS

/* The Magic Float Center Code */
.nav {
  float: right;

  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}
.nav > ul {
  position: relative;
  left: 50%;
}

.nav ul {
  margin:0;
  padding:0;
  float:left;
  height:38px;
  box-shadow:0px 0px 32px 0px #lll;
  border-radius:10px:
}
.nav ul li {
  list-style:none;
  float:left;
  background:#222;
  padding:10px;
  width:85px;
  text-align:center;
  transition:all 500ms;
  color:#999;
  border-right:1px solid #444;
  position:relative;
  border:none;
}
.nav ul li:first-child {
  border-radius:10px 0 0 10px;
}
.nav ul li:last-child {
  border-radius:0 10px 10px 0;
  border:none;
}
.nav ul li:hover {
  background:#09C;
  color:#FFF;
}
.nav ul li:hover ul {
  height:auto;
  opacity:1;
}
.nav ul li ul {
  height:0;
  overflow:hidden;
  opacity:1;
  position:absolute;
  left:0;
  padding-top:15px;
}
.nav ul li ul li {
  width:130px;
}
.nav ul li ul li:first-child {
  border-radius:10px 10px 0 0;
  border:none;
}
.nav ul li ul li:last-child {
  border-radius:0 0 10px 10px;
  border:none;
}