【发布时间】：2014-11-12 12:21:28
【问题描述】：
我创建了一个带有两个子菜单的下拉导航。
我试图让第二个子菜单从顶部（就在主导航/黑条下方）开始，而不是在它的当前位置，但我不知道该怎么做。
这是我制作的代码笔http://codepen.io/anon/pen/ByaaYM
因此，例如，如果您将鼠标悬停在“个人”>“大篷车”或“个人”>“家庭和财产”上，子菜单的顶部应该位于同一个位置，就在黑色条的下方。
任何帮助将不胜感激
这是我想要达到的结果http://codepen.io/anon/pen/OPJPNL - 请注意，当悬停时，子菜单直接位于黑条下方。
代码...
HTML
<ul>
<li>
<a href="#">Personal</a>
<ul class="dropdown-menu">
<li data-submenu-id="submenu-patas">
<a href="#">Boat</a>
</li>
<li data-submenu-id="submenu-snub-nosed1">
<a href="#">Caravan</a>
<ul id="submenu-snub-nosed1">
<li><a href="#">Motor Home</a></li>
<li><a href="#">Touring Caravan</a></li>
<li><a href="#">Static Leisure</a></li>
<li><a href="#">Trailer Tent</a></li>
</ul>
</li>
<li data-submenu-id="submenu-snub-nosed">
<a href="#">Home & Property</a>
<ul id="submenu-snub-nosed">
<li><a href="#">Beach Hut</a></li>
<li><a href="#">Buy To Let</a></li>
<li><a href="#">Foster Home</a></li>
<li><a href="#">High Net Worth</a></li>
</ul>
</li>
<li><a href="#">Military</a></li>
<li><a href="#">Motor</a></li>
<li><a href="#">More</a></li>
</ul>
</li>
<li>
<a href="#">Business</a>
<ul class="dropdown-menu">
<li data-submenu-id="submenu-snub-nosed4">
<a href="#">Care & Medical</a>
<ul id="submenu-snub-nosed4">
<li><a href="#">Motor Home</a></li>
<li><a href="#">Touring Caravan</a></li>
<li><a href="#">Static Leisure</a></li>
<li><a href="#">Trailer Tent</a></li>
</ul>
</li>
<li>
<a href="#">Financial</a>
</li>
<li data-submenu-id="submenu-snub-nosed3">
<a href="#">Liability</a>
<ul id="submenu-snub-nosed3">
<li><a href="#">Beach Hut</a></li>
<li><a href="#">Buy To Let</a></li>
<li><a href="#">Foster Home</a></li>
<li><a href="#">High Net Worth</a></li>
</ul>
</li>
<li><a href="#">Property</a></li>
<li><a href="#">Trade Specific</a></li>
</ul>
</li>
<li><a href="#">Infozone</a></li>
</ul>
CSS
* {
box-sizing:border-box;
}
body {
font-family: sans-serif;
}
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
ul {
background: #333;
padding: 0 10px;
list-style: none;
position: relative;
display: inline-block;
}
ul:after {
content: ""; clear: both; display: block;
}
ul li {
float: left;
}
ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
ul li:hover a {
color: #fff;
}
ul li a {
display: block;
padding: 25px 40px;
color: #fff;
text-decoration: none;
}
ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
ul ul li a {
padding: 20px;
color: #fff;
}
ul ul li a:hover {
background: #4b545f;
}
ul ul ul {
position: absolute; left: 100%; top:-100%;
width: 230px;
padding: 10px;
}
ul ul ul li {
display: inline-block;
width: 49%;
}
.dropdown-menu > li {
width: 200px;
}
【问题讨论】：
标签： javascript html css