HTML CSS实现简单下拉菜单,纯html,css实现hover某项展示下拉菜单

Document

#nav,

#nav ul {

padding: 0;

margin: 0;

list-style: none;

}

#nav li {

float: left;

position: relative;

width: 10em;

border: 1px solid #B0C4DE;

background-color: #E7EDF5;

color: #2D486C;

font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;

margin-right: 1em;

}

#nav a:link,

#nav a:visited {

display: block;

text-decoration: none;

padding-left: 1em;

color: #2D486C;

}

#nav ul {

display: none;

position: absolute;

padding-top: 0.5em;

}

#nav ul li {

float: none;

border: 0 none transparent;

border-bottom: 1px solid #E7EDF5;

background-color: #F1F5F9;

font-size: 100%;

margin: 0;

margin-bottom: 0.5em;

padding: 0;

}

/*使用该样式过程种注意html的层级关系*/

#nav li:hover ul {

display: block;

}

• Starters
  • Fish
  • Fruit
  • Soups
• Main courses
  • Meat
  • Fish
  • Vegetarian
• Desserts
  • Fruit
  • Puddings
  • Ice Creams