纯css下拉菜单无需js

2019-11-20 09:14:48

字体：大中小

来源：转载

供稿：网友

再来个今天某人说过的例子：纯css下拉菜单：
效果图

这个的实现很简单，主要是:hover和过渡属性transition的使用。

代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css</title> <style> *{  margin: 0;  padding:0;  font-size: 16px;  font-family: "微软雅黑"; } #container{  width: 100px;  margin: 0 auto;  text-align: center;  position: relative; } #container ul{  list-style: none; } #container span{  display: inline-block;  width: 100px;  height: 30px;  line-height: 30px;  cursor: pointer; } #container ul{  height: 0;  width: 100px;  overflow: hidden;  transition: all 1s;  position: absolute;  top: 30px;  left: 0px; } #container:hover ul{  height: 330px; }  #container ul li{  background: #eee;  margin-top: 3px;  cursor: pointer;  height: 30px;  line-height: 30px; } </style></head><body> <div id="container"> <span>移动</span> <ul>  <li>这里有1</li>  <li>这里有2</li>  <li>这里有3</li>  <li>这里有4</li>  <li>这里有5</li>  <li>这里有6</li>  <li>这里有7</li>  <li>这里有8</li>  <li>这里有9</li>  <li>这里有10</li> </ul> </div></body></html>

因为ul是个伸缩对象，所以要让它脱离文档流，不是在实用时会影响到布局，给它一个绝对定位即可。

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

上一篇：jQuery学习笔记之回调函数

下一篇：浅谈JavaScript 中有关时间对象的方法