純css下拉菜單無需js

更新時間：2016年08月15日 09:19:41 投稿：lijiao

這篇文章主要為大家詳細介紹了純css下拉菜單代碼，無需js，具有一定的參考價值，感興趣的小伙伴們可以參考一下

再來個今天某人說過的例子：純css下拉菜單：
效果圖

這個的實現(xiàn)很簡單，主要是: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是個伸縮對象，所以要讓它脫離文檔流，不是在實用時會影響到布局，給它一個絕對定位即可。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

TypeScript中interface和type的區(qū)別詳解
本文主要介紹了TypeScript中interface和type的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
Javascript加載速度慢的解決方案
在網(wǎng)站里面會加載一些js代碼,統(tǒng)計啊,百度廣告等等，結(jié)果弄得頁面加載速度很慢，下面有個不錯的解決方法，大家可以參考下
2014-03-03
js獲取html頁面節(jié)點方法(遞歸方式)
這篇文章主要介紹了js使用遞歸方式獲取html頁面節(jié)點的方法，大家可以參考使用吧
2013-12-12
javascript 星級評分效果(手寫)
今天上午抽空隨手寫了個星級評分的效果，給大家分享下。由于水平有限，如有問題請指出;首先要準備一張星星的圖片，灰色是默認狀態(tài)，黃色是選擇狀態(tài)，需要的朋友可以參考下
2012-12-12
ES6中Proxy與Reflect實現(xiàn)重載(overload)的方法
這篇文章主要介紹了ES6中Proxy與Reflect實現(xiàn)重載(overload)的方法,分析了重載的原理及使用Proxy和Reflect來實現(xiàn)重載的操作步驟與相關(guān)技巧,需要的朋友可以參考下
2017-03-03
JS 數(shù)組移除實現(xiàn)代碼
可以移除數(shù)組中的值函數(shù) ，用來取出數(shù)組中的一些值，間接的修改了數(shù)組值。
2009-07-07
js實現(xiàn)點擊煙花特效
這篇文章主要介紹了js實現(xiàn)點擊煙花特效，幫助大家更好的利用js美化網(wǎng)頁，感興趣的朋友可以了解下
2020-10-10
一分鐘理解js閉包
一分鐘理解js閉包，關(guān)于js閉包的內(nèi)容介紹了很多，本文帶著大家快速理解什么是js閉包，感興趣的小伙伴們可以參考一下
2016-05-05
JS三目運算(三元運算)方法詳解
下面小編就為大家?guī)硪黄狫S三目運算(三元運算)方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
JavaScript操作選擇對象的簡單實例
下面小編就為大家?guī)硪黄狫avaScript操作選擇對象的簡單實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧
2016-05-05