CSS Note 2.5 下拉菜单

最新推荐文章于 2025-07-11 16:00:00 发布

原创最新推荐文章于 2025-07-11 16:00:00 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#下拉菜单

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了使用CSS和HTML创建响应式下拉菜单的过程。通过精心设计的代码示例，展示了如何利用CSS选择器和伪类实现菜单项的悬停效果，以及如何使用HTML结构来组织菜单项和子菜单。

一、CSS

@charset "UTF-8";
*{
    padding: 0px;
    margin: 0px;
}
.ul1{
    margin: 40px;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
.ul1>li{
    width: 160px;
    height: 40px;
    background: rgba(30,80,200,0.6);
    font-size: 20px  ;
    border-radius: 0.5em 0.5em 0 0;
    text-align: center;
    line-height: 2em;
    margin-left: 1px;
    float: left;
}
.ul1>li:hover ul{
    display: block;
}
.ul2{
    background: rgba(80,80,160,0.3);
    display: none;
    border-radius:0 0  0.5em 0.5em ;
}
.ul2>li>a:hover{
    background: rgba(40,180,40,0.8);
    width: 80%;
    height: 1.5em;
    line-height:1.5em ;
    display: inline-block;
    border-radius: 0.5em;
    padding: 3px 3px;
    font-weight: bold;
}

二、HTML

<body>
    <ul class="ul1">
        <li><a href="">首页</a>
        <ul class="ul2">
            <li><a href="">新闻</a></li>
            <li><a href="">论坛</a></li>
            <li><a href="">图片</a></li>
            <li><a href="">影视</a></li>
        </ul></li>
        <li><a href="">国际</a>
            <ul class="ul2">
                <li><a href="">军事</a></li>
                <li><a href="">政治</a></li>
                <li><a href="">游戏</a></li>
                <li><a href="">汽车</a></li>
            </ul></li>
    </ul>
</body>

三、效果展示