CSS3制作下拉菜单

参考：

http://www.red-team-design.com/sexy-css3-menu

http://www.red-team-design.com/css3-dropdown-menu

最终效果是我的食物菜单哈哈： 

-------------------------------------------------------------------------------------------------------

开始啦：

1.先制作一个无下拉的菜单：

HTML部分：

<nav>

<ul>

<li><a href="#"><span>Food</span></a></li>

<li><a href="#"><span>Drink</span></a></li>

<li><a href="#"><span>Game</span></a></li>

<li><a href="#"><span>PhotoWall</span></a></li>

<li><a href="#"><span>Contact</span></a></li>

</ul>

</nav>

 

CSS部分：

nav ul

{

padding: 0;

margin: 0;

list-style: none;

}

 

nav li

{

float: left;

}

 

nav a

{

float: left;

color: #eee;

margin: 0 5px;

padding: 3px;

text-decoration: none;

border: 1px solid #831608;

font: bold 14px Arial, Helvetica;

background-color: #831608;

background-image: -moz-linear-gradient(#bb413b, #831608);

background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));

background-image: -webkit-linear-gradient(#bb413b, #831608);

background-image: -o-linear-gradient(#bb413b, #831608);

background-image: -ms-linear-gradient(#bb413b, #831608);

background-image: linear-gradient(#bb413b, #831608);

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

text-shadow: 0 -1px 0 rgba(0,0,0,.8);

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

}

 

nav a:hover

{

background-color: #bb413b;

background-image: -moz-linear-gradient(#831608, #bb413b);

background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));

background-image: -webkit-linear-gradient(#831608, #bb413b);

background-image: -o-linear-gradient(#831608, #bb413b);

background-image: -ms-linear-gradient(#831608, #bb413b);

background-image: linear-gradient(#831608, #bb413b);

}

 

nav a:active

{

background: #bb413b;

position: relative;

top: 2px;

-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;

-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;

}

 

nav span

{

border: 1px dashed #eba1a3;

display: inline-block;

padding: 4px 15px;

cursor: pointer;

background-color: #bb413b;

background-image: -moz-linear-gradient(#d4463c, #aa2618);

background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));

background-image: -webkit-linear-gradient(#d4463c, #aa2618);

background-image: -o-linear-gradient(#d4463c, #aa2618);

background-image: -ms-linear-gradient(#d4463c, #aa2618);

background-image: linear-gradient(#d4463c, #aa2618);

}

 

nav a:hover span

{

background-color: #bb413b;

background-image: -moz-linear-gradient(#aa2618, #d4463c);

background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));

background-image: -webkit-linear-gradient(#aa2618, #d4463c);

background-image: -o-linear-gradient(#aa2618, #d4463c);

background-image: -ms-linear-gradient(#aa2618, #d4463c);

background-image: linear-gradient(#aa2618, #d4463c);

}

 

效果为：

 

-------------------------------------------------------------------------------------------------------

2.将该菜单改造成为有下拉的菜单：

（1）先将HTML结构改造成为：

 

代码为：

<ul id="menu">

<li>

<a href="#"><span>Food</span></a>

<ul>

<li><a href="#"><span>Dessert</span></a></li>

<li><a href="#"><span>Seafood</span></a></li>

<li><a href="#"><span>Salad</a></span></li>

<li><a href="#"><span>Hamburg</span></a></li>

</ul>

</li>

<li>

<a href="#"><span>Drink</span></a>

<ul>

<li><a href="#"><span>Cola</span></a></li>

<li><a href="#"><span>Coffee</span></a></li>

<li><a href="#"><span>Wine</span></a></li>

<li><a href="#"><span>Water</span></a></li>

</ul>

</li>

<li>

<a href="#"><span>Game</span></a>

<ul>

<li><a href="#"><span>UNO</span></a></li>

<li><a href="#"><span>Killers</span></a></li>

</ul>

</li>

<li><a href="#"><span>PhotoWall</span></a></li>

<li><a href="#"><span>Contact</span></a></li>

</ul>

 

（2）将CSS改成：

/* Main */

#menu{

width: 100%;

margin: 0;

padding: 10px 0 0 0;

list-style: none;

background: #111;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-border-radius: 50px;

border-radius: 50px;

-moz-box-shadow: 0 2px 1px #9c9c9c;

-webkit-box-shadow: 0 2px 1px #9c9c9c;

box-shadow: 0 2px 1px #9c9c9c;

}

 

#menu li{

float: left;

padding: 0 0 10px 0;

position: relative;

}

 

#menu a{

float: left;

color: #eee;

margin: 0 20px;

padding: 3px;

text-decoration: none;

border: 1px solid #831608;

font: bold 14px Arial, Helvetica;

background-color: #831608;

background-image: -moz-linear-gradient(#bb413b, #831608);

background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));

background-image: -webkit-linear-gradient(#bb413b, #831608);

background-image: -o-linear-gradient(#bb413b, #831608);

background-image: -ms-linear-gradient(#bb413b, #831608);

background-image: linear-gradient(#bb413b, #831608);

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

text-shadow: 0 -1px 0 rgba(0,0,0,.8);

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

}

#menu span

{

border: 1px dashed #eba1a3;

display: inline-block;

padding: 4px 15px;

cursor: pointer;

background-color: #bb413b;

background-image: -moz-linear-gradient(#d4463c, #aa2618);

background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));

background-image: -webkit-linear-gradient(#d4463c, #aa2618);

background-image: -o-linear-gradient(#d4463c, #aa2618);

background-image: -ms-linear-gradient(#d4463c, #aa2618);

background-image: linear-gradient(#d4463c, #aa2618);

}

 

#menu a:hover span

{

background-color: #bb413b;

background-image: -moz-linear-gradient(#aa2618, #d4463c);

background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));

background-image: -webkit-linear-gradient(#aa2618, #d4463c);

background-image: -o-linear-gradient(#aa2618, #d4463c);

background-image: -ms-linear-gradient(#aa2618, #d4463c);

background-image: linear-gradient(#aa2618, #d4463c);

}

#menu li:hover > a{

color: #fafafa;

}

 

*html #menu li a:hover{ /* IE6 */

color: #fafafa;

}

 

#menu li:hover > ul{

display: block;

}

 

/* Sub-menu */

 

#menu ul{

list-style: none;

margin: 0;

padding: 0;

display: none;

position: absolute;

top: 35px;

left: 0;

z-index: 99999;

-moz-border-radius: 5px;

border-radius: 5px;

}

 

#menu ul li{

float: none;

margin: 0;

padding: 0;

display: block;

-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

}

 

#menu ul li:last-child{

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

 

#menu ul a{

float: left;

color: #eee;

margin: 0 20px;

padding: 3px;

text-decoration: none;

border: 1px solid #831608;

font: bold 14px Arial, Helvetica;

background-color: #831608;

background-image: -moz-linear-gradient(#bb413b, #831608);

background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));

background-image: -webkit-linear-gradient(#bb413b, #831608);

background-image: -o-linear-gradient(#bb413b, #831608);

background-image: -ms-linear-gradient(#bb413b, #831608);

background-image: linear-gradient(#bb413b, #831608);

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

text-shadow: 0 -1px 0 rgba(0,0,0,.8);

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

}

 

*html #menu ul a{ /* IE6 */

float: left;

color: #eee;

margin: 0 20px;

padding: 3px;

text-decoration: none;

border: 1px solid #831608;

font: bold 14px Arial, Helvetica;

background-color: #831608;

background-image: -moz-linear-gradient(#bb413b, #831608);

background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));

background-image: -webkit-linear-gradient(#bb413b, #831608);

background-image: -o-linear-gradient(#bb413b, #831608);

background-image: -ms-linear-gradient(#bb413b, #831608);

background-image: linear-gradient(#bb413b, #831608);

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

text-shadow: 0 -1px 0 rgba(0,0,0,.8);

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

}

 

*:first-child+html #menu ul a{ /* IE7 */

float: left;

color: #eee;

margin: 0 20px;

padding: 3px;

text-decoration: none;

border: 1px solid #831608;

font: bold 14px Arial, Helvetica;

background-color: #831608;

background-image: -moz-linear-gradient(#bb413b, #831608);

background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));

background-image: -webkit-linear-gradient(#bb413b, #831608);

background-image: -o-linear-gradient(#bb413b, #831608);

background-image: -ms-linear-gradient(#bb413b, #831608);

background-image: linear-gradient(#bb413b, #831608);

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

text-shadow: 0 -1px 0 rgba(0,0,0,.8);

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;

}

 

#menu ul a:hover{

background: #0186ba;

background: -moz-linear-gradient(#04acec,  #0186ba);

background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background: -webkit-linear-gradient(#04acec,  #0186ba);

background: -o-linear-gradient(#04acec,  #0186ba);

background: -ms-linear-gradient(#04acec,  #0186ba);

background: linear-gradient(#04acec,  #0186ba);

}

 

#menu ul li:first-child a{

-moz-border-radius: 5px 5px 0 0;

-webkit-border-radius: 5px 5px 0 0;

border-radius: 5px 5px 0 0;

}

 

#menu ul li:first-child a:after{

content: '';

position: absolute;

left: 30px;

top: -8px;

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-bottom: 8px solid #444;

}

 

#menu ul li:first-child a:hover:after{

border-bottom-color: #04acec;

}

 

#menu ul li:last-child a{

-moz-border-radius: 0 0 5px 5px;

-webkit-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

}

 

/* Clear floated elements */

#menu:after{

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

 

* html #menu             { zoom: 1; } /* IE6 */

*:first-child+html #menu { zoom: 1; } /* IE7 */

-------------------------------------------------------------------------------------------------------

终于结束了，玩去啦:D