1. [Picture] Menu effect
2. [Code]menu.html
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<link rel= "stylesheet" href= "Css/style.css" type= "Text/css" media= "All" >
<TITLE>CSS3 drop down menu #4 </title>
<body>
<div class= "Example" >
<ul class= "NAV" >
<li><a href= "http://www.script-tutorials.com/" >Home</a></li>
<li><a href= "http://www.script-tutorials.com/" >Tutorials</a>
<ul class= "Subs" >
<li><a href= "http://www.script-tutorials.com/category/html-css/" >HTML/CSS</a></li>
<li><a href= "http://www.script-tutorials.com/category/jquery/" >JS/jQuery</a></li>
<li><a href= "http://www.script-tutorials.com/category/php/" >PHP</a></li>
<li><a href= "http://www.script-tutorials.com/category/mysql/" >MySQL</a></li>
<li><a href= "http://www.script-tutorials.com/category/xslt/" >XSLT</a></li>
<li><a href= "http://www.script-tutorials.com/category/ajax/" >Ajax</a></li>
<li><a href= "http://www.script-tutorials.com/category/html-css/" >HTML/CSS</a></li>
</ul>
</li>
<li><a href= "http://www.script-tutorials.com/category/resources/" >Resources</a>
<ul class= "Subs" >
<li><a href= "http://www.script-tutorials.com/category/php/" >PHP</a></li>
<li><a href= "http://www.script-tutorials.com/category/mysql/" >MySQL</a></li>
<li><a href= "http://www.script-tutorials.com/category/xslt/" >XSLT</a></li>
<li><a href= "http://www.script-tutorials.com/category/ajax/" >Ajax</a></li>
<li><a href= "http://www.script-tutorials.com/category/html-css/" >HTML/CSS</a></li>
</ul>
</li>
<li><a href= "http://www.script-tutorials.com/about/" >About</a></li>
<li><a href= "http://www.script-tutorials.com/creating-css3-dropdown-menu-4/" >back</a></li >
</ul>
<div ></div>
</div>
</body>
3. [Code]STYLE.CSS
/* Demo Page Styles */
Body {
Background: #eee;
margin:0;
padding:0;
font-family: "Trebuchet MS", Arial,helvetica,sans-serif;
}?http://www.huiyi8.com/yanjiangzhici/?
. example {Speech message
position:relative;
Background: #fff URL (... /images/background.jpg);
width:520px;
height:382px;
border:1px #000 Solid;
margin:20px Auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* Main Menu Styles */
. Nav,.nav UL {
List-style:none;
margin:0;
padding:0;
}
. Nav {
position:relative;
}
. Nav UL {
height:0;
left:0;
Overflow:hidden;
Position:absolute;
top:46px;
}
. Nav Li {
Float:left;
position:relative;
}
. Nav Li a {
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
Background-color: #7770B4;
border:1px solid #6E67A6;
Color: #FFF;
Display:block;
font-size:16px;
line-height:35px;
padding:5px 20px;
Text-decoration:none;
transition:0.5s;
}
. Nav Li:hover > a {
Background: #8CCA33;
Border-color: #6E67A6;
Color: #fff;
}
. Nav li:hover Ul.subs {
Height:auto;
width:180px;
}
. Nav ul Li {
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
opacity:0;
transition:0.5s;
width:100%;
}
. Nav Li ul li {
-moz-transition-delay:0s;
-o-transition-delay:0s;
-webkit-transition-delay:0s;
transition-delay:0s;
}
. NAV Li:hover ul li {
Opacity:1;
-moz-transition-delay:0.5s;
-o-transition-delay:0.5s;
-webkit-transition-delay:0.5s;
transition-delay:0.5s;
}
. Nav ul Li a {
Background: #7770B4;
Border-color: #6E67A6;
Color: #fff;
line-height:1px;
-moz-transition:1.5s;
-o-transition:1.5s;
-webkit-transition:1.5s;
transition:1.5s;
}
. NAV Li:hover ul Li a {
line-height:35px;
}
. Nav ul Li A:hover {
Background: #8CCA33;
Background-image:-webkit-gradient (Linear, 0% 0, 0% 95%, from (RGBA (255, 255, 255, 0.5)), to (RGBA (255, 255, 255, 0));
Background-image:-moz-linear-gradient ( -90deg, Rgba (255, 255, 255, 0.5), RGBA (255, 255, 255, 0));
Background-image:-o-linear-gradient ( -90deg,rgba (255,255,255,0.5), Rgba (255,255,25,0));
}
4. [Image] Background.jpg
Create CSS3 drop-down menu
