CSS下拉菜单是指当鼠标悬浮在菜单上时,出现子菜单的效果。这一效果在网页设计中非常常见,而CSS使得制作下拉菜单变得十分简单。/*下拉菜单的CSS样式*/ ul{ list-style: none;
CSS下拉菜单是指当鼠标悬浮在菜单上时,出现子菜单的效果。这一效果在网页设计中非常常见,而CSS使得制作下拉菜单变得十分简单。
/*下拉菜单的CSS样式*/ ul{ list-style: none; margin: 0; padding: 0; } li{ float: left; position: relative; } li a{ display: block; padding: 8px; color: #fff; background-color: #333; text-decoration: none; } li ul{ position: absolute; left: 0; top: 100%; display: none; } li:hover ul{ display: block; } li ul li{ float: none; position: relative; } li ul li a{ padding: 5px 15px; background-color: #8b8b8b; color: #fff; } li ul li a:hover{ background-color: #333; }
以上CSS代码描述了一个基本的下拉菜单效果。其中ul表示无序列表,li表示列表项,a表示菜单项。当li被悬浮时,它下面的ul会显示出来,并且li ul li会被置为相对定位,而li ul li a则会被加上背景颜色和鼠标悬浮样式。
下面是一个简单的HTML代码,实现了一个下拉菜单效果。
<ul> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子菜单3</a></li> </ul> </li> <li><a href="#">菜单3</a></li> </ul>
以上代码中,ul表示整个菜单,而每个li表示一个菜单项。如果该菜单项有子菜单,就在该li下面再加入一个ul,里面放置子菜单项。
使用CSS制作下拉菜单十分方便,而且代码简洁,效果漂亮。如果您需要制作下拉菜单,可以参考以上示例代码,进行修改和定制,制作出适合您网站的下拉菜单效果。
粉丝
0
关注
0
收藏
0