简单菜单样式实现

2015-12-14 0 550
简单菜单样式实现
<!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="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><span>我的通知</span></a></li>
            <li class="lili tz"><a style="padding-left: 20px;" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><span>未读通知</span></a></li>
            <li class="lili tz"><a style="padding-left: 20px;" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><span>发布通知</span></a></li>
            <li class="lili tz"><a style="padding-left: 20px;" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><span>已发通知</span></a></li>
            <li class="lititle ggtitle"><a>公告</a></li>
            <li class="lili gg"><a style="padding-left: 20px;" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><span>我的公告</span></a></li>
            <li class="lili gg"><a style="padding-left: 20px;" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><span>未读公告</span></a></li>
            <li class="lili gg"><a style="padding-left: 20px;" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><span>发布公告</span></a></li>
            <li class="lili gg"><a style="padding-left: 20px;" href="" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><span>已发公告</span></a></li>
        </ul>
    </div>
</body>
</html>

遇见资源网 css 简单菜单样式实现 http://www.ox520.com/14562.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务