流体宽度下拉菜单

Question

我很难用纯 CSS 设计一个具有流动宽度的下拉菜单。我发现的示例都有一个固定宽度的顶部菜单。一旦我使顶部菜单流动宽度，下拉菜单不起作用。谁能帮我完成代码？我基本上有 7 个菜单项，包括一个空白的中间项。在中间那个我有一个绝对定位的标志。

HTML

<div style="position:relative;">
<a href="#"><img style="position:absolute; width:14.28%; max-height:80px; margin-left: auto;margin-right: auto;left: 0;right: 0;" src="\adrenicon.jpg"/></a>

<nav>
<ul>
  <li><a href="#">Start Here</a></li>
  <li><a href="#">Destinations</a>
    <ul>
      <li><a href="#">Africa</a></li>
      <li><a href="#">Europe</a></li>
      <li><a href="#">America</a></li>
    </ul>
</li>
  <li><a href="#">Features</a></li>
  <li>&nbsp</li>
  <li><a href="#">Activities</a></li>
  <li><a href="#">Planner</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

CSS：

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;

}


nav li {
    float: left;
    width:14.28%;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    position: relative;
}




nav li a {
    font-weight: bold;
    color: hotpink;
    text-align: center;
    padding: 0px;
    text-decoration: none;
    -webkit-transition: color 1s;
    transition: color 1s;
}


   nav li a:hover {
    color: #111;

}


nav ul li ul {

    position: absolute;
    display: none;
    background-color: #f9f9f9;
    min-width: 160px;

}

感谢您的帮助。

Answer 1

首先您需要将overflow:visible 设置为主ul (nav ul)

然后，因为您在nav ul li 上设置了14.28% 的宽度，所以您需要将100% 的宽度设置为li（nav ul li ul li）的第二层，这样它们就不会在上面每个人都在一个单独的行上

因为li 有float:left;，您还需要在nav ul 上设置float:left;width:100%。

然后悬停在li 上，将第二个ul 上的display:none 更改为display:block

参见下面的 sn-p。让我知道它是否有效

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    background-color: #333;
    float:left;
    width:100%;

}


nav li {
    float:left;
    width:14.28%;
    text-align: center;
    line-height: 50px;

    position: relative;
}




nav li a {
    font-weight: bold;
    color: hotpink;
    text-align: center;
    padding: 0px;
    text-decoration: none;
    -webkit-transition: color 1s;
    transition: color 1s;
}


   nav li a:hover {
    color: #111;

}


nav ul li ul {

    position: absolute;
    display: none;
    background-color: #f9f9f9;
    min-width: 160px;

}
nav ul li ul li {
  width:100%;}
  
nav ul li:hover > ul{
  display:block;
}
nav ul ul ul { 
right:-100%;
top:0
}

<div style="position:relative;">
<a href="#"><img style="position:absolute; width:14.28%; max-height:80px; margin-left: auto;margin-right: auto;left: 0;right: 0;" src="http://placehold.it/100x100.jpg"/></a>

<nav>
<ul>
  <li><a href="#">Start Here</a></li>
  <li><a href="#">Destinations</a>
    <ul>
      <li><a href="#">Africa</a>
          <ul>
              <li><a href="#">Kenya</a></li> 
              <li><a href="#">Tanzania</a></li>
            
          </ul>
       </li>
      <li><a href="#">Europe</a>
          <ul>
              <li><a href="#">Spain</a></li> 
              <li><a href="#">France</a></li>
            
          </ul>
       </li>
      <li><a href="#">America</a></li>
    </ul>
</li>
  <li><a href="#">Features</a></li>
  <li>&nbsp</li>
  <li><a href="#">Activities</a></li>
  <li><a href="#">Planner</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

已编辑第三级 ul 。 代码：ul ul ul { right:-100%;top:0;}