【HTML】- HTML和CSS实现下拉菜单

最新推荐文章于 2023-08-07 17:42:42 发布

android_zier

最新推荐文章于 2023-08-07 17:42:42 发布

阅读量1k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/baidu_35701759/article/details/73839879

版权

html 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

1.效果

2.代码实现

2.1 html结构

<body>
    <div>
        <div class="menu">
            <ul>
                <li>
                    <a href="#">JavaScript</a>
                    <ul>
                        <li><a href="http://www.runoob.com/js/js-tutorial.html" target="_blank">JavaScript</a></li>
                        <li><a href="http://www.runoob.com/vue2/vue-tutorial.html">Vue.js</a></li>
                        <li><a href="http://www.runoob.com/react/react-tutorial.html">React</a></li>
                        <li><a href="http://www.runoob.com/nodejs/nodejs-tutorial.html">node.js</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">服务端</a>
                    <ul>
                        <li><a href="http://www.runoob.com/php/php-tutorial.html">PHP</a></li>
                        <li><a href="http://www.runoob.com/python/python-tutorial.html">Python </a></li>
                        <li><a href="http://www.runoob.com/java/java-tutorial.html">Java</a></li>
                        <li><a href="http://www.runoob.com/cprogramming/c-tutorial.html">C</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">移动端</a>
                    <ul>
                        <li><a href="http://www.runoob.com/w3cnote/android-tutorial-intro.html">Android</a></li>
                        <li><a href="http://www.runoob.com/swift/swift-tutorial.html">Swift </a></li>
                        <li><a href="http://www.runoob.com/kotlin/kotlin-tutorial.html">Kotlin</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">数据库</a>
                    <ul>
                        <li><a href="http://www.runoob.com/sql/sql-tutorial.html">SQL </a></li>
                        <li><a href="http://www.runoob.com/mysql/mysql-tutorial.html">MySQL </a></li>
                        <li><a href="http://www.runoob.com/sqlite/sqlite-tutorial.html">SQLite </a></li>
                        <li><a href="http://www.runoob.com/mongodb/mongodb-tutorial.html">MongoDB </a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">HTML/CSS</a>
                    <ul>
                        <li><a href="http://www.runoob.com/xml/xml-tutorial.html">XML </a></li>
                        <li><a href="http://www.runoob.com/dtd/dtd-tutorial.html">DTD </a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>

2.2 CSS样式

<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        font-family: Verdana, Arial, Helvetica,sans-serif;
        font-size: 12px;
        color: #222222;
    }
    .menu{
        width: 800px;
        margin: 20px auto;
    }
    .menu ul{
        width: 800px;
        margin: 0 auto;
        list-style: none;
        padding: 0px;
    }
    .menu ul:after{
        content: "";
        height: 0;
        visibility: hidden;
        clear: both;
        display:block ;
    }
    .menu ul li{
        width: 120px;
        text-align: center;
        float: left;
        margin-right: 20px;
        border: 1px solid #eeeeee;
        background-color: #eeeeee;
        height: 30px;
       line-height: 30px;
    }
    .menu ul li a{
        display: block;
        text-decoration: none;
        color: #222222;
        height: 30px;
        border-bottom: 1px solid #FF8C00;
    }
    .menu ul li a:hover{
        background-color: #ff6666;
        color: #000;
    }
    .menu ul li ul li{
        float: none;
        width: 119px;
        margin: 0px;
        border-bottom: 1px solid #FF8C00;
    }
    .menu ul li ul li a{
        text-decoration: none;
        display: block;
        background-color: #eeeeee;
    }
    .menu ul li ul li a:hover{
        background-color: #ff6666;
    }
    .menu ul li:hover ul{
        display: block;
    }
    .menu ul li ul{
        display: none;
    }

</style>

3.代码说明

.menu ul:after{
        content: "";
        height: 0;
        visibility: hidden;
        clear: both;
        display:block ;
    }

作用是清除浮动，因为li标签设置了左浮动，元素设置浮动后，会影响紧邻其后的元素效果，导致紧邻其后的元素也会出现左浮动。

 .menu ul li ul li{
        float: none;
        width: 119px;
        margin: 0px;
        border-bottom: 1px solid #FF8C00;
    }

float:none;新增的li会继承原本的浮动float:left,出现左浮动效果，所以需要设置没有浮动效果。

android_zier

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【HTML】- HTML和CSS实现下拉菜单

HTML和CSS实现下拉菜单
复制链接

扫一扫

专栏目录