简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Menu lungsur turun CSS

Menu Turun CSS

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

<html>
<meta charset="utf-8">
<head>
<style>
nav {
margin: 100px auto; 
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;  
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none; 
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
</style>
</head>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</html>

Contoh 2: 

<html>
<head>
<meta charset="utf-8">
<style>
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  /* 菜单项的右侧小箭头  */
{
     float:right;
     padding-right:5px;
 }
 #menu li:hover>ul
 {display:block;}
 #menu>ul{height:30px;} /* 即使没有菜单项也能保持顶级菜单栏的高度。 */
 /* 一级菜单 */
 #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;
 }
 /* 下拉菜单的菜单项 */
#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;}
 /* 三级及以下的菜单项的定位 */
 #menu>ul>li>ul>li ul
 {left:150px; top:0px;}
</style>
</head>
<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>


Meneruskan pembelajaran
||
<html> <meta charset="utf-8"> <head> <style> nav { margin: 100px auto; text-align: center; } nav ul ul { display: none; } nav ul li:hover > ul { display: block; } nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } nav ul li:hover a { color: #fff; } nav ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; } nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; color: #fff; } nav ul ul li a:hover { background: #4b545f; } nav ul ul ul { position: absolute; left: 100%; top:0; } </style> </head> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul> </nav> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492161 permainan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！