Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 16.10.2014, 20:41
Pinocchio Pinocchio ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.12.2013
Beiträge: 7
Pinocchio befindet sich auf einem aufstrebenden Ast
Standard Dropdownmenü zentrieren

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
Mit Zitat antworten
Sponsored Links