导航栏是位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,起着链接站点或者软件内的各个页面的作用。
关于位于页面顶部的导航栏究竟是如何实现的,希望下面的代码可以对朋友们有帮助。
<!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>
效果展示
文章来源:https://www.toymoban.com/news/detail-515019.html
文章来源地址https://www.toymoban.com/news/detail-515019.html
到了这里,关于HTML+CSS导航栏及下拉菜单的实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!