css实现下拉菜单

最新推荐文章于 2023-09-25 11:10:58 发布

woyuanliulian

最新推荐文章于 2023-09-25 11:10:58 发布

阅读量173

点赞数

分类专栏： Web前端文章标签： web

本文链接：https://blog.csdn.net/woyuanliulian/article/details/81038187

版权

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!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>