0

我正在尝试在我的网站上创建一个简单的下拉菜单。我正在尝试获取它，因此当我将鼠标悬停在“关于我”选项卡上时，它会下拉一个菜单，其中有“联系我”。我让它工作了，但问题是即使我将鼠标放在与它出现的导航栏相同的行上，所以如果我将鼠标悬停在主页上，它就会出现。我只是希望它在悬停在我身上时出现。

这是我的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>
4

1 回答 1

0

这是一个新的标记来纠正您的一些问题。希望这对您有所帮助。另外，我将 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)

于 2013-10-14T03:13:45.780 回答