Question

我有以下网站http://jsfiddle.net/Me4fw/4/，其中我试图实现一个水平css下拉菜单，其中有一个也是水平的子菜单。我已经尝试了一切，但似乎没有任何东西似乎让子菜单项与彼此内联。我能让他们做的就是混在一起，变得难看/难以理解。

Answer 1

问题在于您将子菜单绝对地放置在父li上。但是父母李的宽度很小。

解决方案是将子菜单放置在菜单包装器的绝对位置。

使用working presentation!

查看此链接

更新您的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：

在其中读取＆＃34;已更新＆＃34; ，某些定义已更改！

如果＆＃34;已更新，已删除＆＃34; ，则声明已删除。

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>

具有水平子菜单的CSS下拉菜单

3 个答案: