CSS Note 2.5 下拉菜单

最新推荐文章于 2023-08-10 17:21:12 发布

LetsStudy

最新推荐文章于 2023-08-10 17:21:12 发布

阅读量108

点赞数

分类专栏： CSS Note 文章标签：下拉菜单

本文链接：https://blog.csdn.net/LetsStudy/article/details/84326626

版权

CSS Note 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、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>

三、效果展示

LetsStudy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Note 2.5 下拉菜单

一、CSS@charset "UTF-8";*{ padding: 0px; margin: 0px;}.ul1{ margin: 40px;}ul{ list-style: none;}a{ text-decoration: none;}.ul1&gt;li{ width: 160px; height: 40px;...
复制链接

扫一扫

专栏目录