Javascript 将子菜单固定到导航顶部
我创建了一个带有两个子菜单的下拉式导航 我试图让第二个子菜单从顶部开始(就在主导航/黑条的下方),而不是在它的当前位置,但我不知道如何做到这一点 这是我做的一支密码笔 例如,如果您将鼠标悬停在Personal>Caravan或Personal>Home&Property上,子菜单的顶部应该位于同一位置,就在黑色条的下方 任何帮助都将不胜感激 这就是我想要实现的结果——请注意,当鼠标悬停时,子菜单的坐姿正好位于黑条下方 代码 HtmlJavascript 将子菜单固定到导航顶部,javascript,html,css,Javascript,Html,Css,我创建了一个带有两个子菜单的下拉式导航 我试图让第二个子菜单从顶部开始(就在主导航/黑条的下方),而不是在它的当前位置,但我不知道如何做到这一点 这是我做的一支密码笔 例如,如果您将鼠标悬停在Personal>Caravan或Personal>Home&Property上,子菜单的顶部应该位于同一位置,就在黑色条的下方 任何帮助都将不胜感激 这就是我想要实现的结果——请注意,当鼠标悬停时,子菜单的坐姿正好位于黑条下方 代码 Html 如果我理解正确,您有填充问题。如果您从中删除了填充: ul u
如果我理解正确,您有填充问题。如果您从中删除了填充:
ul ul ul {
position: absolute; left: 100%; top:-100%;
width: 230px;
padding: 10px;
}
以下是尝试下面的Html代码
- 您需要为每个内部
-
-
-
`不,解释不清楚是我的错。这是另一个演示,如果您将鼠标悬停在caravan上,请注意子菜单与黑条齐平。这就是我在寻找的效果,当你悬停在任何子菜单上,这是我没有解释清楚的错误。这是另一个演示,如果您将鼠标悬停在caravan上,请注意子菜单与黑条齐平。这就是当您将鼠标悬停在任何子菜单上时,我要寻找的效果-
* {
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;
}
ul ul ul {
position: absolute; left: 100%; top:-100%;
width: 230px;
padding: 10px;
}
<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" style="margin-top:-60px;">
<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" style="margin-top:-120px;">
<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" style="margin-top:-120px;">
<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>