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

希望这对你有用。

下拉菜单不适用于锚标记

1 个答案: