css怎么做下拉菜单

发布网友发布时间：2022-04-26 07:36

共2个回答

懂视网时间：2022-04-28 18:32

css可以在网页中实现很多的效果，其中CSS下拉菜单是经常需要用到的效果，本篇文章就来给大家具体分享一下CSS下拉菜单的实现方法。

话不多说，下面我们就来看具体的实现代码。

HTML代码：

<ul>
 <a href="#">水果</a>
 <ul>
 <li><a href="#">苹果</a></li>
 <li><a href="#">香蕉</a></li>
 <li><a href="#">草莓</a></li>
 </ul>
</ul>
<ul>
 <a href="#">甜点</a>
 <ul>
 <li><a href="#">蛋糕</a></li>
 <li><a href="#">曲奇</a></li>
 <li><a href="#">面包</a></li>
 </ul>
</ul>
<ul>
 <a href="#">奶茶</a>
 <ul>
 <li><a href="#">红豆奶茶</a></li>
 <li><a href="#">珍珠奶茶</a></li>
 <li><a href="#">全套奶茶</a></li>
 </ul>
</ul>

CSS代码：

 *{
  padding: 0;
  margin: 0;
 }
 ul,a{
  font-size: 20px;
  list-style: none;
  text-decoration: none;
  background-color: #3C3C3C;
  color: #FFFFFF;
  width: 100px;
  text-align: center;
  border: 0px solid black;
  border-radius: 5px;
  margin-top: 1px;
 }
 a{
  display: block;
 }

 .plat{
  display: none;
 }
 .nav{
  float: left;
  margin-left: 1px;
  }
 .nav:hover .plat{
  display: block;
  clear: both;
 }
 .plat li:hover>a{
  background-color: dimgrey;
 }

运行的效果如下：当鼠标放在下拉按钮上就会出现下拉菜单。

微信截图_20190410161830.png

本篇文章到这里就已经全部结束了，更多精彩内容大家可以关注PHP中文网的CSS视频教程栏目！！！

热心网友时间：2022-04-28 15:40

我大概的给你写一下也算是提供个思路吧
html页面中有一个可弹出下拉框的div D1 和下拉框本体div D2
<div class="D1">
鼠标移动到我身上出现下拉框
<div class="D2">
我是下拉框
</div>
<div/>
接下来是CSS
.D1{
width:100px;
height:50px;
background-color:green;
position:relative;
}
.D2{
height:300px;
width:100px;
background-color:aqua;
position:absolute；
top:50px;
left:0px;
display:none;
}
.D1:hover .D2{
display:inline-block;
}
思路其实就是下拉框一开始是隐藏的你可以通过hover也行或者js的事件也行隐藏变成不隐藏透明变成不透明还可以加一些动画翻转效果让下拉框出现的更惊艳。

全部栏目

css怎么做下拉菜单