欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 一文概述ES7~12的語法及其相關(guān)使用規(guī)則

    一文概述ES7~12的語法及其相關(guān)使用規(guī)則

    隨著JavaScript這門語言越來越流行，使得JavaScript這門語言越來越完善，這篇文章主要介紹了一文概述ES7~12的語法及其相關(guān)使用規(guī)則，需要的朋友可以參考下
    2023-01-01
  • JS前端攻堅淺析instanceof實現(xiàn)原理

    JS前端攻堅淺析instanceof實現(xiàn)原理

    這篇文章主要為大家介紹了JS前端攻堅淺析instanceof實現(xiàn)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-12-12
  • JavaScript精煉之構(gòu)造函數(shù) Constructor及Constructor屬性詳解

    JavaScript精煉之構(gòu)造函數(shù) Constructor及Constructor屬性詳解

    對象的constructor屬性用于返回創(chuàng)建該對象的函數(shù)，也就是我們常說的構(gòu)造函數(shù)，除了創(chuàng)建對象，構(gòu)造函數(shù)(constructor) 還做了另一件有用的事情—自動為創(chuàng)建的新對象設(shè)置了原型對象(prototype object)
    2015-11-11
  • JS如何輸出26個英文字符

    JS如何輸出26個英文字符

    這篇文章主要介紹了JS如何輸出26個英文字符問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 跟我學習javascript的prototype,getPrototypeOf和__proto__

    跟我學習javascript的prototype,getPrototypeOf和__proto__

    跟我學習javascript的prototype,getPrototypeOf和__proto__，深入學習了三個用來訪問prototype的方法，感興趣的小伙伴們可以參考一下
    2015-11-11
  • 詳解JavaScript對象的深淺復(fù)制

    詳解JavaScript對象的深淺復(fù)制

    從層次上來看，對象的復(fù)制可以簡單地分為淺復(fù)制和深復(fù)制，顧名思義，淺復(fù)制是指只復(fù)制一層對象的屬性，不會復(fù)制對象中的對象的屬性，對象的深復(fù)制會復(fù)制對象中層層嵌套的對象的屬性。本文是我在復(fù)制對象方面的一些心得總結(jié)，由淺復(fù)制到深復(fù)制，感興趣的朋友一起學習吧
    2017-03-03
  • js遍歷詳解(forEach, map, for, for...in, for...of)

    js遍歷詳解(forEach, map, for, for...in, for...of)

    在本篇文章里小編給大家整理的是關(guān)于js中的各種遍歷(forEach, map, for, for...in, for...of)相關(guān)知識點用法總結(jié)，需要的朋友們參考下。
    2019-08-08
  • JavaScript對象和字串之間的轉(zhuǎn)換實例探討

    JavaScript對象和字串之間的轉(zhuǎn)換實例探討

    從對象的格式可以看出，如果字串的格式定義成 json 格式的， 就可以直接轉(zhuǎn)換為obj了，感興趣的朋友可以參考下哈
    2013-04-04
  • 《JavaScript函數(shù)式編程》讀后感

    《JavaScript函數(shù)式編程》讀后感

    這里給大家分享的是個人在最近看《JavaScript函數(shù)式編程》一書的第一章之后的一些感觸和理解，這里記錄下來，有需要的小伙伴可以參考下
    2015-08-08
  • javascript一個無懈可擊的實例化XMLHttpRequest的方法

    javascript一個無懈可擊的實例化XMLHttpRequest的方法

    由于IE新舊版本以及與其他瀏覽器在ajax技術(shù)上的不同，往往需要對不同的瀏覽器做不同的處理，除了笨拙的瀏覽器嗅探技術(shù)，大約也就是對象檢測技術(shù)可用了。
    2010-10-10

最新評論