横向下拉菜单(导航菜单)1.pdf

横向下拉菜单(导航菜单)

横向下拉菜单
——导航菜单


<!--
* {margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:18px;
}
#nav {
height: 30px; width: 580px; list-style-type: none;
padding-left:100px;
line-height:30px;overflow:hidden;background:#999;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#EEE; text-decoration:none;
}
#nav a:visited {
color:#EEE;text-decoration:none;
}
#nav a:hover {
color:#00F;text-decoration:none;font-
weight:bold;background:#CCC;
}
#nav li {
float: left; width: 80px;
}
#nav li ul {
line-height: 30px;
list-style-type: none;
text-align:left;
left: -700px;
width: 420px; //注意,这里一定要设置宽度;
position: absolute;
background:#CCC;
}
#nav li ul li{
float: left;width: 80px; //float 就是子菜单横向的关键,可以继
承父菜单而省略 float
}
#nav li ul a{
display: block; width: 65px;text-align:left;padding-left:15px;
}
#nav li ul a:link {
color:#eee; text-decoration:none;
}
#nav li ul a:visited {
color:#eee;text-decoration:none;
}
#nav li ul a:hover {
color:#eee;text-decoration:none;font-
weight:normal;background:#C00;