html导航栏下拉菜单top,HTML+CSS简单实现导航栏二级下拉菜单

.clearfix::after{content:"";display:block;clear:both;

}.header{display:block;color:white;width:100%;height:60px;line-height:60px;background:darkseagreen;margin-top:-16px;

}.container{width:1500px;

}.header .topnav>li{float:left;margin:0 20px;font-size:18px;width:150px;list-style-type:none;text-align:center;box-sizing:border-box;position:relative;

}.header .topnav>li a{text-decoration:none;color:#F4F4F4;

}.header .topnav>li a:hover{color:#3C3C3C;

}.header .topnav>li:hover{background:lightsteelblue;border:2px solid lightsteelblue;border-bottom:none;line-height:56px;

}.header .topnav>li .homework{text-align:left;line-height:1.5;width:300px;display:none;border:2px solid lightsteelblue;box-sizing:border-box;position:absolute;right:-2px;background:lightsteelblue;

}.header .topnav>li:hover .homework{display:block;

}.header .topnav>li:hover::after{content:"";position:absolute;width:100%;height:8px;bottom:-2px;left:0;background:lightsteelblue;

}.homework li{list-style-type:none;margin-left:-40px;

}.homework ul li:hover{background:darkseagreen;color:black;

}.homework ul li a:hover{color:black;

}

• 首页
• 个人主页

• 我的作业

  • 楚乔传
  • 四大名著
  • 百度效果
  • 小说排行榜
  • 注册页面
  • 更多...

• 原创文章

• 我的博客