html - 下拉菜单不适用于 anchor 标记

Question

我是 css 和 html 的新手。

我开发了一个菜单，并尝试在将光标保持在菜单项上后进行下拉菜单。

但我提到了一个网站。 http://cssdeck.com/labs/another-simple-css3-dropdown-menu但仍然是同样的问题。

HTML

 <div class="main-content">
         <div class="bar">
            <header>
                <!--<h1 class="header"><a href="#">Dead Stocker</a>
                </h1>-->
                <nav>
                    <ul>            
                        <li><a href="#">HOME</a></li> 
                        <li>
                         <a href="#">Membership</a>
                            <ul>
                               <li>Web Design</li>
                               <li>Web Development</li>
                               <li>Illustrations</li>
                            </ul>
                        </li> 

                        <li><a href="#">Facilities</a></li> 
                        <li><a href="#">Events</a></li> 
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Notice Board</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>   
                </nav>
                <a href="http://www.facebook.com/codepal"><img src="images/fb.png"/></a>
                <a href="http://twitter.com/sumeetchawla/"><img src="images/twitter.png"/></a>
                <a href="http://feeds.feedburner.com/code-pal/"><img src="images/rss.png"/></a>
                <p>SUBSCRIBE</p>
            </header>
        </div>  

CSS

 ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
   box-shadow: none;
   display:none;
   opacity: 0;
   visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
   -ms-transition: opacity 0.2s;
   -o-transition: opacity 0.2s;
   -transition: opacity 0.2s;
  }
   ul li ul li { 
     background: #555; 
     display: block; 
     color: #fff;
     text-shadow: 0 -1px 0 #000;
    }
   ul li a :hover ul{
    display: block;
    opacity: 1;
    visibility: visible;
  }

谁能帮我解决这个问题？

Answer 1

只是你需要在css中改变一点

旧的 CSS

ul li ul {
 padding: 0;
 position: absolute;
 top: 48px;
 left: 0;
 width: 150px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 display:none;
 opacity: 0;
 visibility: hidden;
 -webkit-transiton: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -transition: opacity 0.2s;
}

ul li a :hover ul{
 display: block;
 opacity: 1;
 visibility: visible;
}

换成这个

ul li ul {
 padding: 0;
 position: absolute;
 top: 48px;
 left: 0;
 width: 150px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 opacity: 0;
 visibility: hidden;
 -webkit-transiton: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -transition: opacity 0.2s;
}

ul li a :hover ul{
 opacity: 1;
 visibility: visible;
}

希望这对你有用。