正文
网页二级选项css横向 网页设置css
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
帮忙为以下代码设置css，实现下拉菜单，一级和二级菜单都是横向的。一级菜单的位置不受二级菜单影响
用jquery实现很简单，不过你的HTML代码结构我稍微改了下：
如果你页面没有引入javascript的jquery库，那你得下一个jquery库，然后引入页面。
下面的代码，已经测试过了。
HTML代码如下：
ul id="main_menu"
lia href ="#"网站首页/a/li
lia href ="#"校园概况/a
dl
dda href ="#"学校简介/a/dd
dda href ="#"历任领导/a/dd
dda href ="#"现任领导/a/dd
dda href ="#"历史沿革/a/dd
dda href ="#"校园风光/a/dd
/dl
/li
lia href ="#"机构设置/a
dl
dda href ="#"党群部门/a/dd
dda href ="#"行政部门/a/dd
dda href ="#"教学部门/a/dd
dda href ="#"科研机构/a/dd
dda href ="#"附属单位/a/dd
/dl
/li
lia href ="#"教学教育/a
dl
dda href ="#"本科生教育/a/dd
dda href ="#"研究生教育/a/dd
dda href ="#"留学生教育/a/dd
dda href ="#"继续教育/a/dd
/dl
/li
lia href =""师资队伍/a
dl
dda href ="#"院士风采/a/dd
dda href ="#"专家学者/a/dd
dda 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互相学习。
相关问答
Q1: CSS技巧分享：如何用css制作横排二级下拉菜单
工具/材料
notepad++
浏览器
打开Notepad++，先输入个页面框架
！DOCTYPE html
html xmlns=""
hade
/hade
body
/body
框架好了，那么就该定义页面的title，关键词keyword，和描述description
meta charset="UTF-8" content="text/html" http-equiv="content-type"
title纯css二级导航下拉菜单/title
meta name="keyword" content="搜狗略懂"
meta name="description" content="描述"
这些内容只能在head/head中完成。
定义页面使用的css样式，也是需要在head里定义的。
style type="text/css"
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiaoulli { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiaoulliulli { float:none;}
!--navul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。
这里根据你的需求来自己定义。
--
/style
添加一个DIV标签，在页面中划分出一个块来，用来显示。
div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述
然后使用无序标签ul+样式li 来实现模块。
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗问问/a/li
lia href="#"搜狗输入法/a/li
lia href="#"搜狗浏览器/a/li
lia href="#"搜狐/a/li
/ul
/div
放上全部的代码吧，可以参考一下啊，
!DOCTYPE html
html xmlns=""//允许你通过一个网址来识别你的标记
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="keyword" content="利用css实现下拉菜单"
meta name="description" content="搜狗略懂、css分享"
titlecss实现下拉导航栏菜单/title
style type="text/css"
* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}
ul, li {
list-style:none;
}
a {
text-decoration:none;
}
.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiaoulli { float:left;}
.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
.jiao ul li ul { position:absolute; display:none;}
.jiao ul li:hover ul{ display:block; }
.jiaoulliulli { float:none;}
!--navul只选择nav下一级里面的ul元素
nav ul选择nav内所包含的所有ul元素
navul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。
这里根据你的需求来自己定义。
--
/style
/head
body
div class="jiao"
ul
lia href="#"搜狗略懂/a
ul
lia href="#"搜狗问问/a/li
lia href="#"搜狗输入法/a/li
lia href="#"搜狗浏览器/a/li
lia href="#"搜狐/a/li
/ul
/li
/ul
/div
/body
/html
如果要添加更多的菜单，只需要后边继续添加ul/li即可
特别提示
写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？
Q2: 如何用css实现二级导航为横向的效果，如图。
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title导航示例/title
style type="text/css"
*{
margin:0;
padding:0;
}
li{
list-style-type:none;
}
.nav{
width:800px;
height:50px;
background:#cccccc;
line-height:50px;
margin:0 auto;
}
.nav li{
float:left;
position:relative;
text-align:center;
padding:0 10px;
overflow:visible;
}
.nav li:hover{
background:#ff00ff;
cursor:pointer;
}
.nav li ul{
position:absolute;
top:50px;
left:0px;
display:none;
width:300px;
}
.nav li:hover ul{
display:block;
}
.nav li ul li{
background:#f0f0f0;
float:left;
padding:0 10px;
}
.nav li ul li:hover{
background:#f0ff00;
}
/style
/head
body
ul class="nav"
li关于我们
ul
li二级导航/li
li二级导航/li
li二级导航/li
/ul
/li
li公司文化/li
li新闻资讯/li
/ul
/body
/html
Q3: css编写的简单的二级菜单怎么横向排列？
这是我写的一个导航，你自己看吧。li并列应该定义其float属性为left。
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
HEAD
TITLE menu /TITLE
/HEAD
style
body{
padding-top:200px;
text-align:center;
font-size:13px;
}
#content{
margin:0 auto;
text-align:left;
width:720px;
background:orange;
background-color:black;
}
ul{
margin-top:1px;
list-style:none;
}
#father li{
float:left;
position:relative;
margin-right:10px;
width:120px;
text-align:center;
border:1px solid black;
border-bottom:none;
}
#father li a:link,#father li a:visited{
line-height:30px;
color:darkred;
font-weight:bold;
}
#father li ul *{
float:none;
margin-right:0px;
padding:0;
color:none;
width:90px;
background-color:orange;
border:none;
}
.child{
position:absolute ;
top:29px;
right:0px;
display:none;
}
#father li ul li a:link,#father li ul li a:visited{
margin:1px;
color:blue;
text-decoration:none;
font-weight:normal;
line-height:20px;
}
#father li ul li a:hover{
background-color:white;
}
/style
script
function showMenu(emt,id1,id2){
document.getElementById(id1).style.textDecoration = "none";
document.getElementById(id1).style.color = "white";
document.getElementById(id2).style.display = "block";
emt.style.backgroundColor = "orange";
emt.style.borderColor = "white";
}
function hiddenMenu(emt,id1,id2){
document.getElementById(id1).style.textDecoration = "underline";
document.getElementById(id1).style.color = "darkred";
document.getElementById(id2).style.display = "none";
emt.style.backgroundColor = "black";
emt.style.borderColor = "black";
}
/script
BODY
/table
div id="content"
ul id="father"
li onmouseover="showMenu(this,'a1','ul1')" onmouseout="hiddenMenu(this,'a1','ul1')"
a id="a1" href="#"主页/a
ul id="ul1" class="child"
lia href="#"文字测试/a/li
lia href="#"使用中文字符/a/li
lia href="#"你看可以吗/a/li
lia href="#"Item 4/a/li
lia href="#"Item 5/a/li
lia href="#"Item 6/a/li
lia href="#"Item 7/a/li
/ul
/li
li onmouseover="showMenu(this,'a2','ul2')" onmouseout="hiddenMenu(this,'a2','ul2')"
a id="a2" href="#"程序设计/a
ul id="ul2" class="child"
lia href="#"JAVA/a/li
lia href="#"C/C++/a/li
lia href="#"C#.NET/a/li
lia href="#"游戏开发/a/li
lia href="#"汇编/a/li
/ul
/li
li onmouseover="showMenu(this,'a3','ul3')" onmouseout="hiddenMenu(this,'a3','ul3')"
a id="a3" href="#"网页技术/a
ul id="ul3" class="child"
lia href="#"HTML/a/li
lia href="#"CSS/a/li
lia href="#"JavaScript/a/li
lia href="#"XML/a/li
lia href="#"ASP/a/li
lia href="#"JSP/a/li
lia href="#"PHP/a/li
lia href="#"Perl/a/li
/ul
/li
li onmouseover="showMenu(this,'a4','ul4')" onmouseout="hiddenMenu(this,'a4','ul4')"
a id="a4" href="#"动态网页/a
ul id="ul4" class="child"
lia href="#"ASP/a/li
lia href="#"JSP/a/li
lia href="#"PHP/a/li
lia href="#"Perl/a/li
/ul
/li
li onmouseover="showMenu(this,'a5','ul5')" onmouseout="hiddenMenu(this,'a5','ul5')"
a id="a5" href="#"关于我/a
ul id="ul5" class="child"
lia href="#"Item 1/a/li
lia href="#"Item 2/a/li
lia href="#"Item 3/a/li
lia href="#"Item 4/a/li
lia href="#"Item 5/a/li
/ul
/li
/ul
div
/BODY
/HTML
关于网页二级选项css横向和网页设置css的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
