HTML中如何制作下拉导航栏,如何制作纯css的下拉菜单？

看到这是纯粹的CSS基础下拉菜单： -

HTML

• Home
• About Us
  • The Team
  • History
  • Vision
• Products
  • Cozy Couch
  • Great Table
  • Small Chair
  • Shiny Shelf
  • Invisible Nothing
• Contact
  • Online
  • Right Here
  • Somewhere Else

CSSul{

font-family: Arial, Verdana;

font-size: 14px;

margin: 0;

padding: 0;

list-style: none;}ul li{

display: block;

position: relative;

float: left;}li ul{

display: none;}ul li a

{

display: block;

text-decoration: none;

color: #ffffff;

border-top: 1px solid #ffffff;

padding: 5px 15px 5px 15px;

background: #2C5463;

margin-left: 1px;

white-space: nowrap;}ul li a:hover

{

background: #617F8A;}li:hover ul

{

display: block;

position: absolute;}li:hover li{

float: none;

font-size: 11px;}li:hover a

{

background: #617F8A;}li:hover li a:hover

{

background: #95A9B1;}