CSS-下拉导航条

最新推荐文章于 2022-12-17 10:22:47 发布

?Briella

最新推荐文章于 2022-12-17 10:22:47 发布

阅读量107

点赞数

文章标签： javascript ViewUI

本文介绍了一种使用纯CSS实现的下拉导航菜单方法。通过简单的HTML结构与CSS定位技巧，实现了鼠标悬停时二级菜单的展开效果。适用于前端开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Web网站中很多时候都会出现下拉导航条，有的是通过CSS实现，有的通过JavaScript插件实现，其实CSS实现起来比较简单,先来看一个简版的下拉菜单:

Html代码通过ul列表实现:

 <ul class="nav">
        <li>首页</li>
        <li>产品</li>
        <li>服务
            <ul>
                <li>设计</li>
                <li>研发</li>
                <li>交付</li>
            </ul>
        </li>
        <li>关于我们
            <ul>
                <li>博客园</li>
                <li>FlyElephant</li>
                <li>keso</li>
            </ul>
        </li>
    </ul>

CSS代码如下:

    .nav {
        margin-left: 200px;
        margin-top:200px;
    }
    
    .nav li {
        float: left;
        width: 150px;
        background-color: #00C5CD;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        border-right: 1px solid #fff;
    }
    
    .nav li:last-child {
        border-right: none;
    }
    
    .nav li ul {
        width: 150px;
        position: absolute;
        margin-top: 10px;
        left: 9999px;
    }
    
    .nav li ul li {
        background-color: #00EE00;
        border-bottom: 1px solid #fff;
    }
    
    .nav li:hover ul {
        left: auto;
    }

　里面很重要的一点就是在正常状态下将需要展示的ul位置只放在屏幕之外，left:9999px,鼠标滑动上的时候将left设置为auto~