下拉菜单（悬停）

时间：2017-01-30 12:55:06

标签： html css drop-down-menu hover

我不太确定我在这里做错了什么。当有人将鼠标悬停在导航项目上时（在这种情况下为＆＃34; Products＆＃34; Link），我想要一个标准的下拉导航块。我没有使用无序列表，只是链接。我设法将所有元素放在正确的位置，正确的格式看起来很棒。唯一的问题是，当我将鼠标悬停在主菜单按钮上时，我无法显示子菜单？无法弄清楚原因，对我来说看起来不错。我在谷歌浏览器中进行预览

<!DOCTYPE html>

<html>
  <head>

      <title>Food Supply Company</title>

      <link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css"> 

      <link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">  

  </head>

  <body>

     <div class="container">

      <div class="title">
        <h1>Food Supply Company</h1>
      </div>

        <div class="menunav">
            <a href="#" class="Products">Products</a>
            <a href="#">About Us</a>
            <a href="#">Contacts</a>
          </div>

        <div class="productsnav">
            <a href="#">Fruits</a>
            <a href="#">Vegetables</a>
            <a href="#">Dry Foods</a>
            <a href="#">Spices</a>
        </div>

  </div>

</body>

</html>

CSS样式表

*{
    Margin:0; 
    background-color: aliceblue;
    padding:0
}

.container{
    width: 900px;
    margin:auto;
    height:900px;

}

 h1{
    padding:20px 0px 10px 0px;
    background-color:bisque;
    text-align: center;
    font-family: 'Verdana',sans-serif;
    font-weight: 700;
    font-size:50px;
    letter-spacing: 2px;
    color:coral;
    text-shadow: 2px 2px brown;
    Width: 100%;
    background-color:bisque;

}

a{
    text-decoration: none;
    text-align: center;
    font-family: 'verdana', sans-serif;
    width:33%;
    text-align: center;
    list-style: none;
    padding: 5px 0px 5px 0px;
    background-color: coral;
    color: bisque;
    box-shadow: 2px 2px 2px rgb(40,0,0);
}

a:hover{
    font-family: 'verdana', sans-serif;
    background-color: bisque;
    color: coral;
}

.menunav a{
    display:inline-block;
    margin-top:5px
}

.productsnav{
    width:33%;
    margin-bottom:3px;
}

.productsnav a{
    width:100%;
    display: none;
    margin-top: 5px;
}

.Products:hover .productsnav a{
    display:block;
}

CSS代码中的最后几个似乎是错误的，但我无法弄清楚到底是什么。我已经观看了很多关于这个的视频，并且已经格式化了css代码，以几种不同的方式显示子菜单，但我无法弄明白。

由于

4 个答案:

答案 0 :(得分：0)

您应该考虑使用无序列表，以便更容易地显示子菜单。

在没有其他菜单项的情况下，我快速解决了您的问题。

https://plnkr.co/edit/pBtp39zKpRL5YqCZvxK0?p=preview

我将你的html和css更改为以下内容：

<强> HTML 

<html>
  <head>
      <title>Food Supply Company</title>
      <link href="style.css" rel="stylesheet" text="text/css"> 
      <link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">  
  </head>

  <body>
     <div class="container">
      <div class="title">
        <h1>Food Supply Company</h1>
      </div>
      <div class="menunav">
        <ul>
          <li class="products">
            <a href="#">Products</a>
            <ul class="productsnav">
              <li><a href="#">Fruits</a></li>
              <li><a href="#">Vgetables</a></li>
              <li><a href="#">Dry Foods</a></li>
              <li><a href="#">Spices</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

<强> CSS 

*{
    Margin:0; 
    background-color: aliceblue;
    padding:0
}

.container{
    width: 900px;
    margin:auto;
    height:900px;

}

 h1{
    padding:20px 0px 10px 0px;
    background-color:bisque;
    text-align: center;
    font-family: 'Verdana',sans-serif;
    font-weight: 700;
    font-size:50px;
    letter-spacing: 2px;
    color:coral;
    text-shadow: 2px 2px brown;
    Width: 100%;
    background-color:bisque;

}

a{
    text-decoration: none;
    text-align: center;
    font-family: 'verdana', sans-serif;
    width:33%;
    text-align: center;
    list-style: none;
    padding: 5px 0px 5px 0px;
    background-color: coral;
    color: bisque;
    box-shadow: 2px 2px 2px rgb(40,0,0);
}

