下拉边框的制作

最新推荐文章于 2022-10-19 20:26:58 发布

weixin_30823227

最新推荐文章于 2022-10-19 20:26:58 发布

阅读量83

点赞数

原文链接：http://www.cnblogs.com/douchenchen/p/6631449.html

版权

<style>
*{margin:0px;
  padding:0px;
  list-style:none}
.top-container{width:100%;
    height:50px;
    background-color:red}
.top-nav{width:1000px;    
            height:50px;
            background-color:#C60;
            margin:0px auto}
.top-nav-lv1{width:250px;
            /* 要设置最大的高度*/
             max-height:50px;
            background-color:#C3C;
            float:left;
            font-family:微软雅黑;
            text-align:center;
            line-height:50px;
            overflow:hidden}
.top-nav-lv1:hover{max-height:500px;
                 /*  要设置最大的高度，这样可以自动调节下拉框的高度，即随着内容的多少来调节*/
                    transition:1s;
                    cursor:pointer}
.top-nav-lv1 li:hover{background-color:#FF3}
</style>
</head>
<body>
<div class="top-container">
    <div class="top-nav">
        <div class="top-nav-lv1">导航A
            <ul>
                <li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
                <li>导航4</li>
                <li>导航5</li>
            </ul>
        </div>
        <div class="top-nav-lv1">导航B
            <ul>
                <li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
                <li>导航4</li>
            </ul>
        </div>
        <div class="top-nav-lv1">导航C
            <ul>
                <li>导航1</li>
                <li>导航2</li>
                <li>导航3</li>
            </ul>
        </div>
        <div class="top-nav-lv1">导航D
            <ul>
                <li>导航1</li>
                <li>导航2</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>