我正在处理一个水平菜单，它有一个子级，也应该水平显示下面是水平菜单的代码，它是子菜单。我已经研究过了，但我没有遇到某些问题。我想将父菜单向左对齐，以便它几乎从 div #nav-wrapper 的起始位置开始。
其次，它在父菜单正下方显示子菜单，我希望子菜单从菜单的最左侧显示。
例如，在这种情况下，父菜单包装器 div #nav-wrapper 的宽度为 1000px，当我给 class #mainnav li ul 1000px 时，它会显示菜单主要区域。如何对齐子菜单以从父菜单中第一个元素的起始位置开始
第三，我需要用不同的颜色高度显示父菜单，让我们在将鼠标悬停在父菜单上或父菜单处于事件状态时说红色。
我试图让它工作，但到目前为止我没有得到想要的结果。
<html>
<head>
<title></title>
<style>
#nav-wrapper
{
position: relative;
background-color:white;
height:30px;
width:1000px;
background-color:#f5f5f5;
}
#nav-wrapper ul {
color: #242320;
list-style-type: none;
font-size: .8em;
line-height: 30px;
font-weight: bold;
font-family:Tahoma;
}
#mainnav li {
float: left;
position: relative;
}
#mainnav li a:link, #mainnav li a:visited {
line-height: 30px;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
color: #242320;
padding: 5px 0px;
margin: 0px 0px 0px 0px;
}
#mainnav li a:active {
line-height: 30px;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
color: #242320;
background-color:red;
padding: 5px 0px;
margin: 0px 0px 0px 0px;
}
#mainnav li ul {
left: 0px;
min-height: 30px;
}
#mainnav li a:hover {
color: #3b541e;
border-bottom: solid 0px #3b541e;
}
#mainnav li ul {
position: absolute;
display: none;
left: 0px;
top: 30px;
padding: 0px 0px 0px 5px;
margin: 0px;
background-color: gray;
min-height: 30px;
width: 1000px;
float: left;
}
#mainnav li a:link, #mainnav li a:visited {
line-height: 30px;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
color: #242320;
padding: 1px 0px;
margin: 0px 0px 0px 35px;
}
#mainnav ul li ul li a:link, #mainnav ul li ul li a:visited {
font-size: 1.2em;
color: #b1bba5;
margin: 0px 25px;
padding: 12px 0px 12px 0px;
line-height: 30px;
font-weight: bold;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#nav-wrapper').on('hover', 'li', function () {
$(this).closest('ul').find('li').removeClass('active');
$(this).addClass('active');
return false;
});
$('#nav-wrapper ul li').hover(function() {
$('ul', this).show();
}, function() {
$('#nav-wrapper ul', this).hide();
});
});
</script>
</head>
<body>
<div id="nav-wrapper">
<ul id="mainnav">
<li><a href="#">Home</a></li>
<li><a href="#About</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Multimedia</a></li>
<li><a href="#">Exhibitions</a></li>
<li><a href="#">Trade Marketing</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
最佳答案
这就是你所拥有的。
下次自己做一个jsFiddle，回答你会更容易。
请注意，您在未关闭的 anchor 中有一个错误:<li><a href="#About</a></li>应该是 <li><a href="#About"></a></li> .
我无法回答您的第一个问题，我已经在左侧看到了父级菜单。
对于你的第二个问题，只需删除 position: relative来自 #mainnav li规则:
#mainnav li {
float: left;
/* position: relative; */
}
(参见演示:http://jsfiddle.net/ZvW9T/2/)
对于第三个问题，您已经在使用 jQuery，那么您可以使用 javascript 轻松实现它，如果这是您想要的方式。
但是混合 css 和 javascript 来生成 css 会在您的代码中造成一些困惑，您可能想重新考虑纯 CSS 中的页面，按照网络上的几个演练之一，只是 google CSS Drop Down Menu .
请注意，通常，子菜单是垂直的，而不是水平的(有时它们是混合的，例如两列垂直值)，并且它们几乎总是从父菜单选项卡开始，而不是从页面的开头开始。 ..
关于jquery - 水平菜单与 css 或 jquery 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14099224/