下拉菜單到敏感

Question

我想在我的網站上創建一個簡單的下拉菜單。我試圖獲得它，所以當我將鼠標懸停在「關於我」選項卡上時，它會下拉菜單，並在該菜單中「聯繫我」。我有它的工作，但問題是即使當我把鼠標放在它出現的導航欄的同一行上，所以如果我將鼠標懸停在Home上，它就會出現。我只是想讓它在我周圍徘徊時出現。

這裏是我的CSS和HTML

#nav{ 
    width: 75%; 
    height: 3%; 
    font-size: 150%; 
    font-weight: bold; 
    border-radius: 8%; 
    text-align: center; 
    margin: 0 auto; 
} 

#nav ul { 
    height: auto; 
    padding: 0% 0%; 
    margin: auto%; 
    background-color: #f2f2f2; 
    border-bottom: 5% solid #ccc; 
    display: inline-block; 
    overflow: hidden; 
} 

#nav li { 
    display: inline-block; 
    padding: 3%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#nav a { 
    text-decoration: none; 
    padding: 0% 0% 0% 0%; 
} 

#nav a:hover { 
    color: #000000; 
    background-color: white; 
} 

#aboutme:hover ul { 
    display: block; 
} 

#nav li ul { 
    display: none; 
} 

#nav li:hover ul{ 
    display: block; 
} 

    <ul id="nav"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="aboutme.html">About Me</a> 
      <ul> 
      <li><a href="contact.html">Contact Me</a></li> 
      </ul> 
     </li> 
     <li><a href="services.html">Services</a></li> 
     <li><a href="Gallery.html">Gallery</a></li> 
     <li><a href="kotorsale.html">For Sale</a></li> 
     <li><a href="buildlog.html">Build Log</a></li> 
    </ul> 

Answer 1

這是一個新的加價來糾正你的一些問題。希望這可以幫助你。另外，我將nav元素從ID改爲一個類。

HTML：

<ul class="nav"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="aboutme.html">About Me</a> 
     <ul> 
      <li><a href="contact.html">Contact Me</a></li> 
     </ul> 
    </li> 
    <li><a href="services.html">Services</a></li> 
    <li><a href="Gallery.html">Gallery</a></li> 
    <li><a href="kotorsale.html">For Sale</a></li> 
    <li><a href="buildlog.html">Build Log</a></li> 
</ul> 

CSS：

.nav { 
    font-size: 1.25em; 
    width: 100%; 
    min-width: 750px; 
    text-align: center; 
} 
ul.nav, ul.nav ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    text-align: center; 
} 
ul.nav li { 
    display: inline-block; 
    width: 115px; 
} 
ul.nav li ul { 
    position: absolute; 
    left: -999em; 
} 
ul.nav li ul li {   
    width: 155px;   
    text-align: left;  
    padding: 15px;   /*--------UPDATE--------*/ 
} 
ul.nav li ul li a {   /*--------UPDATE--------*/ 
    padding: 15px;   /*--------UPDATE--------*/ 
} 
.nav li:hover ul { 
    left: auto; 
} 
ul.nav a { 
    text-decoration: none; 
    padding: .2em .5em; 
} 
ul.nav li li a { 
    border-top: 1px solid #f2f2f2; 
    border-bottom: 1px solid #ccc; 
    border-left: 0; 
    border-right: 0; 
} 
ul.nav li:last-child a { 
    border-right: 0; 
    border-bottom: 0; 
} 

這裏是的jsfiddle一個例子：（jsfiddle.net/5GBt2/13）