形形色色的菜单二

接上一篇文章

该处使用的为padding改变高度 原理相同

注意

1.visibility: hidden; 

这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。

2.cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。

3.overflow: hidden; 该处使用的意义是 ：清除浮动 不是在该元素上清除浮动 而是清除自己 就是使用了overflow的元素会扩张到需要的大小 以包裹其中浮动的子元素

<style type="text/css">
        a
        {
            color: #FFFF99;
            text-decoration: none;
        }
        a:hover
        {
            color: #FFFFFF;
            text-decoration: underline;
        }
        .top-nav
        {
            padding: 10px 10px 0;
            font-size: 12px;
            font-weight: bold;
            margin: 1em 0 0;
            list-style: none;
            border-bottom: 8px solid #DC4E1B;
            overflow: hidden;
        }
        .top-nav li
        {
            float: left;
            margin-right: 1px;
        }
        .top-nav li a
        {
            position: relative;
            z-index: 0;
        }
        .top-nav li a span
        {
            position: absolute;
            left: -999em;
            visibility: hidden;
        }

        .top-nav li a, .top-nav li a:hover span
        {
            line-height: 20px;
            text-decoration: none;
            background: #DDDDDD;
            color: #666666;
            display: block;
            width: 80px;
            text-align: center;
        }

        .top-nav li a:hover span
        {
            padding-top: 2px;
            visibility: visible;
            top: 0;
            left: 0;
            cursor: pointer;
        }

        .top-nav li a:hover, .top-nav li a:hover span
        {
            color: #FFFFFF;
            background: #DC4E1B;
        }


    </style>

JQuery实现动画菜单

布局

 <div id="menu">
        <ul id="nav">
            <li class="mainlevel"><span class="note">慕课网</span></li>
            <li class="mainlevel" id="mainlevel_01"><a href="#">课程大厅</a>
                <ul class="sub_nav_01">
                    <span class="Triangle_con"></span>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">JQuery</a></li>
                    <li><a href="#">HTML</a></li>
                </ul>
            </li>
            <li class="mainlevel" id="mainlevel_02"><a href="#">学习中心</a>
                <ul class="sub_nav_01">
                    <span class="Triangle_con"></span>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">JQuery</a></li>
                    <li><a href="#">HTML</a></li>
                </ul>
            </li>
            <li class="mainlevel"><a href="#">个人中心</a></li>
            <li class="mainlevel"><a href="#">关于我们</a></li>
             
        </ul>
    </div>

<pre class="javascript" name="code"> <script language="javascript" type="text/javascript" src="../Scripts/jquery.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            $('li.mainlevel').mousemove(function () {
                $(this).find('ul').slideDown("1000"); //you can give it a speed
            });
            $('li.mainlevel').mouseleave(function () {
                $(this).find('ul').slideUp("fast");
            });

        });
    </script>