在网页制作中,下拉菜单是一个常用的元素,最常见的方式就是使用CSS实现下拉菜单。下面我们来看一下如何用CSS实现一个简单的下拉菜单:/*CSS样式*/ ul { margin: 0; padding:
在网页制作中,下拉菜单是一个常用的元素,最常见的方式就是使用CSS实现下拉菜单。下面我们来看一下如何用CSS实现一个简单的下拉菜单:
/*CSS样式*/ ul { margin: 0; padding: 0; list-style: none; } ul li { float: left; width: 100px; position: relative; /*使下拉菜单显示*/ } li ul { display: none; position: absolute; /*将下拉菜单置于li下面*/ top: 20px; left: 0; } li:hover ul { display: block; /*鼠标悬浮在li上时,显示下拉菜单*/ } /*为下拉菜单中的选项添加样式*/ li ul li { clear: both; width: 100%; }
上面的代码中使用了伪类:hover来控制鼠标悬浮时下拉菜单的显示,在li:hover ul的样式中,将下拉菜单的display属性设置为block,这样点击菜单时就会显示下拉菜单。
下面是HTML代码:
<ul> <li><a href="#">菜单1</a> <ul> <li><a href="#">子菜单1-1</a></li> <li><a href="#">子菜单1-2</a></li> <li><a href="#">子菜单1-3</a></li> </ul> </li> <li><a href="#">菜单2</a></li> <li><a href="#">菜单3</a></li> </ul>
在ul中包含了多个li,每个li中又有一个a标签和一个ul标签,ul标签中包含了菜单的下拉选项。通过添加更多的li和ul标签,我们可以轻松地扩展这个下拉菜单的选项。
粉丝
0
关注
0
收藏
0