Question

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

其次，它显示儿童菜单正好位于父菜单下方，我希望从菜单的最左侧显示子菜单。

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

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

enter image description here

我试图让它发挥作用，但到目前为止我还没有达到预期的效果。

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

Answer 1

这就是你拥有的。

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。< / p>

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

Answer 2

你能试试吗

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;

水平菜单与css或jquery对齐

2 个答案: