Question

我正在学习HTML5和CSS。所以我的问题可能非常基本且非常幼稚。我为此道歉。练习我正在开发一个带有下拉子菜单的标题菜单。我遇到的问题是，即使我将子菜单的显示值设置为阻止，以便子菜单垂直下降但现在它水平下降。 html文件：

       <nav>
            <ul>
              <li><a href="#">Home</a></li>
                <ul>
                  <li><a href="#">All</a></li>
                  <li><a href="#">New Arrival</a></li>
                  <li><a href="#">Casual</a></li>
                  <li><a href="#">Gown</a></li>
                  <li><a href="#">Bridesmade</a></li>
                </ul>
              <li><a href="#">Woman</a></li>
                  <ul>
                    <li><a href="#">All</a></li>
                    <li><a href="#">New Arrival</a></li>
                    <li><a href="#">Casual</a></li>
                    <li><a href="#">Gown</a></li>
                    <li><a href="#">Bridesmade</a></li>
                  </ul>
              <li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </nav>

这是css代码：

nav{
  height:40px;
  width: 960px;
  display: block;
  margin: 0,auto;
  text-align: center;
  text-transform: uppercase;
}

nav a{
  display: block;
  text-decoration: none;
  font-size: 13px;
  color: #112233;
}

nav ul{
  list-style: none;
}

nav ul li{
  float:left;
  width:140px;
  height:40px;
  line-height: 40px;
  background: #fc575e;
}

nav ul ul li{
  position: relative;
  display: none;
}

nav ul li:hover + ul li{
  display: block;  
}

nav ul li:hover{
  background-color: #223433;
  color:#f0f1f5;
}

我想知道某个机构是否可以帮我解决我的代码有什么问题？非常感谢。

Answer 1

更正是。

问题是因为li标记都是float:left，这导致即使是下拉元素也是水平的。所以我创建了一个类.dropdown来将浮动重置为无。

<强> CSS：

.dropdown li {
  float: none;
}

下拉列表ul仍然会导致布局问题，因为您没有将其设置为绝对位置，这会使其与导航栏分开并将其显示为浮动（不是CSS浮动）类型的元素。然后，ul.dropdown需要放在父li元素内。这将允许我们根据父li元素定位绝对元素。

<强> CSS：

nav ul li {
  float: left;
  position:relative;
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #fc575e;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0px;
  padding-left:0px;
}

在悬停时，a标签也是黑色，这使标签消失。我建议在下面添加CSS，将a标记设置为白色，单独悬停。

<强> CSS：

nav ul li:hover > a {
  color: white;
}

下面是代码的一个工作示例。

＆＃13;

nav {
  height: 40px;
  width: 960px;
  display: block;
  margin: 0, auto;
  text-align: center;
  text-transform: uppercase;
}

nav a {
  display: block;
  text-decoration: none;
  font-size: 13px;
  color: #112233;
}

nav ul {
  list-style: none;
}

nav ul li {
  float: left;
  position: relative;
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #fc575e;
}

nav ul li ul li {
  position: relative;
  display: none;
}

nav ul li:hover>a {
  color: white;
}

nav ul li:hover ul li {
  display: block;
}

nav ul li:hover {
  background-color: #223433;
  color: #f0f1f5;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0px;
  padding-left: 0px;
}

.dropdown li {
  float: none;
}

＆＃13;

<nav>
  <ul>
    <li>
      <a href="#">Home</a>
      <ul class="dropdown">
        <li><a href="#">All</a></li>
        <li><a href="#">New Arrival</a></li>
        <li><a href="#">Casual</a></li>
        <li><a href="#">Gown</a></li>
        <li><a href="#">Bridesmade</a></li>
      </ul>
    </li>

    <li>
      <a href="#">Woman</a>
      <ul class="dropdown">
        <li><a href="#">All</a></li>
        <li><a href="#">New Arrival</a></li>
        <li><a href="#">Casual</a></li>
        <li><a href="#">Gown</a></li>
        <li><a href="#">Bridesmade</a></li>
      </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

＆＃13;

Answer 2

1.Avoid the plus (+) sign in nav ul li:hover + ul li{display: block;} style.

2.Add one more style nav ul li ul {padding-left: 0px;}

3.li tag of Home and Woman close after dropdown list items. i.e,
<li><a href="#">Home</a>
<ul>
    <li><a href="#">All</a></li>
    <li><a href="#">New Arrival</a></li>
    <li><a href="#">Casual</a></li>
    <li><a href="#">Gown</a></li>
    <li><a href="#">Bridesmade</a></li>
</ul>
</li>

Corrupted code:
<html>
<head>
<style>
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}

nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}

nav ul{
list-style: none;
}

nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}

nav ul ul li{
position: relative;
display: none;
}

nav ul li:hover  ul li{
display: block;  
}

nav ul li:hover{
background-color:  #e3b0b2;
color:#f0f1f5;
}
nav ul li ul{
padding-left: 0px;
}

</style>
</head>
<body>
<nav>
    <ul>
      <li><a href="#">Home</a>
        <ul>
          <li><a href="#">All</a></li>
          <li><a href="#">New Arrival</a></li>
          <li><a href="#">Casual</a></li>
          <li><a href="#">Gown</a></li>
          <li><a href="#">Bridesmade</a></li>
        </ul>
        </li>
      <li><a href="#">Woman</a>
          <ul>
            <li><a href="#">All</a></li>
            <li><a href="#">New Arrival</a></li>
            <li><a href="#">Casual</a></li>
            <li><a href="#">Gown</a></li>
            <li><a href="#">Bridesmade</a></li>
          </ul>
          </li>
      <li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</body>
</html>

下拉子菜单是水平打开而不是垂直打开。

2 个答案: