居中子菜单

Question

我已阅读有关居中子菜单的所有问题。但我的问题没有解决。

我有一个带有 2 个子菜单的简单导航栏。 你可以在这里找到它：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>

我希望子菜单居中。当我将鼠标悬停在“Reisen”上时，子菜单的宽度与主菜单相同。 当我将鼠标悬停在“Karriere”上时，我希望子菜单位于“Karriere”下方的中心，而不是位于“Reisen”下方的左侧。

我在想按钮“Karriere”的跨度元素，但我无法解决。

感谢您的帮助。

Answer 1

我现在不知道这是否是您正在寻找的东西，但也许是这样的？

注意：我对您的 CSS 和 HTML 做了一些更改，主要是更改所有内容以使用类而不是 ID

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;
}
}