我不太确定我在这里做错了什么。当有人将鼠标悬停在导航项目上时(在这种情况下为" Products" 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代码,以几种不同的方式显示子菜单,但我无法弄明白。
由于
答案 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。 我有另一个想法来解决这个问题。请检查此链接:
*{
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;
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;
}
然后它会起作用...... :)