Question

CSS横向下拉菜单怎么做啊？如下图这个例子

Answer 1

你把它分成3个部分，左中右：中间自适应就可以了。用CSS完美解决。

追问

发个列子成不？

追答

我给你链接你自己去看吧http://www.zcool.com.cn/gfx/ZNzc4NDA=.html

Answer 2

和纵向菜单是一样的。 只是 子菜单里的项目 float 一下便是。

追问

能发个例子吗？要是css或者JS的，发了我继续加分

追答

我这儿有 ， 不知道能不能贴代码。 稍等。

追问

961558152@qq.com 不行发我邮箱 谢谢！

追答

用jQuery来制作，代码如下，加了一个缓动的效果,CSS的部分你根据需要自己改吧：

[HTML部分]

菜单零
菜单一

子菜单
子菜单
子菜单
子菜单
子菜单
子菜单

菜单二

子菜单
子菜单
子菜单
子菜单
子菜单
子菜单

菜单四

[JS部分]

$(document).ready(function(){
$("#nav ul li a").hover(function() {
$(this).parent().find("ul.childnav").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.childnav").slideUp('slow');
});
});
});

[CSS部分]

* { padding:0; margin:0; list-style:none; }
#nav {
margin:200px;
}
#nav ul { background:#333; padding:5px; float:left; width:100%; }
#nav li {
float:left;
padding:0 5px;
position:relative;
}
#nav li a {
float:left;
padding:0 5px;
display:block;
text-align:center;
color:#fff;
text-decoration:none;
font-size:12px;
height:18px;
line-height:18px;
}
#nav li a:hover, #nav li a.on {
background:#444;
text-decoration:none;
}
#nav li ul {
display: none;
position: absolute;
left: -2px;
top: 18px;
background: #999;
border-bottom:3px solid #333;
z-index:1000;
}
#nav li ul li {
background:none;
padding:0;
}
#nav li ul a {
float:none;
}
#nav li ul a:hover {
background:#888;
}
#nav li:hover ul, #nav li.over ul {
display: block;
z-index:999
}

Answer 3

网上很多这些事例，你去搜搜

追问

网上找好多都没找到、能发个列子吗？

追答

源码爱好者上面去找找吧