一、HTML和css怎样制作横排导航条,菜单
很多小伙伴学习了一段时间的HTML和css，就想自己动手试试制作导航条菜单，不过却没有思路，今天小编我就来分享一下HTML和css制作导航条的实例，大家可以参考参考。
如图，制作导航条菜单一般是用一个div嵌套ul和li标签，然后li里面有a标签。
布局做好之后，开始写导航条的样式，如图，先清除导航条的margin和padding。
然后定位导航条的div，这里我就用绝对定位来居中，如果你有其他导航条居中方法可以忽略这一条。
然后设置导航条的li左浮动，并且去掉li前面的圆点，让导航条更好看。
然后设置导航条的a标签转块级，以及导航条菜单的宽高，文字颜色，水平垂直居中和背景色以及去掉a标签的下划线。
接着设置鼠标经过导航条菜单变色即可。
最后，一个完美的导航条菜单就完成了，简直是太简单了。
二、我的HTML+CSS怎么不能实现二级导航菜单
<!DOCTYPEhtml
PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<styletype="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style:none;
display:flex;
}
/*横向菜单导航*/
.nav{
width:980px;
/*宽度980px*/
margin:20px;
/*使div左右auto居中*/
}
.navulli{
position:relative;
/*设置元素相对定位（关键）*/
float:left;
/*设置左浮动对齐*/
Width:150px;
/*宽度150px*/
Height:50px;
/*高度50px*/
flex:1;
}
.navulli>a{
display:block;
/*使元素变成块元素*/
width:100%;
/*宽度与父元素宽度一致*/
background:#000;
/*背景颜色为白色*/
color:#fff;
/*字体颜色为白色*/
font-size:20px;
/*字体大小为20px*/
line-height:50px;
/*字体行高为50px*/
text-align:center;
/*文字居中*/
}
.navulli:hover>a{
background:#f00;
/*鼠标经过背景变为红色*/
}
.navdl{
display:none;
/*初始设置不显示*/
position:absolute;
/*相对于li元素进行绝对定位*/
left:0;
/*距离左侧0px*/
top:50px;
/*距离顶部50px*/
width:100%;
/*宽度与父元素宽度一样*/
}
.navdldd{
background:#999;
border-bottom:1pxsolid#ccc;
/*设置底部1px颜色#ccc的边框*/
text-align:center;
}
.navaldda{
display:block;
width:100%;
color:#fff;
font-size:16px;
line-height:50px;
color:#fff;
}
.navulli:hoverdl{
display:block;
/*鼠标经过子菜单显示*/
}
</style>
</head>
<body>
<divclass="nav">
<ul>
<li><ahref="#">顶部导航1</a>
<dl>
<dd><ahref="#">子导航1-1</a></dd>
<dd><ahref="#">子导航1-2</a></dd>
<dd><ahref="#">子导航1-3</a></dd>
</dl>
</li>
<li><ahref="#">顶部导航2</a>
<dl>
<dd><ahref="#">子导航2-1</a></dd>
<dd><ahref="#">子导航2-2</a></dd>
<dd><ahref="#">子导航2-3</a></dd>
</dl>
</li>
<li><ahref="#">顶部导航3</a>
<dl>
<dd><ahref="#">子导航3-1</a></dd>
<dd><ahref="#">子导航3-2</a></dd>
<dd><ahref="#">子导航3-3</a></dd>
</dl>
</li>
<li><ahref="#">顶部导航4</a>
<dl>
<dd><ahref="#">子导航4-1</a></dd>
<dd><ahref="#">子导航4-2</a></dd>
<dd><ahref="#">子导航4-3</a></dd>
</dl>
</li>
</ul>
</div>
</body>
</html>
请采纳
非常感谢您的阅读！我们希望本文对于解决您关于纯HTML CSS带说明的黄色导航菜单的问题提供了一些有价值的信息。如果您还有其他疑问，我们将很乐意为您提供进一步的帮助。
