横向二级导航菜单（弹出式二级菜单导航系统）
本文目录一览：
新手提问~这个导航的下拉二级菜单怎么变横向的~
楼主，以我开发的经验来看，目前你的菜单就是横向的，为什么呢，主要是因为下边这段代码：
#menu
li{
float:left;margin:0
1px
0;}
如果把里边的float:left;去掉，那么菜单就变成纵向了。你可以自己试试。
网页二级导航（横向的二级菜单）
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
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("produce"+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("produce1").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
litable width="389" height="38" border="0" align="left" cellpadding="0" cellspacing="0"
tr
td align="left"DIV id="searchnavi"
UL
LI class="3b09-6c45-b7b8-23f0 search1" id="changebox1"onmouseover="javascript:tag(1);this.blur();"a href="#"数码产品/a /LI
LI class="6c45-b7b8-23f0-0147 search2" id="changebox2"onmouseover="javascript:tag(2);this.blur();"a href="#"手机配件/a /LI
LI class="b7b8-23f0-0147-7c7a search2" id="changebox3"onmouseover="javascript:tag(3);this.blur();"a href="#"IPOD配件/a/LI
LI class="23f0-0147-7c7a-4b31 search2" id="changebox4"onmouseover="javascript:tag(4);this.blur();"a href="#"家用电器/a /LI
LI class="0147-7c7a-4b31-7a16 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="7c7a-4b31-7a16-af30 hiddenbox" id="produce1" MD/CD读卡器 | SIM读卡器 | MP3/MP4 | 数码相机 | PSP相关产品
/DIV
DIV class="4b31-7a16-af30-d147 hiddenbox" id="produce2"手机外壳 | 屏幕保护帖 | 手机帖纸 | 手机挂链 | 手机闪光器具| 铃声壁纸
/DIV
DIV class="7a16-af30-d147-7fa8 hiddenbox" id="produce3"IPOD 外壳| IPOD 保护帖 | IPOD 保护套 | IPOD 数据线 | IPOD 外设
/DIV
DIV class="af30-d147-7fa8-6f0d hiddenbox" id="produce4"手机 | 电话 | 风扇 | 随身听 | 电脑 | 电视 | 自行车 | 滑冰鞋
/DIV
DIV class="d147-7fa8-6f0d-5651 hiddenbox" id="produce5"打印机 | HUB | 软件 | 纸张 | ERP系统
/DIV
/DIV/td
/tr
/table
/li
/ul
/DIV
/body
/html
html 二级导航 怎么让菜单横排
!DOCTYPE html
html
head lang="en"
meta charset="UTF-8"
title/title
style type="text/css"
/*一二级菜单横向排列*/
ul li{
float: left;
}
/*二级菜单默认不显示*/
ul li ul{
display: none;
}
/*一级菜单获得焦点时显示其二级菜单*/
ul li:hover ul{
display: block;
position: absolute;
padding-left: 0px;
}
/*不显示列表样式*/
li{
list-style: none;
}
/*二级菜单纵向显示*/
/*
ul li ul li{
float: none;
}
*/
/style
/head
body
div
ul
liA
ul
li1/li
li2/li
/ul
/li
liB/li
liC/li
/ul
/div
/body
/html
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="7fa8-6f0d-5651-238e 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="974b-a4b8-b73e-beaa 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="a4b8-b73e-beaa-3b09 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="b73e-beaa-3b09-6c45 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="beaa-3b09-6c45-b7b8 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
