懸停在導航條上

Question

我有一個帶有子導航的導航欄，但每當我將鼠標懸停在導航的某個部分上時，子菜單以非常奇怪的方式打開。這裏是我的代碼：

#menu { 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    width: 715px; 
 
    margin-left: 600px; 
 
    font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; 
 
    border-radius: 4px; 
 
} 
 
#menu ul li { 
 
    display: inline-block; 
 
    padding: 15px; 
 
    margin-left: 90px; 
 
} 
 
#menu ul li a { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 
/* Sub-menu */ 
 

 
#menu ul ul { 
 
    display: none; 
 
} 
 
#menu ul li:hover > ul { 
 
    display: block; 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i> 
 
    \t <ul class="sub-menu"> 
 
    \t \t <li><a href="ru.html">Russisch</a></li> 
 
     </ul> 
 
     </a> 
 
    </li> 
 
    <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
</nav>

應該的 「Projecten」 選項卡下打開，但做到這一點： problem

Answer 1

那是因爲你，只要你設置的東西從display: none;到display: block;一個元素添加到菜單。這將拉扯所有的東西，並使它看起來像它。

解決方案是position: absolute;從網站流中刪除子菜單。我會告訴你一個例子，使用您的代碼：

#menu { 
 
     background-color: rgba(0,0,0,0.6); 
 
     width: 715px; 
 
     margin-left: 600px; 
 
     font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; 
 
     border-radius: 4px; 
 
    } 
 
    
 
    #menu ul li { 
 
     display: inline-block; 
 
     padding: 15px; 
 
     margin-left: 90px; 
 
     position: relative; /* This is needed to be able to set 
 
          the submenu relative to it's parent item */ 
 
    } 
 
    
 
    #menu ul li a { 
 
     text-decoration: none; 
 
     color: #FFF; 
 
    
 
    } 
 
    
 
    /* Sub-menu */ 
 
    
 
    #menu ul ul { 
 
     display: none; 
 
     /* Here we'll place it at the bottom of the menu item */ 
 
     position: absolute; 
 
     top: 100%; /* This should equal the bottom of the item */ 
 
     left: 0; /* To put it at the left side of the item */ 
 
     /** And some basic styling to make it visible */ 
 
     background: rgba(0,0,0,0.6); 
 
    } 
 
    
 
     #menu ul li:hover > ul { 
 
      display:block; 
 
     }

<nav id="menu"> 
 
    \t \t \t <ul> 
 
    \t \t \t \t <li><a href="#">Home</a></li> 
 
    \t \t \t \t <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i></a> 
 
    \t \t \t \t <ul class="sub-menu"> 
 
    \t \t \t \t \t <li><a href="ru.html">Russisch</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t \t </li> 
 
    \t \t \t \t <li><a href="contact.html">Contact</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </nav>

我希望這會清理足以讓你繼續你的工作。

編輯：也清理了HTML。您不應該在鏈接中打開新的UL。

Answer 2

使用的定位。方法如下：

• 將position: relative添加到li元素。
• 將position: absolute加到第二級ul元素。
• 將一些背景色添加到第二級ul元素。

這將顯示爲下拉菜單。

工作例如：

#menu { 
 
     background-color: rgba(0,0,0,0.6); 
 
     width: 715px; 
 
     margin-left: 600px; 
 
     font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; 
 
     border-radius: 4px; 
 
    } 
 
    
 
    #menu ul li { 
 
     display: inline-block; 
 
     padding: 15px; 
 
     margin-left: 90px; 
 
     position: relative; /*Added this*/ 
 
    
 
    } 
 
    
 
    #menu ul li a { 
 
     text-decoration: none; 
 
     color: #FFF; 
 
    
 
    } 
 
    
 
    /* Sub-menu */ 
 
    
 
    #menu ul ul { 
 
     display: none; 
 
     background-color: rgba(0,0,0,0.6); /*added this*/ 
 
     position: absolute; /*and this*/ 
 
     /*These two are positioning the dropdown relative to the bottom left corner of the parent item*/ 
 
     left: 0; 
 
     top: 100%; 
 
    } 
 
    
 
    #menu ul li:hover > ul { 
 
     display:block; 
 
    }

<nav id="menu"> 
 
    \t \t \t <ul> 
 
    \t \t \t \t <li><a href="#">Home</a></li> 
 
    \t \t \t \t <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i> 
 
    \t \t \t \t <ul class="sub-menu"> 
 
    \t \t \t \t \t <li><a href="ru.html">Russisch</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t \t </a></li> 
 
    \t \t \t \t <li><a href="contact.html">Contact</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </nav>

Answer 3

/* edit by Manish*/ 
.sub-menu { 
    background: #333 none repeat scroll 0 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 49px; 
} 
.parent{ 
    position: relative; 
} 
/* edit by Manish*/ 

添加「父」類父「李」

<nav id="menu"> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li class="parent"><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i> 
         <ul class="sub-menu"> 
          <li><a href="ru.html">Russisch</a></li> 
         </ul> 
         </a></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </nav>