html - 带有水平子菜单的 CSS 下拉菜单

Question

我有以下站点http://jsfiddle.net/Me4fw/4/ 我正在尝试实现一个水平 css 下拉菜单，该菜单具有一个也是水平的子菜单。我已经尝试了一切，但似乎没有什么能让子菜单项彼此对齐。我能让他们做的就是把它们混在一起，变得丑陋/不可读。

Answer 1

您的问题是您将子菜单绝对定位到父 li。但是父 li 的宽度很小。

解决方案是将子菜单绝对定位到菜单包装器。

请参阅此链接以及工作演示文稿！

更新你的 CSS：

#menu {
  width: 820px;
  height: 60px;
  margin: 0 auto;
  padding: 0px 40px;
  position: relative;
}

#menu li {
  float: left;
}

#menu ul ul {
  list-style-type: none;
  position: absolute;
  z-index: 500;
  left: 0;
  right: 0;
}

并删除此 CSS：

#menu ul li ul li #jackie_spencer{
  display: inline;
  position: absolute;
  top: 20px;
  left: 0;
  width: 100px;    
  color: #FFF;
}

笔记：

您可以查看源代码并检查CSS：

• 在“更新”的地方，一些定义被改变了！
• 在它写着“更新，删除”的地方，声明被删除了。

Answer 2

我看了你的页面，你的子菜单是垂直的原因是子菜单<ul>太窄了：它的宽度和封闭的一样<li>。您应该在其上设置一个宽度以使其占用所有可用空间。

使其与父元素左对齐并与菜单栏的右端右对齐是很棘手的。您可能只想将其设置为足够宽以容纳您所知道的所有内容，并假设不会有任何回流。

您还可以使用一些 JavaScript 来计算它的正确位置。JQuery 对此有好处。您只需在页面首次加载时设置一次，作为 $(document).ready() 的一部分。

Answer 3

提供二级子菜单的一些调整：

/* Menu */
#menu { /* UPDATED */
    width: 820px;
    height: 60px;
    margin: 0 auto;
    padding: 0px 40px;
    position: relative;
}

#menu ul {
 margin: 0;
 padding: 0px 0px 0px 0px;
 line-height: normal;
 line-style: none;
 list-style-type: none;
}

#menu a {
 display: block;
 height: 20px;
 margin-right: 1px;
 padding: 10px 20px 0px 20px;
/*  height: 40px;
 margin-right: 1px;
 padding: 20px 20px 0px 20px;*/
 text-decoration: none;
 text-transform: uppercase;
 font-family: 'Abel', sans-serif;
 font-size: 16px;
 font-weight: normal;
 color: #FFFFFF;
 border: none;
}

#menu a:hover {
 background: url(images/page-content-bg.png) repeat;
}

#menu ul ul a:hover {
 background: url(images/page-menu-bg.png) repeat;
}

#menu .current_page_item a {
 background: url(images/page-content-bg.png) repeat;
}



#menu li { /* UPDATED */
    float: left;
}

/* UPDATED, REMOVED
#menu ul li ul li #jackie_spencer{
 display: inline;
 position: absolute;
 top: 20px;
 left: 0;
 width: 100px;    
 color: #FFF;
}
*/
#menu ul ul { /* UPDATED */
    list-style-type: none;
    position: absolute;
    z-index: 500;
    left: 50px;
    right: 0;
}

#menu ul ul ul {
 position: absolute;
/* top: 0;
 left: 100%;*/
     z-index: 500;
    left: 50px;
    right: 0;

}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
div#menu ul ul li:hover {   background:#c0c0c0;}
div#menu ul ul li { background:#cccccc;}
div#menu ul ul li a:hover { color:#000;}

页面代码

<div id="menu">
                <ul>
                    <li class="current_page_item"><a id="home_menu" href="#Home">Home</a><ul>
  <li><a href="#">linkx</a></li>
  <li><a href="#">linkx</a></li>
  <li><a href="#">linkx</a></li>
  <li><a href="#">linkx</a></li>
  <li><a href="#">linkx</a></li>
  <li><a href="#">linkx</a>
    <ul>
  <li><a href="#">linky</a></li>
  <li><a href="#">linky</a></li>
  <li><a href="#">linky</a></li>
  <li><a href="#">linky</a></li>
  <li><a href="#">linky</a></li>
  <li><a href="#">linky</a></li>
</ul>
  </li>
</ul></li>
                    <li><a id="aboutus_menu" href="#About_Us">About Us</a><ul>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul></li>
                </ul>
                <ul>
                    <li><a id="what_we_do" href="#What_We_Do">What We Do</a>
                        <ul>
                            <li><a id="jackie_spencer" href="#Jackie_Spencer">Hypnotherapy</a></li>
                            <li><a id="diana_menz" href="#Diana_Menz">Massage</a></li>
                            <li><a id="afton_land" href="#Jackie_Spencer">Estitician</a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li><a id="contactus_menu" href="#Contact_Us">Contact Us</a><ul>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul></li>
                </ul>
            </div>