Ⅰ 用ul和li做导航栏，怎样使二级菜单横向啊
用ul和li做导航栏，使二级菜单横向
主要使用JS实现触发事件，CSS控制样式显示。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#0033CC"><div id="mymenu">
<ul>
<li>机构概况
<ul>
<li>机构情况</li>
<li>机构组成</li>
<li>机构组成</li>
</ul>
</li>
<li>人才引进</li>
<li>新闻动态</li>
<li>文化生活</li>
</ul>
</div></td>
</tr>
</table>
</body>
</html>
style.css
#mymenu {
height: 25px;
width: 700px;
float: left;
position: relative;
}
#mymenu ul li {
float: left;
width: 25%;
list-style-type: none;
font-size: 14px;
color: #FFFFFF;
position: relative;
line-height:25px;
}
#mymenu ul li ul li {
float: none;
width: 100px;
background-color: #0066CC;
}
#mymenu ul li ul{
position: absolute;
right: 100px;
top: 25px;
display:none;
}
#mymenu ul li:hover ul { display:block;}
普通的div标签会影响外面表格的高度，超过会撑大。只有设置了position才会让其成为真正的层，不会撑大外层表格，而是浮动与其上。如果单设置float是无效的。
基于这个原因，#mymenu设了个relative。目的就是让其在表格单元格里浮动起来。
#mymenu ul li要是relative #mymenu ul li ul要是absolute right: 100px;top: 25px;
#mymenu ul li 一级菜单是横向排列，所以float: left;
而里面包含的#mymenu ul li ul li是纵向排列，但受到了父级别float: left;的影响，为了消除这种影响float: none;注意不是clear
#mymenu ul li:hover ul 则是触发菜单的精髓
Ⅱ 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">
<li><a href="#">文字测试</a></li>
<li><a href="#">使用中文字符</a></li>
<li><a href="#">你看可以吗</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a 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">
<li><a href="#">JAVA</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">C#.NET</a></li>
<li><a href="#">游戏开发</a></li>
<li><a 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">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a 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">
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a 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">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
<div>
</BODY>
</HTML>
Ⅲ CSS，HTML怎么让竖向一级菜单生成横向二级菜单
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>竖排菜单</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.nav{height:200px;width:400px;}
.nav>ul{height:200px;}
.nav>ul>li:nth-child(1){width:80px;display:inline;}
.nav>ul>li{width:320px;float:left;}
.nav>ul>li>ul>li{float:left; padding:0 5px;}
</style>
</head>
<body>
<!--nav>ui加高度是清楚浮动，可以自行调整-->
<div class="nav">
<ul>
<li><a href="#">菜单</a></li>
<li>
<ul>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</ul>
</ul>
</div>
</body>
</html>
Ⅳ div+css，横向导航菜单 二级下拉导航菜单 不可以对齐显示。请帮我解决下。谢谢。
#menu ul li { float:left; display:block; width: 80px; height: 26px; line-height: 26px; padding:0 8px; background:#eee; text-align:center; border:1px solid #ccc;}
这行把内边距8px去掉，给width:80px改为96px就可以了。
Ⅳ html二级菜单怎么做
首页我们打看dreamweaver或其它编辑器，创建一个名为nav的导航菜单
<div class="nav">
<ul>
<li><a href="#">栏目一</a></li>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a 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>
<li><a href="#">栏目一</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目二</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目三</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目四</a></li>
<li><a 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
<li><a href="#">栏目一</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目二</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目三</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>
</body>
</html>
Ⅵ 网页二级导航（横向的二级菜单）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<SCRIPT type=text/javascript>
var num=5;
function getObj(objName){return(document.getElementById(objName));}
function tag(id){
getObj("searconrow2").innerHTML=getObj("proce"+id).innerHTML;
for(var i=1;i<=num;i++){
if(i==id) {
getObj("changebox"+i).className="search1";
}
else{
if(i==3 || i==(id-1)){
getObj("changebox"+i).className="search3";}
else{
getObj("changebox"+i).className="search2";}
}
}
}
function loadme(){
getObj("searconrow2").innerHTML=getObj("proce1").innerHTML;
}
</SCRIPT>
<style type="text/css">
#twopage{width:779px; height:62px; margin:0px auto; background-image:url(bannerbg.gif); overflow:hidden}
#twopage ul{width:779px; height:62px; margin:0px; list-style-type:none; overflow:hidden}
#twopage ul li{ float:left; padding:12px 20px; height:62px; margin:0px;overflow:hidden; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#660099}
#searchnavi{width:389px; height:19px; margin:0px; padding:0px; overflow:hidden}
#searchnavi ul{width:389px; margin:0px; padding:0px; list-style-type:none; overflow:hidden}
#searchnavi ul li{ float:left;width:70px; height:18px; cursor:hand; text-align:left}
A:link{
color:#000033;
text-decoration:none;
}
A:visited{
color:#000033;
text-decoration:none;
}
A:hover{color:#FF9900;
text-decoration:none;
}
#searchnavi LI.search1 { margin:0px;FONT-SIZE: 12px; color:#000000; font-weight:bold;BACKGROUND: url(topbg.gif) no-repeat; text-align:center; WIDTH: 70px; PADDING: 5px 0px 0px 0px; HEIGHT: 19px! important
}
#searchnavi LI.search2 { margin:0px;FONT-SIZE: 12px; color:#000000; font-weight:bold;WIDTH: 70px; PADDING: 4px 0px 0px 0px;text-align:center; HEIGHT: 18px! important
}
#searchnavi LI.search3 { margin:0px;FONT-SIZE: 12px; color:#000000; font-weight:bold;WIDTH: 70px; PADDING: 4px 0px 0px 0px;text-align:center; HEIGHT: 18px! important
}
.hiddenbox{
display:none;
}
</style>
</head>
<body>
<div id="twopage">
<ul>
<li><table width="389" height="38" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><DIV id="searchnavi">
<UL>
<LI class="search1" id="changebox1"onmouseover="javascript:tag(1);this.blur();"><a href="#">数码产品</a> </LI>
<LI class="search2" id="changebox2"onmouseover="javascript:tag(2);this.blur();"><a href="#">手机配件</a> </LI>
<LI class="search2" id="changebox3"onmouseover="javascript:tag(3);this.blur();"><a href="#">IPOD配件</a></LI>
<LI class="search2" id="changebox4"onmouseover="javascript:tag(4);this.blur();"><a href="#">家用电器</a> </LI>
<LI class="search2" id="changebox5"onmouseover="javascript:tag(5);this.blur();"><a href="#">办公用品</a> </LI>
</UL></DIV>
</td>
</tr>
<tr>
<td align="left" background="images/dibg.gif" style="padding-left:8px "><DIV id=searchcontent>
<DIV id="searconrow2"></DIV>
<DIV class="hiddenbox" id="proce1" >MD/CD读卡器 | SIM读卡器 | MP3/MP4 | 数码相机 | PSP相关产品
</DIV>
<DIV class="hiddenbox" id="proce2">手机外壳 | 屏幕保护帖 | 手机帖纸 | 手机挂链 | 手机闪光器具| 铃声壁纸
</DIV>
<DIV class="hiddenbox" id="proce3">IPOD 外壳| IPOD 保护帖 | IPOD 保护套 | IPOD 数据线 | IPOD 外设
</DIV>
<DIV class="hiddenbox" id="proce4">手机 | 电话 | 风扇 | 随身听 | 电脑 | 电视 | 自行车 | 滑冰鞋
</DIV>
<DIV class="hiddenbox" id="proce5">打印机 | HUB | 软件 | 纸张 | ERP系统
</DIV>
</DIV></td>
</tr>
</table>
</li>
</ul>
</DIV>
</body>
</html>
Ⅶ 新手提问~这个导航的下拉二级菜单怎么变横向的~
楼主，以我开发的经验来看，目前你的菜单就是横向的，为什么呢，主要是因为下边这段代码：
#menu
li{
float:left;margin:0
1px
0
0;}
如果把里边的float:left;去掉，那么菜单就变成纵向了。你可以自己试试。
Ⅷ 怎么用HTML+CSS实现横向2级导航栏，谢谢了啊！！
这个不太好实现。标签的伪类focus可以很好的实现这种效果，但是在IE6下只支持a的伪类hover、active、visited、link。其他的标签在IE6下都没有伪类。所以建议用js，如果是闲来无事可以试一下。