简单菜单样式实现

2015/12/14 41246
<!DOCTYPE />
<html>
<head>
    <style type="text/css">
        ul
        {
            margin: 0;
            padding: 0;
            width: 150px;
            list-style: none;
            background-color: Orange;
            border: 1px solid red;
        }
        .lili:hover
        {
            padding: 5px;
            background-color: #FC756F;
            border-left-color: #51A9F3;
            border-right-color: #51A9F3;
            border-left-width: medium;
            border-right-width: medium;
            font-weight: bolder;
            color: White;
        }
        .lili
        {
            padding-top: 5px;
            height: 25px;
            border-top: solid 2px Orange;
            border-bottom: solid 2px Orange;
            color: black;
            background-color: White;
        }
        span
        {
            font-weight: bolder;
            color: black;
        }
        span:hover
        {
            color: White;
            font-size: large;
        }
        .lititle a
        {
            font-size: larger;
            font-weight: 900;
            color: White;
        }
        a
        {
            text-decoration: none;
        }
        .lititle:hover
        {
            cursor: pointer;
        }
        .ggtitle
        {
            border-top: 1px solid red;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".tztitle").click(function () {
                $(".tz").fadeToggle(1000);
            });

            $(".ggtitle").click(function () {
                $(".gg").fadeToggle(1000);
            });
        });
    
    </script>
</head>
<body>
    <div>
        <ul class="ulul">
            <li class="lititle tztitle"><a id="aaa">通知</a></li>
            <li class="lili tz"><a style="padding-left: 20px;" href=""><span>我的通知</span></a></li>
            <li class="lili tz"><a style="padding-left: 20px;" href=""><span>未读通知</span></a></li>
            <li class="lili tz"><a style="padding-left: 20px;" href=""><span>发布通知</span></a></li>
            <li class="lili tz"><a style="padding-left: 20px;" href=""><span>已发通知</span></a></li>
            <li class="lititle ggtitle"><a>公告</a></li>
            <li class="lili gg"><a style="padding-left: 20px;" href=""><span>我的公告</span></a></li>
            <li class="lili gg"><a style="padding-left: 20px;" href=""><span>未读公告</span></a></li>
            <li class="lili gg"><a style="padding-left: 20px;" href=""><span>发布公告</span></a></li>
            <li class="lili gg"><a style="padding-left: 20px;" href=""><span>已发公告</span></a></li>
        </ul>
    </div>
</body>
</html>
代码片段
