サブメニューをその親メニューの下にドロップダウンできません

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

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

Answer 2

私は同様にあなたのCSSコードやHTMLを更新しました。あなたの構造は複雑で、CSSはidで他のドロップダウンメニューには再利用できません。

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