下拉菜单html样式,纯CSS实现下拉菜单的示例代码

本篇文章主要介绍了纯CSS实现下拉菜单的示例代码，分享给大家，具体如下：

将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。

设置下拉菜单的高度添加过渡效果，高度为auto时过渡效果失效。

ul{

list-style: none;

margin: 0;

padding: 0;

}

ul li a{

display: block;

text-decoration: none;

width: 100px;

height: 50px;

text-align: center;

line-height: 50px;

color: white;

background-color: #2f3e45;

}

.drop-down{

width: 100px;

height: 50px;

}

.drop-down-content{

opacity: 0;

height: 0;

overflow: hidden;

transition: all 1s ease;

}

p{

font-size: 20px;

margin: 0;

}

.drop-down-content li:hover a{

background-color: red;

}

.nav .drop-down:hover .drop-down-content{

opacity: 1;

height: 150px;

}

• 下拉菜单

  • 菜单1
  • 菜单2
  • 菜单3

内容

效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。