横向二级下拉菜单代码（二级下拉菜单怎么做）
admin 发布：2022-12-19 21:03 127
本篇文章给大家谈谈横向二级下拉菜单代码，以及二级下拉菜单怎么做对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
- 1、帮忙为以下代码设置css，实现下拉菜单，一级和二级菜单都是横向的。一级菜单的位置不受二级菜单影响
- 2、html二级菜单怎么做
- 3、新手提问~这个导航的下拉二级菜单怎么变横向的~
- 4、css编写的简单的二级菜单怎么横向排列？
- 5、求一个横向的下拉菜单
- 6、高分求网页横向下拉菜单代码！急！急！
帮忙为以下代码设置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互相学习。
html二级菜单怎么做
首页我们打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单
div class="nav"
ul
lia href="#"栏目一/a/li
lia href="#"栏目二/a/li
lia href="#"栏目三/a/li
lia href="#"栏目四/a/li
lia href="#"栏目五/a/li
/ul
/div
如下图所示：
2
现在我们为nav添加样式,首先去掉默认的margin和padding，再去掉ul li标签的list-style样式和a标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：
style type="text/css"
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
/style
打开页面预览效果
3
像这样，一个菜单横向菜单就建好了，下来我们给栏目一，栏目二，栏目三，添加二级下拉菜单
div class="nav"
ul
lia href="#"栏目一/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目二/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目三/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目四/a/li
lia href="#"栏目五/a/li
/ul
/div
4
添加完二级栏目后，现在我们开始添加css样式，首先给li标签下的ul标签添加相对定位，再去除之下li标签的做浮动样式，再适当修改a标签，如一下样式：
.nav ul li ul { position:absolute;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
我们刷新页面预览下效果
5
接下来我们隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示，样式如下：
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
再次预览效果，如下图所示：
6
至此，横向二级下拉菜单就制作完成了，这里附加上全部代码，以方便各位朋友参考，感谢各位朋友的浏览。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title横排二级下拉菜单/title
style type="text/css"
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
/style
/head
body
div class="nav"
ul
lia href="#"栏目一/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目二/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目三/a
ul
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
lia href="#"二级栏目/a/li
/ul
/li
lia href="#"栏目四/a/li
lia href="#"栏目五/a/li
/ul
/div
/body
/html
新手提问~这个导航的下拉二级菜单怎么变横向的~
楼主，以我开发的经验来看，目前你的菜单就是横向的，为什么呢，主要是因为下边这段代码：
#menu
li{
float:left;margin:0
1px
0;}
如果把里边的float:left;去掉，那么菜单就变成纵向了。你可以自己试试。
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
求一个横向的下拉菜单
你可以再仔细看下我博客的代码哈~确实是横向的下来菜单，当初是因为横向的比较好做，我才做的是横向的效果~
起横向这一作用的代码是：ul#nav2 li选择器中的float:left; 即原本外侧的列表标签ul中的列表项是纵向排列的，但是，让它们向左浮动之后，列表项就变成横向排列了；你可以再仔细看一下哈~
另外，我博客里的那篇已经重新测试过了，确实是横向的~
另再付一下那篇文章的连接：
百灵鸟137/blog/item/d36f6d31af75a3a05edf0e0d.html/cmtid/d465d608d81d073de924881a#send
（请把完整的连接附到URL中哈~）
P.S.再次强调一下：IE6下是不能实现下拉菜单的，但是通过添加一个文件可以实现，可是这个文件在用户浏览你的网页的时候是需要下载到自己的浏览器缓存中的，默认IE6下此文件是需要用户同意才可以下载的，而事实上很少会有用户同意...故用CSS做下拉菜单只能是给自己练练手，真正要放到网上的网页，还是要用JS做的~
高分求网页横向下拉菜单代码！急！急！
!--
!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
html xmlns="" lang="zh-CN"
head
meta. http-equiv="Content-Type" content="text/html; charset=gb2312" /
meta. http-equiv="Content-Language" content="zh-CN" /
title横向下拉菜单/title
style type="text/css"
!--
* {margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
height: 24px; list-style-type: none; padding-left:200px;
line-height:24px;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:#FFF;text-decoration:none;font-weight:bold;background:#CCC;
}
#nav li {
float: left; width: 80px;
}
#nav li ul {
line-height: 24px;
list-style-type: none;
text-align:left;
left: -999px;
width: 520px; //注意,这里一定要设置宽度;
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:#F1F1F1; text-decoration:none;
}
#nav li ul a:visited {
color:#F1F1F1;text-decoration:none;
}
#nav li ul a:hover {
color:#FFF;text-decoration:none;font-weight:normal;background:#C00;
}
#nav li:hover ul {
left:25%;
}
#nav li.sfhover ul {
left:25%;
}
#content {
clear: left;
}
--
/style
script. type=text/javascript!--//--![CDATA[//!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; isfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--!]]/script
/head
body
ul id="nav"
lia href="#"菜单一/a
ul
lia href="#"菜单一/a/li
lia href="#"菜单一/a/li
lia href="#"菜单一/a/li
lia href="#"菜单一/a/li
lia href="#"菜单一/a/li
lia href="#"菜单一/a/li
/ul
/li
lia href="#"菜单二/a
ul
lia href="#"菜单二/a/li
lia href="#"菜单二/a/li
lia href="#"菜单二/a/li
lia href="#"菜单二/a/li
lia href="#"菜单二/a/li
/ul
/li
lia href="#"菜单三/a
ul
lia href="#"菜单三/a/li
lia href="#"菜单三/a/li
lia href="#"菜单三/a/li
lia href="#"菜单三/a/li
lia href="#"菜单三/a/li
/ul
/li
lia href="#"菜单四/a
ul
lia href="#"菜单四/a/li
lia href="#"菜单四/a/li
lia href="#"菜单四/a/li
lia href="#"菜单四/a/li
lia href="#"菜单四/a/li
/ul
/li
lia href="#"菜单五/a
ul
lia href="#"菜单五/a/li
lia href="#"菜单五/a/li
lia href="#"菜单五/a/li
lia href="#"菜单五/a/li
lia href="#"菜单五/a/li
/ul
/li
lia href="#"菜单六/a
ul
lia href="#"菜单六/a/li
lia href="#"菜单六/a/li
lia href="#"菜单六/a/li
lia href="#"菜单六/a/li
lia href="#"菜单六/a/li
/ul
/li
/ul
/div
/body
/html
关于横向二级下拉菜单代码和二级下拉菜单怎么做的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
版权说明：如非注明，本站文章均为 AH站长 原创，转载请注明出处和附带本文链接；
相关推荐
- 05-19怎么免费创建网站,怎么免费创建自己的网站平台
- 05-19现在的网络推广怎么做,网络怎样做推广
- 05-19怎么在百度上发帖推广,免费百度广告怎么投放
- 05-19网站如何优化一个关键词,怎么优化一个网站关键词
- 05-19网络营销方案策划案例,网络营销方案策划案例怎么写
- 05-19网络推广怎么找客户资源,怎么在网络推广
- 05-19怎么做网站,怎么做网站教程视频
- 05-19搜索关键词,word文档怎么搜索关键词
- 05-19怎么免费创建自己的网站,怎么免费创建自己的网站平台
- 05-18百度推广官方电话,免费百度广告怎么投放
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接