Question

这是我的代码的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;

 }

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我也更新了您的CSS代码和HTML。您的结构过于复杂，id的css无法重复用于其他下拉菜单。

＆＃13;

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

＆＃13;

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

＆＃13;

我无法在其父菜单下拉下子菜单

2 个答案: