我的下拉菜单有困难。我无法隐藏链接,有一次我做了,我无法盘旋它们,我的课程太多了。请帮忙。我认为我的代码是正确的,但我没有看到问题。 HTML:
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<title>Aquariust Blog</title>
</head>
<body>
<div class="container"></div>
<ul class="nav">
<li><a href="home.html">Home</a></li>
<li class="gallery"><a href="gallery.html">Gallery</a></li>
<ul>
<li><a href="goldphotos.html">Goldfish</a></li>
<li><a href="freshphotos.html">Freshwater</a></li>
<li><a href="saltphotos.html">Saltwater</a></li>
<li><a href="videos.html">Videos</a></li>
</ul>
<li><a href="blog.html">Blog</a></li>
<li><a href="forum.html">Forum</a><li>
<li><a href="login.html">Login</a></li>
</ul>
</body>
</html>
CSS:
.nav{
text-align:center;
list-style:none;
background-color: #000000;
opacity:0.6;
height: 100px;
}
.gallery ul li{
display:none;
}
.nav li:hover .gallery ul{
display:block
}
body{
margin:0;
padding:0;
}
.container{
background:url("pics/tropicalfishtank.jpg");
position:absolute;
width:100%;
height:700px;
background-repeat: no-repeat;
overflow:auto;
}
.nav li{
display:inline;
margin: 2em;
}
.nav a{
display:inline-block;
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
text-decoration: none;
color: #ffffff;
font-size: 3em;
margin-top:25px;
}
.nav a:hover{
color:blue;
}
div.twitterwidget
{
position:absolute;
right:100px;
top:700px;
}
p.blogposts
{
position:absolute;
left:100px;
top:120px;
width:40%;
margin:0 auto;
font-size:26px;
font-family:"Courier New",Georgia,Serif;
}
form.login{
position:absolute;
top:200px;
left:100px;
}
注意:如果您感到困惑,此样式表将用于我的所有网页。