我无法下拉其父菜单下的子菜单
问题描述:
这是我的代码的HTML。我在下拉选项中创建了具有子菜单的导航菜单栏,但是我的子菜单不会在父菜单下方下拉菜单“下拉菜单”。我无法下拉其父菜单下的子菜单
.nav-wrap{
background:white;
width:100%;
height:50px;
position: relative;
top:-13px;
overflow:visible;
}
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 100%;
}
#example-one li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight:bold;
font-size: 14px;
float: left;
padding: 15px 15px;
text-decoration: none;
left:350px;
position:relative;
color:#000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after{
width: 100%;
left: 0;
background: #000;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
<div class="nav-wrap">
<ul class="group" id="example-one">
<li><a href="#">Home</a></li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Reviews</a></li>
</ul></div>
这里是CSS:
.nav-wrap{
background:white;
width:100%;
height:50px;
position: relative;
top:-13px;
overflow:visible;
}
#example-one {
margin: 0 auto;
list-style: none;
position: relative;
width: 100%;
}
#example-one li {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight:bold;
font-size: 14px;
float: left;
padding: 15px 15px;
text-decoration: none;
left:350px;
position:relative;
color:#000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after{
width: 100%;
left: 0;
background: #000;
}
.dropbtn {
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
答
.nav-wrap {
background: white;
width: 100%;
}
#example-one {
text-align: right;
}
#example-one li {
text-align: left;
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
#example-one a {
color: #000;
font-weight: bold;
font-size: 14px;
padding: 15px 15px;
text-decoration: none;
position: relative;
color: #000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;
-webkit-transition-property: left, right;
transition-property: left, right;
transition: width 1s ease;
-webkit-transition: width 1s ease;
}
#example-one a:hover:after {
width: 100%;
left: 0;
background: #000;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
#example-one li li {
display: block;
}
#example-one li:hover>ul {
display: block;
}
<div class="nav-wrap">
<ul class="group" id="example-one">
<li><a href="#">Home</a></li>
<li><a class="dropbtn">Dropdown</a>
<ul class="dropdown-content">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Offers</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
+0
非常感谢您的帮助,请您解释我的错误是什么? –
+0
要验证html,你不能在ul中有div。当你鼠标悬停时,下一个ul需要定位绝对(绝对div相对于第一个父位置:相对),所以你需要添加top:100%,并将left:0改为ul。在树li和ul元素是继承属性,所以第一个li是inline-block,第二个是你需要添加li li display:block将每个元素保存在一行中...... thats it:D – rafaelfndev
答
我已经更新了你的CSS代码和HTML以及。您的结构已经过于复杂,并且id
的css对其他下拉菜单不可重复使用。
.nav {
display: inline-block;
text-align: left;
}
.nav,
.dropdown {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav > li {
float: left;
position: relative;
}
.nav li > a {
display: block;
position: relative;
padding: 10px 25px;
color: #000;
font: bold 14px sans-serif;
text-decoration: none;
}
.nav .dropdown {
display: none;
position: absolute;
top: 100%;
background-color: #fff;
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .2);
min-width: 160px;
}
.nav .dropdown .dropdown {
top: 0;
left: 100%;
}
.nav .dropdown > li {
position: relative;
}
.nav li:hover > .dropdown {
display: block;
}
.nav .dropdown a:hover {
background-color: #f1f1f1;
}
.nav a::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 3px;
background: #000;
transition-property: left, right;
transition: width 1s ease;
}
.nav a:hover::after {
width: 100%;
left: 0;
background: #000;
}
<div style="text-align: center">
<ul class="nav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul class="dropdown">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
</ul>
</li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#">Offers</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
哪来的CSS? – MrNew
现在请检查代码我还添加了css –