亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Menu lungsur turun CSS

Gunakan CSS untuk mencipta kesan yang memaparkan menu lungsur apabila tetikus dialihkan ke atas.

Contoh menu lungsur turun:

Apabila tetikus bergerak ke atas elemen yang ditentukan, menu lungsur turun akan muncul. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
  <title>php.cn</title>
   <style type="text/css">
     ul,ol,li
     {list-style:none;padding:0px;margin:0px;}
     #menu *
     {line-height:30px;z-index:10;}
     #menu a
     {
      text-decoration:none;
      display:block;
     }
     #menu ul
     {
     text-align:left;
     background:#333;
     }
      #menu .arrow  /* 菜單項(xiàng)的右側(cè)小箭頭  */
     {
     float:right;
     padding-right:5px;
     }
     #menu li:hover>ul
     {display:block;}
     #menu>ul{height:30px;} /* 即使沒有菜單項(xiàng)也能保持頂級菜單欄的高度。 */
     /* 一級菜單 */
     #menu>ul>li
    {
     text-align:center;
     display:inline-block;
     width:80px;
     }
     #menu>ul>li>a
    {color:#fff;}
     #menu>ul>li:hover
    {background:#666;}
     /* 下拉的菜單欄 */
     #menu>ul>li ul
     {
     display:none;
     width:150px;
     position:absolute;
     background:#c1cd94;
     box-shadow:2px 2px 2px #000;
     -webkit-box-shadow:2px 2px 2px #000;
     -moz-box-shadow:2px 2px 2px #123;
     }
     /* 下拉菜單的菜單項(xiàng) */
     #menu>ul>li>ul li
    {padding-left:5px; position:relative;}
    #menu>ul>li>ul li>a
    {color:#000;}
    #menu>ul>li>ul li:hover
    {background:#d3dbb3;}
   </style>
<body>
  <div id="menu">
<ul>
  <li><a href="">菜單一</a>
<ul>
 <li><a href="">子菜單1</a></li>
 <li><a href="">子菜單2</a>
<ul><li><a href="">子菜單7</a></li></ul>
 </li>
 <li><a href="">子菜單3</a></li>
    </ul>
  </li>
  <li><a href="">菜單二</a>
  <ul>
<li><a href="">子菜單4</a></li>
<li><a href="">子菜單5</a></li>
<li><a href="">子菜單6</a></li>
  </ul>
  </li>
</ul>
  </div>
</body>
</html>

Buat menu lungsur dan benarkan pengguna memilih item dalam senarai: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title>
<style type="text/css">
     /* 下拉按鈕樣式 */
.dropbtn {
    background-color: black;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
/* 容器 <div> - 需要定位下拉內(nèi)容 */
.dropdown {
    position: relative;
    display: inline-block;
}
/* 下拉內(nèi)容 (默認(rèn)隱藏) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 下拉菜單的鏈接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
/* 鼠標(biāo)移上去后修改下拉菜單鏈接顏色 */
.dropdown-content a:hover {background-color: yellow;}
/* 在鼠標(biāo)移上去后顯示下拉菜單 */
.dropdown:hover .dropdown-content {
    display: block;
}
/* 當(dāng)下拉內(nèi)容顯示后修改下拉按鈕的背景顏色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
<body>
 <div class="dropdown">
  <button class="dropbtn">下拉菜單</button>
  <div class="dropdown-content">
    <a href="#">菜單欄 1</a>
    <a href="#">菜單欄 2</a>
    <a href="#">菜單欄 3</a>
  </div>
</div>
</body>
</html>

Nota:

Bahagian HTML:

Kita boleh menggunakan mana-mana HTM, elemen untuk membuka menu lungsur , seperti: <span>, atau elemen <butang>

Gunakan elemen bekas (seperti <div>) untuk mencipta kandungan menu lungsur turun dan letakkannya di mana-mana yang anda mahu.

Gunakan elemen <div> untuk membalut elemen ini dan gunakan CSS untuk menggayakan kandungan lungsur turun.

Bahagian CSS: Kelas lungsur turun

menggunakan position:relative, yang akan menetapkan kandungan menu lungsur untuk diletakkan di sudut kanan bawah butang lungsur ( menggunakan kedudukan:mutlak). Kelas

.dropdown-content ialah menu lungsur turun sebenar. Ia disembunyikan secara lalai dan akan dipaparkan selepas tetikus bergerak ke elemen yang ditentukan. Ambil perhatian bahawa nilai lebar min ditetapkan kepada 160px. Anda boleh mengubah suainya mengikut kehendak anda. Nota: Jika anda ingin menetapkan kandungan lungsur turun supaya konsisten dengan lebar butang lungsur, anda boleh menetapkan lebar kepada 100% (tetapan limpahan:auto boleh tatal pada saiz skrin kecil).

Kami menggunakan atribut box-shadow untuk menjadikan menu lungsur turun kelihatan seperti "kad".



Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style type="text/css"> *{ margin:0px; padding:0px;} #nav{ width:600px; height:40px; margin:0 auto;} #nav ul{ list-style:none;} #nav ul li{ float:left; line-height:40px; text-align:center; position:relative;} #nav ul li a{ text-decoration:none; color:#000; display:block;padding:0px 10px;} #nav ul li a:hover{ color:#FFF; background:#333} #nav ul li ul{ position:absolute; display:none;} #nav ul li ul li{ float:none; line-height:30px; text-align:left;} #nav ul li ul li a{ width:100%;} #nav ul li ul li a:hover{ background-color:#06f;} #nav ul li:hover ul{ display:block} </style> </head> <div id="nav"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">學(xué)習(xí)中心</a> <ul> <li><a href="#">java</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> </ul> </li> <li><a href="#">個(gè)人中心</a></li> <li><a href="#">關(guān)于我們</a></li> </ul> </div> <body> </body> </html>