Hallo,
habe eine Navigation erstellt und bekomme das zweite Sub-Menü nicht zentriert. Kann mir dabei bitte jemand helfen.
Hier ist das Beispiel:
Edit fiddle - JSFiddle
Ich möchte also das Sub-Menü unter Reisen-->Asien zentriert haben, also mittigs unter "Asien".
Html:
Code:
<nav>
<ul id="nav">
<li><a href="#">Reisen</a>
<ul class="sub1">
<li><a href="#">Europa</a></li>
<li><a href="#">Amerika</a></li>
<li><a href="#">Asien</a>
<ul class="sub2">
<li><a href="#">Thailand</a></li>
<li><a href="#">Bhutan</a></li>
<li><a href="#">China</a></li>
<li><a href="#">Vietnam</a></li>
<li><a href="#">Japan</a></li>
</ul>
</li>
<li><a href="#">Afrika</a></li>
<li><a href="#">Australien</a></li>
</ul>
</li>
<li><a href="#">Magazin</a></li>
<li><a href="#">Karriere</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
CSS:
Code:
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
ul#nav, ul.sub1, ul.sub2 {
list-style-type: none;
}
ul#nav li {
width: 125px;
text-align: center;
position: relative;
float: left;
margin-right: 4px;
}
ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
color: #000;
}
ul.sub1 a, ul.sub2 a {
margin-top: 4px;
}
ul#nav li:hover > a {
background-color: #6E6E6E;
color: #FFF;
}
ul#nav li:hover a:hover {
background-color: #E2E2E2;
}
ul.sub1, ul.sub2 {
display: none;
position: absolute;
width: 645px;
}
ul#nav li:hover ul.sub1 {
display: block;
float: left;
}
ul.sub1 li:hover ul.sub2 {
display: block;
}
--------------
Gibt es außerdem eine andere Möglichkeit, die Sub-Menüs horizontal anzuordnen,
ohne eine width zu vergeben (bei ul.sub1, ul.sub2)? Damit ich später keine Probleme beim responsiven Design bekomme...
--------------
Zu guter letzt hätte ich noch ein weiteres Problem..
Wie kann ich zwischen den beiden Sub-Menüs eine Linie einpflegen, auf der ein Punkt oder ein beliebiges Zeichen den aktiven Status anzeigt.
Klingt etwas kompliziert, hier mal ein Bild:
https://www.dropbox.com/s/eziivh7f00...ation.jpg?dl=0
Es geht um den Punkt unter "Asien".
Vielen Dank schonmal im Voraus