ul {
  display: inline-block;
}

ul li a{
  width: 100%;
}

a:hover{
    font-family: 'verdana', sans-serif;
    background-color: bisque;
    color: coral;
}

.menunav a{
    display:inline-block;
    margin-top:5px
}

.productsnav{
    width:33%;
    margin-bottom:3px;
    display: none;
}

.productsnav a{
    width:100%;
    margin-top: 5px;
}

.products:hover .productsnav{
    display:block;
    position: absolute;
}

请将其更改为所需的样式。

答案 1 :(得分：0)

是的，谢谢，我已经做到了，现在看起来好多了。我现在的问题是当子菜单弹出时，下一个主菜单项被推到子菜单的底部。当我尝试将鼠标悬停在子菜单上时，只要我的鼠标从主导航项目中移除，它就会立即消失。 

<!DOCTYPE html>

<html>
  <head>

      <title>Food Supply Company</title>

      <link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css"> 

      <link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">  

  </head>

  <body>

      <div class="container">

          <div class="title">
            <h1>Food Supply Company</h1>
          </div>

            <ul class="menunav">
              <ul class="Products">
                <li><a href="#" >Products</a>
                  <ul class="productsnav">
                    <li><a href="#">Fruits</a></li>
                    <li><a href="#">Vegetables</a></li>
                    <li><a href="#">Dry Foods</a></li>
                    <li><a href="#">Spices</a></li>
                    </ul></li></ul>
               <ul class="AboutUs">
                <li><a href="#" >About Us</a>
                  <ul class="aboutusnav">
                    <li><a href="#">History</a></li>
                    <li><a href="#">Mission</a></li>
                    <li><a href="#">Personel</a></li>
                    </ul></li></ul>
               <ul class="Contact">
                <li><a href="#" >Contact</a>
                  </li></ul>
                </ul>





      </div>

</body>

</html>

CSS 

*{
    Margin:0;
    background-color: aliceblue;
    padding:0
}

.container{
    width: 900px;
    margin:auto;
    height:900px;

}

 h1{
    padding:20px 0px 10px 0px;
    background-color:bisque;
    text-align: center;
    font-family: 'Verdana',sans-serif;
    font-weight: 700;
    font-size:50px;
    letter-spacing: 2px;
    color:coral;
    text-shadow: 2px 2px brown;
    Width: 100%;
    background-color:bisque;

}

a{
    text-decoration: none;
    text-align: center;
    font-family: 'verdana', sans-serif;
    width:33%;
    text-align: center;
    list-style: none;
    padding: 5px 0px 5px 0px;
    background-color: coral;
    color: bisque;
    box-shadow: 2px 2px 2px rgb(40,0,0);
}

a:hover{
    font-family: 'verdana', sans-serif;
    background-color: bisque;
    color: coral;
}

li{
    list-style-type:none;
}

.menunav{
    margin-bottom:3px;
}

.menunav a{
    float:left;
    margin-top:5px;
    margin-right:3px;
}

.productsnav, .aboutusnav{
    width:33%;
    margin-bottom:3px;
}

.productsnav a, .aboutusnav a{
    width:100%;
    display: none;
    margin-top: 5px;
  }

.Products:hover .productsnav a{
    display:block;
}

.aboutusnav{
    margin-left:33.3%;
 }

.AboutUs:hover .aboutusnav a{
    display:block;
}

答案 2 :(得分：0)

如果要在下拉菜单中使用CSS悬停样式，则它必须是悬停元素的子项。 否则，您可以在此下拉菜单中使用jQuery / javascript。 我有另一个想法来解决这个问题。请检查此链接：

＆＃13;
＆＃13; 
      *{
    Margin:0; 
    background-color: aliceblue;
    padding:0
}

.container{
    width: 900px;
    margin:auto;
    height:900px;

}

 h1{
    padding:20px 0px 10px 0px;
    background-color:bisque;
    text-align: center;
    font-family: 'Verdana',sans-serif;
    font-weight: 700;
    font-size:50px;
    letter-spacing: 2px;
    color:coral;
    text-shadow: 2px 2px brown;
    Width: 100%;
    background-color:bisque;

}

