【发布时间】：2010-04-27 00:51:54
【问题描述】：
我已经接近完成我一直在处理的这个弹出菜单，只是有几个当前的痛点。
我正在尝试在我的子菜单项上进行左/右填充，如您所见，我并不完全在那里。此外，当显示第一个子菜单时，我想在第一行列表项和子菜单之间创建一点间隙。
以下是我当前的代码和显示我想要的屏幕截图。根据我目前的 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>
【问题讨论】：
-
这是一个诚实的问题，已经有大约 200 个这样的问题......为什么还要再做一次？在回答之前，算一算你总共花了多少时间，还有一点要走。我的意思不是听起来苛刻/像个混蛋，我只是好奇动机。
-
只是我正在做的事情，我想为自己完善......