jquery学习笔记（三）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container
        {
            width: 950px;
            margin: 10px auto;
            font: 14px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
            border: 1px solid #333;

        }
        p{
            margin: 10px;
        }
        ul#navigation{
            list-style-type: none;
            background: #CE0100;
            height: 63px;
            font-size: 24px;
        }
        ul#navigation li{
            float: left;
            width: 175px;
            text-align: center;
            position: relative;
            height: 63px;
            padding: 20px 5px 10px 5px;

        }
        ul#navigation li a{
            color: #fff;
            text-decoration: none;
            display: block;
        }
        ul#navigation li a.active{
            border: 1px solid blue;

        }
        ul#navigation li ul.subnav{
            background: #E7F1D2;
            width: 175px;
            clear: both;
            display: none;
            position: absolute;
            top: 63px;
            -moz-border-radius-bottomleft: 8px;
            -moz-border-radius-bottomright: 8px;
            -webkit-border-bottom-left-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
            border-radius: 8px;
            border-left: 2px solid #998;
            border-right: 2px solid #998;
            border-bottom: 2px solid #998;
        }
        ul#navigation li ul.subnav li{
            clear: both;
            height: 40px;
            padding:0;
            text-align: center;
            margin: 0px;
        }
        ul#navigation li ul.subnav li a{
            background: none;
            font-size: 18px;
            color: #333;
            text-decoration: none;
            padding: 10px 0;
            border: none;
        }
        ul#navigation li ul.subnav li a:hover
        {
            background: #DBF1AD;
            font-size: 18px;
            color: #333;
            border: none;
        }

    </style>

    <script src="js/jquery.min.js"></script>
    <script language="JavaScript" type="text/javascript">
         $(document).ready(function () {
            $('.ul#navigation li').hover(function () {
               $(this).find('.subnav').animate({opacity:1.0,height:'toggle'},500);
                $(this).closest('a').addClass('active');
            }, function () {
                 $(this).find('.subnav').animate({opacity:0,height:'toggle'},500);
                $(this).find('a').removeClass('active');
            }

            );

         });

    </script>
</head>
<body>
<div id="header">
     <ul id="navigation">
         <li>
             <a href="#">Home</a>
         </li>
         <li>
             <a href="#">Our Work</a>
            <ul class="subnav">
                <li><a href="#">Example 1</a></li>
                <li><a href="#">Example 2</a></li>
                <li><a href="#">Example 3</a></li>
            </ul>
         </li>
         <li>
             <a href="#">Services</a>
             <ul class="subnav">
                 <li><a href="#">Service 1</a></li>
                 <li><a href="#">Service 2</a></li>
                 <li><a href="#">Service 3</a></li>
             </ul>
         </li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Contact</a></li>
     </ul>


</div>


</body>
</html>
jquery学习笔记（三）

猜你喜欢
