Question

所以我有一个小问题，让我的菜单与slidingown功能一起使用我的其他现有菜单（普通链接）。

我现有的菜单（带有普通链接）就像这样，带有LI链接的简单UL。

<ul class="menu">
      <li><a href="home.php">HOME</a></li>
      <li><a href="#">HOME</a></li>
      <li><a href="#">HOME</a></li>
      <li><a href="#">HOME</a></li>
      <li><a href="#">HOME</a></li>
</ul>

我的滑动菜单看起来像这样：

    <img src="images/button.png" width="126" height="23" class="menu_class">
<ul class="the_menu">
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
<li><a href="#">menulink</a></li>
</ul>

我希望带有滑动菜单NEXT的ul到另一个具有普通链接的ul ..

现在它做了什么，<br>每个ul所以带有滑动的menubutton在菜单下面，但我想要它旁边。

.menu_class {
    border:1px solid #1c1c1c;
}

.the_menu {
    position:absolute; 
    display:none;
    width:150px;
    border: 1px solid #1c1c1c;
}

.the_menu li {
    background-color: #283d44;
}

.the_menu li a {
font-size: 12px;
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.the_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #fffc30;
}

/* MENU 2*/

.menu li {
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}
.menu a {
    color: #94938e;
    display: block;
    float: left;
    margin: 0;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
}

Answer 1

没有看到什么，我的第一个建议是浮动UL而不是绝对定位它们。

与此同时，对于带子菜单的菜单选项，我建议不要使用不同的UL。有一个更简洁的方法可以使用单个顶级UL和仅针对子菜单的单独UL。在这些情况下，您将子菜单UL嵌套在主要UL的LI元素内。 Here's one resource，但还有很多其他人。不过，这个链接应该足以让你开始。

约什

已编辑：更多细节/示例

从根本上说，您的UL结构如下：

<div id="menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li>
            <a class="drop" href="/Products/Index">Products</a>
            <ul class="submenu">
                <li><a href="/Products/1">Meat cleavers</a></li>
                <li><a href="/Products/2">Hockey masks</a></li>
                <li><a href="/Products/3">Chainsaws</a></li>
            </ul>
        </li>
    </ul>
</div>

神奇的事情发生在CSS中。我必须大大简化它，因为我的实现包括特殊的悬停效果，下拉菜单中非链接组标题LI项的样式，以及各个菜单项的颜色类。基本思想是你构建UL以按照你想要的方式布局，然后设置锚标签的样式以给出你想要的外观。

下面是我的确切CSS（顺便说一句，从Zendesk's菜单结构中慷慨借用）。我删除了与我的一些特殊造型相关的噪音，但是如果我无意中拿出了一些破坏它的东西，请告诉我，我会发布整件事。

#menu { height: 30px; }

#menu ul { 
    list-style: none; 
    float: left;
    margin: 0; 
    padding: 0;
}

#menu ul a { 
    text-decoration: none;
    font-size: 12px; 
}

#menu ul li { 
    float: left; 
    position: relative; 
    padding: 8px 0; 
}
#menu li:hover { background: transparent url(/content/images/sprite.png) repeat-x 0px -128px; }
#menu a.drop { 
    padding: 8px 15px 7px 15px; 
    color: White;
}

#menu ul li img { 
    vertical-align: top; 
    padding-right: 5px; 
    border: 0; 
}

#menu li:hover > ul, #menu li.over ul { display: block; }

/* Drop-down menus */
ul.submenu li:hover > ul { display: block; }
ul.submenu li { width: 200px; left:0pt; height:auto;}
ul.submenu { 
    display: none;  
    left: -2px; 
    margin: 5px 0 0 0; 
    background:#FFFFFF none repeat scroll 0% !important;
    border-style:none solid solid;
    border-width:0pt 2px 2px;
    border-color: #4F81BD;
    padding:8px !important;
    position: absolute;
    text-align:left;
    top:30px;
    width: 200px;
    z-index:15000;
    min-height:28px;
    padding-left:8px;
    float:left;
}

ul.submenu li a {
color:#505050 !important;
border-top:1px solid #DDDDDD;
display:block;
float:none;
padding:3px 5px;
}

#menu li ul li {padding: 0; }

ul.submenu li a:hover {
background:#E6F3FC none repeat scroll 0% !important;
color:#000000;
}

CSS / HTML：不是每个<ul> </ul>

1 个答案: