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）

然后，因为您在14.28%上设置了nav ul li的宽度，您需要将100%的宽度设置为第二级li（nav ul li ul li因此，他们不会在每个人的顶部，并且每个人都停留在一个单独的行

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

然后将li悬停在第display:none

上display:block更改为ul

见下面的代码段。让我知道它是否有效

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的第3级。代码：ul ul ul { right:-100%;top:0;}

流体宽度下拉菜单

1 个答案: