css+js下拉菜单

css菜单演示







产品介绍

产品一
产品一
产品一
产品一
产品一
产品一


服务介绍

服务二
服务二
服务二
服务二服务二
服务二服务二服务二
服务二


成功案例

案例三
案例
案例三案例三
案例三案例三案例三


关于我们

我们四
我们四
我们四
我们四111


在线演示

演示
演示
演示
演示演示演示
演示演示演示
演示演示
演示演示演示
演示演示演示演示演示


联系我们

联系联系联系联系联系
联系联系联系
联系
联系联系
联系联系
联系联系联系
联系联系联系




[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
纯css下拉菜单




老Y天下-网页特效-导航菜单-漂亮的二级下拉菜单



/* common styling */
/* set up the overall width of the menu div, the font and the margins */
.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}







DEMOS


zero dollars
wrapping text
styled form
active focus
shadow boxing
image map
fun backgrounds
fade scrolling
em sized images



MENUS


spies menu
vertical menu
enlarging list
link images
non-rectangular
jigsaw links
circular links



LAYOUTS


Fixed 1
Fixed 2
Fixed 3
Fixed 4
minimum width



BOXES


spies menu
vertical menu
enlarging list
link images
non-rectangular
jigsaw links
circular links



MOZILLA


drop down menu
cascading menu
content:
mozzie box
rainbow box
snooker cue
target practise
two tone headings
shadow text



EXPLORER


example one
weft fonts
vertical align



OPACITY


opaque colours
opaque menu
partial opacity
partial opacity II










[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
一般情况复制的东西，尽量不要用editplus复制，容易运行错误。