医疗机构网站,长沙岳麓区,国家高新区网站建设,建设通下载原文网址#xff1a;CSS之布局系列--顶部导航栏二级菜单居中展示_IT利刃出鞘的博客-CSDN博客
简介
本文介绍CSS将顶部导航栏居中展示并支持二级菜单下拉展示的方法。
代码
!DOCTYPE html
html langen
headmeta charsetUTF-…原文网址CSS之布局系列--顶部导航栏二级菜单居中展示_IT利刃出鞘的博客-CSDN博客
简介
本文介绍CSS将顶部导航栏居中展示并支持二级菜单下拉展示的方法。
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title知识星球/titlestyle* {margin: 0;padding: 0;}.top-container {background-color: #406ff9;height: 60px;}.menu-container {text-align: center;}.logo-container {position: absolute;color: white;line-height: 58px;font-weight: bold;margin-left: 10px;}.logo {font-size: 20px;margin-left: 10px;}.first-menu-container {display: inline-block;list-style: none;}.first-menu {line-height: 60px;text-align: center;float: left;}.second-menu {float: none;background-color: #406ff9;}.second-menu a:hover {color: white;background-color: #0033fc;}.second-menu-container {position: absolute;list-style: none;display: none;}.first-menu:hover ul {display: block;}a {text-decoration: none;color: white;display: block;padding: 0 15px;white-space: nowrap;font-weight: bold;}a:hover {background-color: #0033fc;}/style
/head
body
div classtop-containerspan classlogo-containerspan classlogoIT天空/span/spandiv classmenu-containerul classfirst-menu-containerli classfirst-menua href#首页/a/lili classfirst-menua href#后端/aul classsecond-menu-containerli classsecond-menua href#Java基础/a/lili classsecond-menua href#多线程/a/lili classsecond-menua href#Spring/a/li/ul/lili classfirst-menua href#前端/aul classsecond-menu-containerli classsecond-menua href#HTML/a/lili classsecond-menua href#CSS/a/lili classsecond-menua href#JavaScript/a/li/ul/lili classfirst-menua href#运维/aul classsecond-menu-containerli classsecond-menua href#Linux/a/lili classsecond-menua href#Docker/a/li/ul/lili classfirst-menua href#关于本站/aul classsecond-menu-containerli classsecond-menua href#作者介绍/a/lili classsecond-menua href#github/a/li/ul/li/ul/div/div
/body
/html
测试
