CODEWITHSUNDEEP
cssnavigationnavbarcentering
Pinocchio
Pinocchio

Reputation: 13

Centering Submenu

I've read all the questions concerning centering submenus. But I don't get my problem solved.

I have a simple navigation bar with 2 submenus. You can find it here: Fiddle.

ul#nav, ul#sub1, ul#sub2 {
	list-style-type: none;
}
ul#nav {
	position: relative;
}
ul#nav li {
	width: 125px;
	text-align: center;
	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;
	color: #000;
}
ul#sub1, ul#sub2 {
	display: none;
	position: absolute;
	left: 0px;
}
ul#nav li:hover ul#sub1 {
	display: block;
}
ul#sub1 li:hover ul#sub2 {
	display: block;
}
<nav>
	<ul id="nav">
    	<li><a href="#">Reisen</a>
        	<ul id="sub1">
            	<li><a href="#">Europa</a></li>
                <li><a href="#">Amerika</a></li>
                <li><a href="#">Asien</a>
                	<ul id="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>
            <ul id="sub1">
                <li><a href="#">Thema 1</a></li>
                <li><a href="#">Thema 2</a></li>
                <li><a href="#">Thema 3</a></li>
            </ul>
        </li>
        <li><a href="#">Kontakt</a></li>
     </ul>
</nav>

I want the submenu centered. When I hover over "Reisen" the submenu gets the same width like the main menu. When I hover over "Karriere", I want the submenu centered under "Karriere" and not positioned left under "Reisen".

I was thinking of a span-element to the button "Karriere" but I couldn't solve it.

Thanks for your help.

Upvotes: 0

Views: 38

Answers (1)

mituw16
mituw16

Reputation: 5250

I don't really now if this is what you're looking for or not, but maybe something like this?

Note: I made a few changes to your CSS and HTML, mainly changing everything to use classes instead of IDs

JS Fiddle Example

HTML

<nav>
<ul id="nav">
    <li><a href="#">Reisen</a>
        <ul class="sub">
            <li><a href="#">Europa</a></li>
            <li><a href="#">Amerika</a></li>
            <li><a href="#">Asien</a>
                <ul class="sub-second">
                    <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>
        <ul class="sub">
            <li><a href="#">Thema 1</a></li>
            <li><a href="#">Thema 2</a></li>
            <li><a href="#">Thema 3</a></li>
        </ul>
    </li>
    <li><a href="#">Kontakt</a></li>
 </ul>

CSS

ul#nav, ul.sub {
    list-style-type: none;
}
ul#nav {
    position: relative;
}
ul#nav li {
    width: 125px;
    text-align: center;
    float: left;
    margin-right: 4px;
    position: relative;
}
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.sub a { 
    margin-top: 4px;
}
ul#nav li:hover > a { 
    background-color: #6E6E6E;
    color: #FFF;
}
ul#nav li:hover a:hover {  
    background-color: #E2E2E2;
    color: #000;
} 
ul.sub {
    display: none;
    position: absolute;
    left: 0px;
    padding-left: 0;
}

ul.sub-second { 
    display: none;
    list-style: none;
    left:100px;
    top: 0;
    position: absolute;
}

ul#nav li:hover ul.sub {
    display: block;
}

ul#nav li:hover ul.sub li:hover ul.sub-second {
    display:block;
}
}

Upvotes: 1

Related Questions