我現在有一個下拉菜單如何使用css創建一個鏈接內的子菜單

Question

我很新的CSS試圖學習新的語言，我有一個dropdowm，我已經使用CSS和HTML現在如何創建一個子菜單它懸停在一個鏈接

檢查我的代碼，到現在我做了什麼：

.nav-collapse .nav li a { 
 
    font-size: 13px; 
 
    color: #7281a1; 
 
    font-family: 'Noto Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-shadow: none; 
 
    padding: 25px 15px 26px 30px; 
 
} 
 

 
.nav-collapse .nav>li { 
 
    margin-left: 3px; 
 
    position: relative; 
 
} 
 

 
.nav-collapse .nav li a#home-nav { 
 
    background: url('../images/home.png') 3px center no-repeat; 
 
} 
 

 
.nav-collapse .nav li a:hover { 
 
    text-decoration: underline; 
 
    color: #7281a1; 
 
} 
 

 
ul.dropdown { 
 
    position: absolute; 
 
    width: 150px; 
 
    background: #fff; 
 
    top: 110%; 
 
    left: 0; 
 
    border-top: 2px solid #8248ac; 
 
    visibility: hidden; 
 
    transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -webkit-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
} 
 

 
ul.dropdown:before { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border: 5px solid #8248ac; 
 
    border-top-color: transparent; 
 
    border-left-color: transparent; 
 
    border-right-color: transparent; 
 
    left: 20px; 
 
    top: -10px; 
 
} 
 

 
ul.dropdown li { 
 
    border-top: 1px solid #f7f8f9; 
 
} 
 

 
ul.dropdown li:first-child { 
 
    border-top: none; 
 
} 
 

 
ul.dropdown li a { 
 
    display: inline-block; 
 
    padding: 10px 7px !important; 
 
} 
 

 
.nav-collapse .nav>li:hover ul.dropdown { 
 
    visibility: visible; 
 
    top: 100%; 
 
}

<div class="nav-collapse collapse"> 
 
    <ul class="nav"> 
 

 
    <li> 
 
     <a id="home-nav" href="#">Menu</a> 
 
     <ul class="dropdown"> 
 
     <li class="dropdown"><a href="#">Dropdown</a> 
 
      <ul> 
 
      <li><a href="#">sub-dropdown</a></li> 
 
      </ul> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
</div>

所以當上的菜單，下拉用戶將鼠標懸停應該來當下拉子滴用戶將鼠標懸停下來應該來

在此先感謝！

Answer 1

你應該隱藏子菜單，顯示它，當你將鼠標懸停在鏈接上，就像第一個下拉

這個代碼添加到你的CSS文件

ul.dropdown li ul { 
    display:none; 
} 

ul.dropdown li.dropdown:hover ul { 
    display:block; 
} 

見工作片斷：

.nav-collapse .nav li a { 
 
    font-size: 13px; 
 
    color: #7281a1; 
 
    font-family: 'Noto Sans', sans-serif; 
 
    font-weight: 700; 
 
    text-shadow: none; 
 
    padding: 25px 15px 26px 30px; 
 
} 
 

 
.nav-collapse .nav>li { 
 
    margin-left: 3px; 
 
    position: relative; 
 
} 
 

 
.nav-collapse .nav li a#home-nav { 
 
    background: url('../images/home.png') 3px center no-repeat; 
 
} 
 

 
.nav-collapse .nav li a:hover { 
 
    text-decoration: underline; 
 
    color: #7281a1; 
 
} 
 

 
ul.dropdown { 
 
    position: absolute; 
 
    width: 150px; 
 
    background: #ccc; 
 
    top: 110%; 
 
    left: 0; 
 
    border-top: 2px solid #8248ac; 
 
    visibility: hidden; 
 
    transition: all 0.2s linear; 
 
    -moz-transition: all 0.2s linear; 
 
    -webkit-transition: all 0.2s linear; 
 
    -o-transition: all 0.2s linear; 
 
} 
 

 
ul.dropdown:before { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border: 5px solid #8248ac; 
 
    border-top-color: transparent; 
 
    border-left-color: transparent; 
 
    border-right-color: transparent; 
 
    left: 20px; 
 
    top: -10px; 
 
} 
 

 
ul.dropdown li { 
 
    border-top: 1px solid #f7f8f9; 
 
} 
 

 
ul.dropdown li:first-child { 
 
    border-top: none; 
 
} 
 

 
ul.dropdown li a { 
 
    display: inline-block; 
 
    padding: 10px 7px !important; 
 
} 
 

 
.nav-collapse .nav>li:hover ul.dropdown { 
 
    visibility: visible; 
 
    top: 100%; 
 
} 
 

 
ul.dropdown li ul { 
 
    position: absolute; 
 
    left: 100%; 
 
    top: -2px; 
 
    background: #ccc; 
 
    width: 100%; 
 
    border-top: 2px solid #8248ac; 
 
    display: none; 
 
} 
 

 
ul.dropdown li.dropdown:hover ul { 
 
    display: block; 
 
}

<div class="nav-collapse collapse"> 
 
    <ul class="nav"> 
 

 
    <li> 
 
     <a id="home-nav" href="#">Menu</a> 
 
     <ul class="dropdown"> 
 
     <li class="dropdown"><a href="#">Dropdown</a> 
 
      <ul> 
 
      <li><a href="#">sub-dropdown</a></li> 
 
      </ul> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
</div>