Question

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

我的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>

Answer 1

您可以使用负余量 - 左边将其拉回来。将其添加到：

#mainNav li:hover ul {}

或者你可以设置填充：0;在同一个元素上。

此外，您错过了关闭'“'in：

<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>

Answer 2

复制粘贴并尝试此操作。这个例子中的某些东西可以帮到你。

<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>

Answer 3

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

我在这里写了一篇jsfiddle：A DISTILED VERSION OF YOUR CODE

你有li的列表样式而不是它所属的ul。你对子列表也不够具体。使用＆gt;喜欢，

.main-nav > li > a { }会说只针对第一层li，而在那里，只有那个li等。

我会给我们的课程等。看看我认为最简单的方法的小提琴。对于其他人，如果我的小提琴更简洁，请告诉我。

子菜单项不会与父项对齐

3 个答案: