下面是个简单易学的用CSS制作的很不错的简洁的网页导航下拉菜单教程，小编详细图解介绍包你轻松学会，喜欢的朋友赶紧get起来吧！
用CSS和javascript制作的非常简洁的网页导航菜单，而且还具有下拉的功能啊！呵呵
style type="text/css"
/*Credits: Dynamic Drive CSS Library */
/*URL: a href="/style/" target="_blank"/style//a */
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
}
/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}
.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}
/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE */
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */
/style
script type="text/javascript"
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: a href="/style/" target="_blank"/style//a
var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus_horizontal(){
for (var i=0; ; i++){
var ultags=()("")
for (var t=0; ; t++){
if (ultags[t].]){ //if this is a first level submenu
ultags[t].+"" //dynamically position first level submenus to be height of main menu item
ultags[t].("")""
}
else{ //else if this is a sub level menu (ul)
ultags[t].("")+"" //position menu to the right of menu item that activated it
ultags[t].("")""
}
ultags[t].(){
("")""
}
ultags[t].(){
("")""
}
}
}
}
if ()
("load", buildsubmenus_horizontal, false)
else if ()
("onload", buildsubmenus_horizontal)
/script
div
ul
lia href="#"Item 1/a/li
lia href="#"Item 2/a/li
lia href="#"Folder 1/a
ul
lia href="#"Sub Item 1.1/a/li
lia href="#"Sub Item 1.2/a/li
lia href="#"Sub Item 1.3/a/li
lia href="#"Sub Item 1.4/a/li
/ul
/li
lia href="#"Item 3/a/li
lia href="#"Folder 2/a
ul
lia href="#"Sub Item 2.1/a/li
lia href="#"Folder 2.1/a
ul
lia href="#"Sub Item 2.1.1/a/li
lia href="#"Sub Item 2.1.2/a/li
lia href="#"Sub Item 2.1.3/a/li
lia href="#"Sub Item 2.1.4/a/li
/ul
/li
/ul
/a
/li
lia href="#"Item 4/a/li
/ul
br /
/div
pRest of content here/p
