HTML / CSS下拉菜单显示将不起作用

时间:2014-08-03 20:16:46

标签: html css drop-down-menu hover hide

我的下拉菜单有困难。我无法隐藏链接,有一次我做了,我无法盘旋它们,我的课程太多了。请帮忙。我认为我的代码是正确的,但我没有看到问题。 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;

}

注意:如果您感到困惑,此样式表将用于我的所有网页。

0 个答案:

没有答案