a{
    text-decoration: none;
    text-align: center;
    font-family: 'verdana', sans-serif;
    width:33%;
    text-align: center;
    list-style: none;
    padding: 5px 0px 5px 0px;
    background-color: coral;
    color: bisque;
    box-shadow: 2px 2px 2px rgb(40,0,0);
}

a:hover{
    font-family: 'verdana', sans-serif;
    background-color: bisque;
    color: coral;
}

.menunav a{
    display:inline-block;
    margin-top:5px
}

.productsnav{
    width:100%;
    margin-bottom:3px;
    display: none;
    position:absolute;
}
.Products{
  display:inline-block;
  width:33%;
  position:relative;
}
.Products a{
  display:block;
  width:100%;
}
.Products:hover .productsnav{
    display:block;
}
＆＃13; 
<html>
  <head>

      <title>Food Supply Company</title>

      <link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">

      <link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">  

  </head>

  <body>

     <div class="container">

      <div class="title">
        <h1>Food Supply Company</h1>
      </div>

        <div class="menunav">
            <div class="Products">
              <a href="#">Products</a>
              <div class="productsnav">
                  <a href="#">Fruits</a>
                  <a href="#">Vegetables</a>
                  <a href="#">Dry Foods</a>
                  <a href="#">Spices</a>
              </div>
            </div>
            <a href="#">About Us</a>
            <a href="#">Contacts</a>
        </div>

  </div>

</body>
＆＃13;
＆＃13;
＆＃13;

http://codepen.io/shiplo_R/pen/VPyMzp

此外，您可以添加一些动画，以便顺利显示您的下拉菜单＆＃34; display：none＆＃34;。

答案 3 :(得分：0)

您可以尝试

https://jsfiddle.net/uhg84d8d/

HTML： 

    <html>
  <head>
      <title>Food Supply Company</title>
      <link href="style.css" rel="stylesheet" text="text/css"> 
      <link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">  
  </head>

  <body>
     <div class="container">
      <div class="title">
        <h1>Food Supply Company</h1>
      </div>
      <div class="menunav">
        <ul>
          <li class="products">
            <a href="#">Products</a>
            <ul class="productsnav">
              <li><a href="#">Fruits</a></li>
              <li><a href="#">Vgetables</a></li>
              <li><a href="#">Dry Foods</a></li>
              <li><a href="#">Spices</a></li>
            </ul>
          </li>
            <li>
                <a href="#">About Us</a>
            </li>
            <li>
            <a href="#">Contacts</a>
            </li>
        </ul>
      </div>
    </div>
  </body>
</html>

CSS 

*{
    Margin:0; 
    background-color: aliceblue;
    padding:0
}

.container{
    width: 900px;
    margin:auto;
    height:900px;

}

 h1{
    padding:20px 0px 10px 0px;
    background-color:bisque;
    text-align: center;
    font-family: 'Verdana',sans-serif;
    font-weight: 700;
    font-size:50px;
    letter-spacing: 2px;
    color:coral;
    text-shadow: 2px 2px brown;
    Width: 100%;
    background-color:bisque;

}

a{
    text-decoration: none;
    text-align: center;
    font-family: 'verdana', sans-serif;
    width:33%;
    text-align: center;
    list-style: none;
    padding: 5px 0px 5px 0px;
    background-color: coral;
    color: bisque;
    box-shadow: 2px 2px 2px rgb(40,0,0);
}
    .menunav {
        width: 100%;
        float: left;
    }
.menunav ul {
  width:100%;
    float: left;
    margin: 0px;
}
.menunav ul li{
  list-style: none;
    float:left;
    width: 33.3%;
}
.menunav ul li a{
  width: 100%;
}

.menunav ul li a:hover{
    font-family: 'verdana', sans-serif;
    background-color: bisque;
    color: coral;
}

.menunav ul li a{
    display:inline-block;
    margin-top:5px
}

.menunav ul li .productsnav{
    width:33%;
    margin-bottom:3px;
    display: none;
}

.menunav ul li .productsnav li{
    width:100%;
    margin-top: 5px;
    float: left;
}
    .menunav ul li .productsnav li a{
    width:100%;
    margin-top: 5px;
    float: left;
}

.menunav ul li.products:hover .productsnav{
    display:block;
    position: absolute;
    width: 300px;
}

然后它会起作用...... :)

相关问题
最新问题