请大家帮我看一下我这段代码中的ul和a为什么不能显示在同一行中。
我现在用ul做了一个横向菜单，想把它放在“home”连接的右边，但我发现它运行时ul菜单始终会换行，是不是css出了问题，请大家给我指教一下，谢谢。建议用firefox浏览器运行。
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style>
ul { padding:0; margin:0; list-style:none;}
li { float:left; width:140px; }
ul li a { text-decoration:none; color:#777;}
li:hover { background-color:#ddd;}
ul li ul li table{ background-color:#ddd;}
li ul { display:none;}
li:hover ul,.over ul { display:block;}
</style>
</head>
<body>
<a style="color:red;" >
Home
</a>
|
<ul>
<li><a href="">menu1</a>
<ul>
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">test3</a></li>
<li><a href="">test4</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">menu2</a>
<ul>
<li><a href="">test5</a></li>
<li><a href="">test6</a></li>
</ul>
</li>
</ul>
</body>
</html>
[解决办法]
ul是块级元素，当然会换行，你可以强制它inline，其它自己调吧。
ul { display:inline}
[解决办法]
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style>
ul { padding:0; margin:0; list-style:none;display: inline;}
li { float:left; width:140px; }
ul li a { text-decoration:none; color:#777;}
li:hover { background-color:#ddd;}
ul li ul li table{ background-color:#ddd;}
li ul { display:none;}
li:hover ul,.over ul { display:block;}
</style>
</head>
<body>
<div style="float: left;">
<a style="color:red;" >
Home
</a>
[解决办法]
</div>
<ul style="float: left;">
<li><a href="">menu1</a>
<ul>
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">test3</a></li>
<li><a href="">test4</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">menu2</a>
<ul>
<li><a href="">test5</a></li>
<li><a href="">test6</a></li>
</ul>
</li>
</ul>
</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 content="text/html; charset=utf-8" http-equiv="content-type">
<title>prod menus</title>
<style>
/*ul.hMenu,ul.hMenu li ul { padding:0; margin:0; list-style:none;}*/
/*ul.hMenu li { float:left; width:140px; }*/
/*ul.hMenu li:hover a { color:red;} */
/*ul.hMenu li:hover { background-color:yellow;}*/
/*ul.hMenu li ul li table{ background-color:yellow;} */
/*ul.hMenu li ul { display:none;}*/
/*ul.hMenu li:hover ul,.over ul { display:block;}*/
/**/
/*.eth{text-align:left;}*/
.hMenu
{margin: 0;
padding: 0;
z-index: 30;
width: 480px;
height:23px;}
.hMenu li
{margin: 0;
padding: 0;
list-style: none;
float: left;
width:140px;
}
.hMenu li a
{display: block;
width: 140px;
color:red;
text-align: left;
text-decoration: none}
.hMenu li a:hover
{background: yellow}
.hMenu div
{position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
}
.hMenu div a
{position: relative;
display: block;
width: 140px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: yellow;
color:red
}
</style>
<script type="text/javascript">
var timeout = 100;
var delaytime= 0;
var ddmenuitem = 0;
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclosedelay()
{
delaytime = window.setTimeout(mclose, timeout);
}
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mcancelclosetime()
{
if(delaytime)
{
window.clearTimeout(delaytime);
delaytime = null;
}
}
</script>
</head>
<body>
<div style="float: left;">
<a style="color:red;" >
Home
</a>
[解决办法]
</div>
<ul class="hMenu">
<li><a href="" onmouseover="mopen('m1')" onmouseout="mclosedelay()">menu1</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosedelay()">
<a href="">test1</a>
<a href="">test2</a>
<a href="">test3</a>
<a href="">test4</a>
</div>
</li>
<li><a href="" onmouseover="mopen('m2')" onmouseout="mclosedelay()">menu2 </a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosedelay()">
<a href="">test5</a>
<a href="">test6</a>
</div>
</li>
</ul>
<br/>
test data 1 test data 1 test data 1 test data 1 test data 1 test data 1
<br/>
test data 2
<br/>
<a href="">test data 3 test data 3 test data 3test data 3 test data 3 test data 3test data 3 test data 3 test data 3</a>
</body>
</html>
