1. 首页
  2. 问答
  3. 下拉菜单（悬停）

下拉菜单（悬停）

2017-01-30 181 views
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> 

     <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代码以几种不同的方式显示子菜单，但我无法弄清楚。

感谢

来源

2017-01-30 shea

+0

为什么你不使用'ul'或'ol'。 –

回答

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; 
}

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

来源

2017-01-30 13:09:27 FioleNana

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; 
}

来源

2017-01-30 13:49:37 shea

0

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

 *{ 
 
    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; 
 
}
<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>

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

此外，您还可以添加一些动画显示的下拉菜单中的顺利瞬间“显示：无”。

来源

2017-01-30 13:50:19

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; 
}

然后它会工作... :)

来源

2017-01-30 13:59:28

相关问题

 相关问题