css实现下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0 ;
            padding: 0;
        }
        #nav {
            width: 100%;
            height: 30px;
            padding: 0 4px;
            margin: 0 auto;
        }
        #nav ul{
            margin: 0px;
            padding: 0px;
        }
        #nav li a {
            text-decoration: none;
            }
        #nav li {
            list-style: none;
            text-align: center;

            font-weight: bold;

            float: left;
        }

        #nav .list{
            line-height: 20px;
            text-align: left;
            padding: 2px;
            font-weight: normal;

        }
        #nav .list a {
            width: 118px;

            color: #999999;
            text-decoration: none;
            float: left;
        }

        #nav .list a:hover{
            color: #999999;
            padding: 3px 3px 0px 0px;
            width: 115px;
            background-color: black;
        }

        #nav .menu1{
            width: 120px;
            height: auto;
            margin: 6px 4px 0px 0px;
            background-color: #f5f5f5;
            color: #ff3ac1;
            padding-bottom: 5px;
            cursor: hand;
            overflow-y:hidden;
            filter: alpha(opacity = 70);
            -moz-opacity: 0.7;
            border-radius: 5px;
            box-shadow: 1px 1px #999999;

        }

        #nav .menu2{
            width: 120px;
            height: 18px;
            margin: 6px 4px 0px 0px;
            background-color: #f5f5f5;
            color: #999999;
            overflow-y: hidden;
            padding-bottom: 5px;
            cursor: hand;
            border-radius: 5px;
            box-shadow: 1px 1px #999999;

        }


    </style>
</head>
<body>

<ul id="nav">

    <li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className = 'menu2'"><a href="#">查看样式表</a>
    <ul class="list">
        <li><a href="#">子菜单</a></li>
        <li><a href="#">子菜单</a></li>
        <li><a href="#">子菜单</a></li>


    </ul>
    </li>
    <li  class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className = 'menu2'"><a href="#">css参考资料</a>

        <ul class="list">
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>

        </ul>
    </li>
    <li  class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className = 'menu2'"><a href="#">常见问题</a>
        <ul class="list">
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>

        </ul>
    </li>



</ul>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值