导航栏是位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，起着链接站点或者软件内的各个页面的作用。
关于位于页面顶部的导航栏究竟是如何实现的，希望下面的代码可以对朋友们有帮助。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>书香之家</title><style type="text/css">* {margin: 0;padding: 0;}#menu {position: relative;background-color:#dcc9c1;width: 100%;height: 60px;}.logo {color: #0c0c01;display: inline-block;line-height: 58px;position: absolute;padding: 20 40px;font-family:"仿宋";font-weight: bold;}ul {list-style: none;display: inline-block;padding-left: 140px;}ul li {line-height: 60px;text-align: center;position: relative;float: left;}a {text-decoration: none;color: rgb(13, 6, 6);display: block;padding: 0 20px;white-space: nowrap;font-family:"仿宋";font-weight: bold;}a:hover {color: #FFF;background-color: #ccc;}ul li ul li {float: none;margin-top: 2px;background-color: #dcc9c1;}ul li ul li a:hover {color: #FFF;background-color: #ccc;}ul li ul {position: absolute;left: 0;top: 60px;display: none;padding-left: 0;}ul li:hover ul {display: block;}</style></head><body><div id="menu"><div class="logo"><p style="font-size: 20px;">📕 书香之家</p></div><ul ><li><a href="#">首页</a></li><li><a href="#">门店服务</a><ul><li><a href="#">服务流程</a></li><li><a href="#">开店时间</a></li></ul></li><li><a href="#">预约中心</a><ul><li><a href="#">新华路店</a></li><li><a href="#">正义路店</a></li><li><a href="#">平安路店</a></li></ul></li><li><a href="#">馆内指南</a><ul><li><a href="#">新华路店</a></li><li><a href="#">正义路店</a></li><li><a href="#">平安路店</a></li></ul></li><li><a href="#">好书推荐</a><ul><li><a href="#">科普类</a></li><li><a href="#">情感类</a></li><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><li><a href="#">书店简介</a></li><li><a href="#">店内详情</a></li><li><a href="#">联系我们</a></li></ul></li></ul></div></body></html>
效果展示
如果觉得《HTML＋CSS导航栏及下拉菜单的实现》对你有帮助，请点赞、收藏，并留下你的观点哦！
