我即将确定我一直在努力的这个弹出菜单，只是有几个当前的痛点。
我正试图在我的子菜单项上进行左/右填充，如您所见，我并没有做到这一点。此外，当显示第一个子菜单时，我想在列表项的第一行和子项之间创建一点间隙。
下面是我当前的代码和显示我想要的内容的屏幕截图。根据我当前的 CSS，有没有关于如何以干净的方式完成这项工作的想法？
alt text http://www.ajondeck.net/temp/jFlyout.png
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function mainmenu() {
$("#nav ul").css({ display: "none" }); // Opera Fix
$("#nav li").hover(function() {
$(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
}, function() {
$(this).find('ul:first').css({ visibility: "hidden" });
});
}
$(document).ready(function() {
mainmenu();
});
</script>
<style type="text/css">
*
{
padding: 0px;
margin: 0px;
}
body
{
font-size: 0.85em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#nav, #nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
}
#nav a
{
display: block;
padding: 4px 0px 4px 0px;
color: #dfca90;
text-decoration: none;
background-color: #ECE9D8;
font-size: 9px;
font-weight: bold;
font: bold 15px Palatino, 'Palatino Linotype' , Georgia, serif;
}
#nav > li > a
{
font-size: 16px;
font-variant: small-caps;
border-right: 1px solid #dfca90;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 6px;
padding-top: 6px;
background-color: #fff;
color: #dfca90;
}
#nav li ul li a:hover
{
color: #999;
}
#nav li
{
float: left;
position: relative;
}
#nav ul
{
position: absolute;
display: none;
width: 170px;
border: 2px solid #dfca90;
}
#nav ul li
{
}
#nav li ul a
{
width: 170px;
height: auto;
float: left;
}
#nav ul ul
{
top: -2px;
}
#nav li ul ul
{
left: 170px;
background-color: #ECE9D8;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
{
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript </a>
<ul>
<li><a href="#">3.1 jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a> </li>
<li><a href="#">3.1.2 Tutorial</a> </li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>
</body>
</html>
最佳答案
这是一个编辑过的版本。放在http://www.quickdiff.com/看看我改变了什么(你的在左边，我的在右边)。
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function mainmenu() {
$("#nav ul").css({ display: "none" }); // Opera Fix
$("#nav li").hover(function() {
$(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
}, function() {
$(this).find('ul:first').css({ visibility: "hidden" });
});
}
$(document).ready(function() {
mainmenu();
});
</script>
<style type="text/css">
*
{
padding: 0px;
margin: 0px;
}
body
{
font-size: 0.85em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#nav, #nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
background-color: #ECE9D8;
}
#nav a
{
display: block;
padding: 4px 0px 4px 0px;
color: #dfca90;
text-decoration: none;
font-size: 9px;
font-weight: bold;
font: bold 15px Palatino, 'Palatino Linotype' , Georgia, serif;
}
#nav > li > a
{
font-size: 16px;
font-variant: small-caps;
border-right: 1px solid #dfca90;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 6px;
padding-top: 6px;
background-color: #fff;
color: #dfca90;
}
#nav li ul li a:hover
{
color: #999;
}
#nav li
{
float: left;
position: relative;
}
#nav ul
{
left: -1px;
top: 35px;
padding: 0 0 0 5px;
position: absolute;
display: none;
width: 170px;
border: 2px solid #dfca90;
}
#nav ul li
{
}
#nav li ul a
{
width: 170px;
height: auto;
float: left;
}
#nav ul ul
{
top: -2px;
}
#nav li ul ul
{
left: 170px;
background-color: #ECE9D8;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
{
display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
{
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript </a>
<ul>
<li><a href="#">3.1 jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a> </li>
<li><a href="#">3.1.2 Tutorial</a> </li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>
</body>
</html>
关于jQuery CSS 自定义弹出菜单样式问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2718039/