下拉菜单到敏感

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）