html+css水平导航菜单

最新推荐文章于 2024-05-19 09:58:49 发布

mstangyuq

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量2.4k

点赞数

分类专栏：前端设计

本文链接：https://blog.csdn.net/hanszang/article/details/40906455

版权

前端设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Horizontal Navigation Menu</title>
<style>
body
{
font-size:18px;
}
nav ul
{
margin: 0px auto;
text-align:center;
}
nav ul ul
{
margin-left:-15px;
display: none;
}
nav ul li:hover>ul
{
display:block;
}
nav ul li
{
float:left;
display:block;
border-left: 1px solid #778;
border-bottom: 1px solid #778;
background:#333;
padding:10px 15px;
}
nav ul li:hover
{
background:#005387;
}
nav ul {
background: #333;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul li a {
display: block; padding: 0px 20px;
color: #fff; text-decoration: none;
}
nav ul li:hover > a
{
color: orange;
}
nav ul ul {
padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
margin-left:0px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Webdesigning</a></li>
<li><a href="#">Microcontroller</a></li>
<li><a href="#">Programming</a>
<ul>
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Article</a>
<ul>
<li><a href="#">User Experience</a></li>
<li><a href="#">Expert</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</body>
</html>