用html+Css实现二级菜单

 

简单示例如下:

css样式 代码如下

<style type="text/css">
.menu
        {
            font-family: arial, sans-serif;
            width: 750px;
            margin: 0;
            margin: 50px 0;
        }

        .menu ul
         {
            padding: 0;
            margin: 0;
           list-style-type: none;
        }

       .menu ul li
       {
            float: left;
            position: relative;
       }

       .menu ul li a, .menu ul li a:visited
       {
           display: block;
           text-align: center;
           text-decoration: none;
           width: 104px;
           height: 30px;
           color: #000;
           border: 1px solid #fff;
           border-width: 1px 1px 0 0;
           background: #c9c9a7;
           line-height: 30px;
           font-size: 11px;
       }

       .menu ul li ul
       {
           display: none;
        }

       .menu ul li:hover a
       {
           color: #fff;
           background: #b3ab79;
        }

        .menu ul li:hover ul
        {
           display: block;
           position: absolute;
           top: 31px;
           left: 0;
           width: 105px;
          }

          .menu ul li:hover ul li a
            {
              display: block;
             background: #faeec7;
              color: #000;
          }

          .menu ul li:hover ul li a:hover
           {
               background: #dfc184;
               color: #000;
            }

</style>

html 代码:

 

<div class="menu">
        <ul>
            <li><a class="hide" href="../menu/index.html">Demo</a>

                <ul>
                    <li><a href="../menu/zero_dollars.html" title="">demo1</a></li>
                    <li><a href="../menu/embed.html" title="">demo2</a></li>
                    <li><a href="../menu/form.html" title="">demo3</a></li>

                </ul>

            </li>
            <li><a class="hide" href="index.html">Menus</a>

                <ul>
                    <li><a href="spies.html" title="a coded list of spies">menu1</a></li>
                    <li><a href="vertical.html" title="a horizontal vertical menu">menu2</a></li>

                </ul>

            </li>
        </ul>

        <div class="clear"></div>
    </div>