请教：鼠标停留在栏目显示下拉各子栏目？

当我们访问网站时候，把鼠标停放在导航条的一个栏目名字时，就显示出该栏目下拉多个子栏目，是如何实现的啊？请指点一下，谢谢了，我只有这么点分给你了

解决方案 »

  1.   

    是用CSS实现的. 
    给你个代码的例子:
    <style>
    .menu {font-family:Verdana;font-size:12px;font-weight:600;  width:106px; height:150px;
    position:absolute; top:70px; left:600px;margin:50px 0;}
    .menu ul li a, .menu ul li a:visited {display:block;
    text-decoration:none; color:#000;width:200px; height:20px;
    text-align:center; color:#fff; border:1px solid #aaa;
    background:#AB2023; line-height:20px; font-size:11px; overflow:hidden;
    padding:5px 0px 5px 0px;}
    .menu ul {padding:0; margin:0;list-style-type: none; }
    .menu ul li {float:left; margin-right:1px; position:relative;}
    .menu ul li ul {display: none;}
    /* specific to non IE browsers */
    .menu ul li:hover a {color:#fff; background:#E58203;}
    .menu ul li:hover ul {display:block; position:absolute; top:0;
    left:-201px; width:201px;}
    .menu ul li:hover ul li a.hide {background:#AB2023; color:#fff;}
    .menu ul li:hover ul li:hover a.hide {background:#E58203; color:#000;}
    .menu ul li:hover ul li ul {display: none;}
    .menu ul li:hover ul li a {display:block; background:#E58203; color:#000;}
    .menu ul li:hover ul li a:hover {background:#E58203; color:#000;}
    .menu ul li:hover ul li:hover ul {display:block; position:absolute;left:-201px; top:0;}
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    .menu ul li a:visited.hide {display:none;}
    .menu ul li a.hide {display:none;}
    .menu ul li a:hover {color:#fff; background:#E58203;}
    .menu ul li a:hover ul {display:block; position:absolute; top:0; left:-201px; width:201px;}
    .menu ul li a:hover ul li a.hide{display:none;}
    .menu ul li a:hover ul li a.sub {background:#AB2023; color:#fff;}
    .menu ul li a:hover ul li a {display:block; background:#E58203; color:#000;}
    .menu ul li a:hover ul li a ul {visibility:hidden;}
    .menu ul li a:hover ul li a:hover {background:#E58203; color:#000;}
    .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:-201px; top:0; color:#000;}
    </style>
    <![endif]--><body>
     <ul> 
     
            <li><a class="hide" href="index.html">HOME</a> 
              <!--[if lte IE 6]>
     <a href="index.html">HOME
     <table><tr><td> 
     <![endif]-->
              <!--[if lte IE 6]>
     </td></tr></table> </a> 
     <![endif]-->
            </li>  
            <li><a class="hide" href="index.html">ABOUT US</a> 
              <!--[if lte IE 6]>
     <a href="index.html">ABOUT US
     <table><tr><td>
     <![endif]-->
              <ul>
                <li><a href="whoweare.html" title="Who We Are">Who We Are</a></li>
                <li><a href="whomweserve.html" title="Whom We Serve">Whom We Serve</a></li>
              </ul>
              <!--[if lte IE 6]>
     </td></tr></table>
     </a>
     <![endif]-->
            </li>
     </ul></body>