Ⅰ 用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，如果是閑來無事可以試一下。