Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

CSS下拉菜单

CSS下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

<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>

实例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>


Weiter lernen
||
<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>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492962 spielt ab