-1

我正在研究一个水平菜单，它有一个子级别，也应该水平显示下面是水平菜单的代码，它是子菜单。我已经研究过了，但我没有遇到某些问题。我想将父菜单向左对齐，以便它几乎从 div 的注视位置开始#nav-wrapper。

其次，它在父菜单下方显示子菜单，我希望子菜单从 meus 的最左侧显示。

例如，在这种情况下，父菜单包装器 div#nav-wrapper的宽度为 1000px，当我将 1000px 用于类#mainnav li ul时，它会在主区域中显示菜单。如何对齐子菜单以从父菜单中第一个元素的起始位置开始

第三，我需要高度不同颜色的父菜单让我们在将鼠标悬停在父菜单上或父菜单处于活动状态时说红色。

在此处输入图像描述

我试图让它工作，但到目前为止我没有得到想要的结果。

<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>
4

2 回答 2

2

这就是你所拥有的。

http://jsfiddle.net/ZvW9T/1/

下次自己做个jsFiddle，会更容易回答你。

请注意，您在未关闭的锚点中有一个错误：<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。

请注意，通常，子菜单是垂直的，而不是水平的（有时它们是混合的，就像两列垂直值），并且它们几乎总是从父菜单选项卡开始，而不是从页面的开头......

于 2012-12-31T08:45:45.907 回答
0

你能试试这个

http://jsfiddle.net/ZXVLb/

#mainnav li a:link, #mainnav li a:visited margin:0 35px 0 0;

#mainnav li ul left position

#nav-wrapper margin:0 0 0 35px;
于 2012-12-31T09:10:21.080 回答