Question

我有一个带有下拉菜单的菜单，我有的问题是下拉列表的宽度，我试图让ul与父li的尺寸相同，但我不知道是什么我做错了。

我尝试将下拉列表的位置从absolute更改为relative，但如果我这样做，则会将内容区域向下移动。

有人可以说明我做错了什么。

.topMenu ul ul
{
    position: absolute/relative(with both i got a problem);
}

HTML：

<div class="topMenu">
    <ul>
      <div id="wrapper">
        <li><a href="#">Lorem Ipsum</a></li> 
        <li><a href="#">Consectetur Adipiscing</a>
          <ul>
            <li><a href="#">Nemo enim</a></li> 
            <li><a href="#">Nemo enim</a></li> 
            <li><a href="#">Nemo enim</a></li> 
          </ul>
        </li>
        <li><a href="#">Nemo enim</a></li>
        <li><a href="#">Voluptatem </a></li>
        <li><a href="#">Neque porro</a>
          <ul>
            <li><a href="#">Nemo enim</a></li> 
          </ul>
        </li>
        <li><a href="#">Quis autem</a></li>
        <li><a href="#">Nam libero</a></li> 
      </div>
    </ul>
  </div> 
  </header>  
<br>
<div class="content" id="wrapper">
  <ul class="list-under">
    <li>The standar rum. </p>
    </li>
    <li>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laud </p>
    </li>
    <li>1914 translation by H. Rackham
      <p>On the other hand, we denounce  . </p>
    </li>
  </ul>
</div>

CSS：

*
{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body
{
    background-color: #c1c1c1;
}

#wrapper
{
    width: 960px;
    margin: 0 auto;
    padding: 0 auto;
}

.content
{
    background-color: #fff;
    padding: 10px; 
}

.topMenu ul
{
    height: 43px;
    background: black; 

}

.topMenu ul li
{
    float: left;
    list-style: none; 
}

.topMenu ul li a
{
    padding: 12px 15px;
    display: block;
    color: white;
    text-decoration: none;
    border-right: 1px solid #4a4848;
}

.topMenu ul li:first-child a
{
    border-left: 1px solid #4a4848;
}

.topMenu ul li a:hover, .topMenu ul li a:focus
{
    background: green;
    transition: .4s;
}

.topMenu ul ul
{
    position: absolute;
    width: 100%; 
    background: #232222;
    height: auto;
    left: -9999em;   
}

.topMenu ul li:hover ul,
.topMenu ul li.hover ul
{
    left: auto;
    transition: .4s;
}

.topMenu ul ul li 
{
    float: none;
    border-top: 1px solid #4f4d4d;
}

.clear
{
    clear: both;
}

Answer 1

只需将position: relative添加到.topMenu ul li即可。您希望子菜单的行为与其父li相关，而不是topMenu容器。

.topMenu ul li
{
    float: left;
    list-style: none;
    position: relative;
}

jsFiddle fork：https://jsfiddle.net/azizn/casrm2qj/

如何为下拉菜单

1 个答案: