0

我正在尝试创建一个下拉菜单，但是每当我将鼠标悬停在父菜单上时，子菜单都不会与之对齐。我经历了很多例子，我总是得到相同的结果。

我的 CSS 代码是

#mainNav {
   margin-top: 20px;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   padding: 0;  
   overflow: hidden;
   background-color: #BBFFFF;
   zoom: 1;
}

#mainNav li {
   float: left;
   list-style: none;
}
#mainNav li a {
   color: #000000;
   display: block;  
   width: 80px;
   font-size: 14px;
   text-align: center;
   text-transform: uppercase;
   text-decoration: none;   
   padding: 7px 0px 7px 0px;
   border-right: 1px solid #999;    
   zoom: 1; 
}
#mainNav li ul {
   display: none;
}
#mainNav a:hover {
   background-color: #66FF66;
}
#mainNav li:hover ul {
   display: block;
   position: absolute;
}
#mainNav li:hover li {
   float: left;
   width: 80px;
   background-color: #BBFFFF;
   margin: 0;
   padding: 0;
}

我的 HTML 是

<div>
  <ul id="mainNav">
    <li><a href="pageone.html" id="pageOneLink">Page One</a></li>
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li>
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a>
      <ul>
        <li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>
      </ul>
    </li>
  </ul>
</div>
4

3 回答 3

0

复制粘贴试试这个。这个例子中的一些东西会帮助你。

<html>
<head>
<style type="text/css">
#mainNav{
    /*  Your mainNav decoration here */

}
#mainNav li{
    list-style:none;
    display:inline-block;
    background-color:#0FF;
    padding:10px;
    border:1px solid #000;
}

#mainNav ul{
    position:absolute;
    display:none;
    padding:0px;
    top:50px;
}

#mainNav li:hover ul{
    display:inline-block;
}
</style>
</head>
<body>

<ul id="mainNav">
    <li><a href="pageone.html" id="pageOneLink">Page One</a>
     <br />
      <ul>
        <li><a href="onePageOne.html" name="onePageOneLin">Sub Page One</a></li>
      </ul>
    </li>
    <li><a href="pagetwo.html" id="pageTwoLink">Page Two</a></li>
    <li><a href="pagethree.html" id="pageThreeLink">Page Three</a>
    <br />
      <ul>
        <li><a href="threePageOne.html" name="threePageOneLin">Sub Page One</a></li>
      </ul>

    </li>
  </ul>

</body>
</html>
于 2013-02-16T19:40:05.813 回答
0

您可以使用负边距左将其拉回线。将其添加到：

#mainNav li:hover ul {}

或者你可以设置 padding: 0; 在同一个元素上。

此外，您在以下位置缺少一个结束 '"'：

<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>
于 2013-02-16T19:13:15.010 回答
0

那里有很多 css 不够具体，有些东西放在错误的地方。

我在这里为你写了一个 jsfiddle：你的代码的 DISTILED 版本

您在 li 上拥有列表样式，而不是它所属的 ul 。您对子列表等也不够具体。使用 > 喜欢，

.main-nav > li > a { }会说仅针对 li 的第一层，并且在那个 li 中唯一的 a 等等。

我会给 ul 的课程等。请参阅小提琴，了解我认为最简单的方法。对于其他人，请让我知道我的小提琴是否可以更简洁。

于 2013-02-16T20:02:41.810 回答