我正在构建一个第二级菜单,此级别在父级<li>
下显示为新的水平线/菜单。正确知道第二级何时可见,它从父级开始的位置开始,因此子菜单的第一项直接位于父级<li>
之下。我希望子菜单向左为XX px,以便子菜单的中心位于父<li>
的中心之下。我不知道怎么做到这一点?所以欢迎任何建议,css或jquery,都很好。
我的菜单结构:
<nav role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
MENU
</button>
<a class="navbar-brand" href="/"><img src='logo.png' class='logo'></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div>
<ul class="nav navbar-nav">
<li><a href="#">Om rbs</a></li>
<li><a href="#">Gratis</a></li>
<li><a href="#">Kurser</a>
<ul class="nav navbar-nav">
<li><a href="#">Foredrag</a></li>
<li><a href="#">Workshops</a></li>
<li><a href="#">Proces med konsulent</a></li>
</ul>
</li>
<li><a href="#">Bliv Certifikeret</a></li>
<li><a href="#">Workshops</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
和CSS
nav a {
font-size: 16px;
font-family: 'Open Sans Condensed', 'Open Sans', Helvetica, Arial, sans-serif;
color: #fff;
text-transform: uppercase;
}
nav > div div > div > ul.nav {
position: relative;
right: 0;
float: right;
z-index: 6;
}
nav > div div > div > ul.nav > li {
position: relative;
float: left;
border-right: solid 1px rgba(255, 255, 255, 0.4);
}
nav > div div > div > ul.nav > li::after {
position: absolute;
bottom: -8px;
left: 50%;
margin-left: -6px;
display: none;
content: '';
width: 12px;
height: 12px;
background-color: #fff;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
nav > div div > div > ul.nav > li > a:hover {
color: #fff;
background-color: #3e3e3e;
}
nav > div div > div > ul.nav > li:hover > ul.nav {
display: block;
}
nav > div div > div > ul.nav > li:hover::after {
display: block;
}
nav > div div > div > ul.navi:first-child {
border-left: solid 1px rgba(255, 255, 255, 0.4);
}
nav > div div > div > ul.nav > li > ul.nav {
position: absolute;
padding: 0;
top: 100%;
left: 0;
list-style: none;
display: none;
white-space: nowrap;
z-index: 7;
}
nav > div div > div > ul.nav > li > ul.nav > li {
position: relative;
display: inline-block;
float: none;
}
nav > div div > div > ul.nav > li > ul.nav > li::after {
content: '/';
position: absolute;
top: 4px;
left: 100%;
}
nav > div div > div > ul.nav > li > ul.nav > li:last-child::after {
content: '';
}
nav > div div > div > ul.nav > li > ul.nav > li > a {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #7c7c7c;
padding: 4px 15px;
}
nav > div div > div > ul.nav > li > ul.nav > li > a:hover {
color: #000;
background-color: transparent;
}
答案 0 :(得分:3)
尝试将此添加到现有的css规则中:
nav > div div > div > ul.nav > li:hover > ul.nav {
display: block;
-webkit-transform: translate(-50%, 0);
left: 50%;
}
答案 1 :(得分:0)
如果我理解正确,
.nav > div div > div> ul.nav > li > ul.nav{
position: absolute;
padding: 0;
top: 100%;
left: 0;
list-style: none;
display: none;
white-space: nowrap;
z-index: 7;
}
在上面将left:0
更改为left:50%
。