Question

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

我有一个带2个子菜单的简单导航栏。您可以在此处找到它：Fiddle。

＆＃13;

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

＆＃13;

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

＆＃13;

我希望子菜单居中。当我将鼠标悬停在＆＃34; Reisen＆＃34;子菜单获得与主菜单相同的宽度。当我将鼠标悬停在＆＃34; Karriere＆＃34;时，我希望子菜单位于＆＃34; Karriere＆＃34;并且没有位于＆＃34; Reisen＆＃34;。

我在考虑按钮的跨度元素＆＃34; Karriere＆＃34;但是我无法解决它。

感谢您的帮助。

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

居中子菜单

1 个答案: