css创建水平菜单 |ie9对css3的支持

CSS创建水平菜单是网页设计中常用到的技巧之一。水平菜单可以帮助用户更方便地浏览网站内容，增加用户体验。在这篇文章中，大家将介绍如何使用CSS创建一个简单的水平菜单。首先，创建一个基本的HTML结构如下所示：

<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于大家</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">联系大家</a></li>
</ul>
</nav>

可以看到，大家的导航菜单是通过HTML的<ul>和<li>元素创建的。其中，每个

元素包含一个链接元素，指向网站的不同页面。接下来，大家需要使用CSS对导航菜单进行样式设计。大家可以使用以下代码来实现：

nav {
background-color: #333;
height: 40px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
float: left;
position: relative;
}
nav a {
display: block;
color: #fff;
font-size: 16px;
line-height: 40px;
padding: 0 20px;
text-decoration: none;
}
nav li:hover {
background-color: #555;
}
nav li:hover >ul {
display: block;
}
nav ul ul {
position: absolute;
top: 40px;
left: 0;
display: none;
background-color: #555;
}
nav ul ul li {
float: none;
width: 200px;
}
nav ul ul a {
line-height: 30px;
padding: 0 20px;
}
nav ul ul ul {
top: 0;
left: 200px;
}

大家可以看到，大家使用CSS对导航菜单的样式进行了设置，其中使用了属性如background-color、height、margin、padding、list-style-type、float、display等。同时，大家还添加了:hover伪类来实现当鼠标滑过导航菜单时变化的效果。此外，大家还实现了下拉菜单的效果。当鼠标滑过含有下拉菜单的导航菜单时，下拉菜单将显示出来。这是通过设置子元素的display属性为block实现的。通过以上设置，大家成功地创建了一个简单的水平导航菜单。大家可以通过修改CSS的样式来实现更多样式的导航菜单。