CSS基础-3.14定位练习-二级菜单

最新推荐文章于 2022-05-30 07:58:04 发布

夏赞恩

最新推荐文章于 2022-05-30 07:58:04 发布

阅读量325

点赞数 1

分类专栏：前端学习文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_44714543/article/details/122324427

版权

前端学习专栏收录该内容

49 篇文章 1 订阅

订阅专栏

文章目录

二级菜单效果图
HTML代码
CSS代码

二级菜单效果图

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/二级菜单.css">
</head>
<body>
    <header class="header">
     <ul class='topnav clearfix' >
         <li>
             <a href="">岁岁年年</a>
            <div class='submenu'>
                2018 2019 2020 2021 2022
            </div>
        </li>
        
         <li>
            <a href="">碎碎念念</a>
            <div class="submenu">
               争吵 冷战 哈哈哈 阴阳怪气 。。。
            </div>
        </li>

         <li><a href="">此情有憾</a></li>
         <li> <a href="">但无对错</a></li>
            
         <li>
             <a href="">再见不如再也不见！</a>
            <div class="submenu">
                冬天能解决的事儿，就不要留到春天了。
                我们终究还是散场了。。。
            </div>
        </li>
     </ul>
    </header>
</body>
</html>

CSS代码

/* 只要有浮动，立马要写clearfix,内容，显示，清除 */
.clearfix::after{
    content:'';
    display:block;
    clear: both;
}
/* 整个页面的头部 */
.header{
    background-color: lightblue;
    color: #999;
    height:40px;
    line-height: 40px;
}
/* 顶部导航栏中的所有li元素 */
.header .topnav>li{
    float:left;
    margin:0 100px;
    width:170px;
    text-align: center;
    height: 40px;
    box-sizing: border-box; /* 可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。 */
    position: relative;    /* 因为二级菜单中需要用到绝对定位，而绝对定位的需要有一个是定位的祖先元素作为定位标准，因而在此设置一个相对定位 */
}

/* 设置鼠标所悬停在某一项的样式 */
.header .topnav>li:hover{
    background-color:#fff;
    border:2px solid #ccc;
    border-bottom: none;
    line-height: 35px;
}

.header .topnav>li .submenu{
    text-align: left;
    width:250px;
    line-height: 25px;
    display: none;    /* 不生成盒子 */
    border:2px solid #ccc;
}
/* 调整二级菜单的位置，使其与一级菜单右对齐 */
.header .topnav>li:hover .submenu{
    display: block;
    position: absolute;
    right: -2px;
}

/* 为了使一级菜单与二级菜单重合的边框消失，未消除前的样式见下图 */
/* ::after 伪元素可用于在元素内容之后插入一些内容。 */
.header .topnav>li:hover::after{
    /* 将一个空元素绝对定位到重叠部分，盖住重叠的边框线条 */
    content: ''; 
    position: absolute;
    width: 100%;
    height: 3px;
    background-color:white;
    bottom: 0px;
    left: 0px;
}

在这里插入图片描述

夏赞恩

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS基础-3.14定位练习-二级菜单

文章目录二级菜单效果图HTML代码CSS代码二级菜单效果图HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
复制链接

扫一扫

专栏目录