Question

帮忙为以下代码设置css，实现下拉菜单，一级和二级菜单都是横向的。一级菜单的位置不受二级菜单影响

<ul id="main_menu" >
<li>
<dl>
<dt class ="frist"><a href ="#">网站首页</a></dt>
</dl></li>
<li>
<dl>
<dt><a href ="#">校园概况</a></dt>
<dd><a href ="#">学校简介</a></dd>
<dd><a href ="#">历任领导</a></dd>
<dd><a href ="#">现任领导</a></dd>
<dd><a href ="#">历史沿革</a></dd>
<dd><a href ="#">校园风光</a></dd>
</dl></li>
<li>
<dl>
<dt><a href ="#">机构设置</a></dt>
<dd><a href ="#">党群部门</a></dd>
<dd><a href ="#">行政部门</a></dd>
<dd><a href ="#">教学部门</a></dd>
<dd><a href ="#">科研机构</a></dd>
<dd><a href ="#">附属单位</a></dd>
</dl></li>
<li>
<dl>
<dt><a href ="#">教学教育</a></dt>
<dd><a href ="#">本科生教育</a></dd>
<dd><a href ="#">研究生教育</a></dd>
<dd><a href ="#">留学生教育</a></dd>
<dd><a href ="#">继续教育</a></dd>
</dl></li>
<li>
<dl>
<dt><a href ="">师资队伍</a></dt>
<dd><a href ="#">院士风采</a></dd>
<dd><a href ="#">专家学者</a></dd>
<dd><a href ="#">教授风采</a></dd>
</dl></li>
</ul>

Answer 1

用jquery实现很简单，不过你的HTML代码结构我稍微改了下：

如果你页面没有引入javascript的jquery库，那你得下一个jquery库，然后引入页面。

下面的代码，已经测试过了。

HTML代码如下：

<ul id="main_menu" >
<li><a href ="#">网站首页</a></li>
<li><a href ="#">校园概况</a>
<dl>
<dd><a href ="#">学校简介</a></dd>
<dd><a href ="#">历任领导</a></dd>
<dd><a href ="#">现任领导</a></dd>
<dd><a href ="#">历史沿革</a></dd>
<dd><a href ="#">校园风光</a></dd>
</dl>
</li>
<li><a href ="#">机构设置</a>
<dl>
<dd><a href ="#">党群部门</a></dd>
<dd><a href ="#">行政部门</a></dd>
<dd><a href ="#">教学部门</a></dd>
<dd><a href ="#">科研机构</a></dd>
<dd><a href ="#">附属单位</a></dd>
</dl>
</li>
<li><a href ="#">教学教育</a>
<dl>
<dd><a href ="#">本科生教育</a></dd>
<dd><a href ="#">研究生教育</a></dd>
<dd><a href ="#">留学生教育</a></dd>
<dd><a href ="#">继续教育</a></dd>
</dl>
</li>
<li><a href ="">师资队伍</a>
<dl>
<dd><a href ="#">院士风采</a></dd>
<dd><a href ="#">专家学者</a></dd>
<dd><a href ="#">教授风采</a></dd>
</dl>
</li>
</ul>

jquery 代码：
$(document).ready(function () {

/* 菜单初始化 */
$("#main_menu li dl").hide();

$("#main_menu li,#main_menu dd").bind("mouseover", function () // 顶级菜单项的鼠标移入操作
{
$(this).children("dl").siblings("a").attr("class", "hover_a"); //赋于一级菜单类名
$(this).children("dl").stop(true, true).slideDown("100"); //下拉二级菜单

}).bind("mouseleave", function () // 顶级菜单项的鼠标移出操作
{

$(this).children("dl").hide();
$(this).children("dl").siblings("a").attr("class", "");
});

$("#main_menu li dl").parent().attr("class", "menu_parent");
$("#main_menu li:last dl").css("top", "-20px");

});

CSS代码：

#main_menu{width:90px;border:1px solid #ddd;padding:10px 0;margin:0;background:#eee;}
#main_menu li,#main_menu dl,#main_menu dd{margin:0;padding:0;}
#main_menu li{width:90px;position:relative;list-style-type:none;height:30px;text-align:center;}
#main_menu li a{display:block;text-decoration:none;font-size:14px;color:#333;line-height:30px;}
#main_menu li a.hover_a{position:absolute;width:90px;height:30px;left:0;top:0;background:#fff; z-index:100;border-top:1px solid #ddd;color:#0175b8;}
#main_menu dl{width:90px;text-align:left; position: absolute; top:0;left:89px;border:1px solid #ddd;background:#fff;padding:5px}
#main_menu dl dd{text-align:center;}
#main_menu dl dd a:hover{color:#0175b8;}
#main_menu > li.menu_parent{}/*这个类名是jquery动态添加的，只有拥有二级菜单dl标签的li标签才会拥有这个类，你可以给他设置一个背景图片，比如一个横向的三角形，用来提醒用户，该栏目下是有二级菜单内容的。*/

有不懂的给我留言，可以私信我加Q互相学习。

Answer 2

给你提示下，把li dt 设为display:none;
然后LI:hover ul{ display:block}

追问

这个我了解，可以实现横向。但是我不知道怎样设置才不会使二级菜单影响一级菜单布局

追答

这个你可以百度下 关键字css二级菜单，

追问

能帮忙具体代码么？谢谢

追答

<style type="text/css">
* {font-family:"宋体";margin:0;padding:0;}
body {padding:15px;}
.nav li li a {display:inline-block;}
.nav li li a {display:block;}
.nav ul {list-style-type:none;margin:0;padding:0;}
.nav ul li { float:left;line-height:24px;display:block;border-bottom:dashed #ccc 1px;font-size:0;padding:0;margin:0;width:120px;}
.nav ul li a {display:block;width:120px;height:24px;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;}
.nav ul table {width:100%;border-collapse:collapse;border:0;padding:0;margin:0;}
.nav ul li ul {display:none;}
.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {color:red;background-color:#f1f1f1;}
.nav ul li:hover ul,.nav ul li a:hover ul,.nav ul li a:active ul {display:block;width:100%;}
.nav ul ul li {display:block;width:100%;border:none;}
.nav ul ul li a{display:block;color:blue;border:none;}
</style>

百度的  你可以参考下。