0

我有一个这样的 HTML 结构：

        <div id="nav">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="#">Services Offered</a></li>
                    <ul>
                        <li><a href="/residential">Residential</a></li>
                        <li><a href="/commercial">Commercial</a></li>
                        <li><a href="/industrial">Industrial</a></li>
                    </ul>
                <li><a href="/areas">Areas We Service</a></li>
                <li><a id="quote" style="cursor: pointer">Request A Quote</a></li>
            </ul>
        </div>

和这样的 CSS 样式：

#nav ul ul {
    display: none;
}

#nav ul li:hover > ul {
    top: 100%;
    position: absolute;
    display: block;
    background: black;
}

CSS 代码不允许嵌套的 HTML<ul>在悬停时可见。我可以理解这是一个问题，如果它<ul>是前面的父母<li>但不是，是吗？如果没有 JS/jQuery，我怎样才能让它工作？

谢谢！

4

4 回答 4

1

您的标记中有无效标签。ul不能包含另一个ul它应该与 in li。除此之外，我只是修复了删除的 css top:100%，它看起来是这样的。不知道你想要它。

演示

CSS

#nav ul ul {
    display: none;
}

#nav ul li:hover > ul {
  
    position: absolute; /* Change this to position:relative and your menu will appear  beneath its parent.*/
    display: block;
    background: black;
}

标记固定

<div id="nav">
    <ul>
        <li><a href="/">Home</a>
        </li>
        <li><a href="#">Services Offered</a>

            <ul>
                <li><a href="/residential">Residential</a>
                </li>
                <li><a href="/commercial">Commercial</a>
                </li>
                <li><a href="/industrial">Industrial</a>
                </li>
            </ul>
        </li>
        <li><a href="/areas">Areas We Service</a>
        </li>
        <li><a id="quote" style="cursor: pointer">Request A Quote</a>
        </li>
    </ul>
</div>
于 2013-05-17T03:36:32.830 回答
1

尝试这个

演示（未添加切换菜单标题）

更新的演示

#nav ul li ul {
   display: none;
}

#nav ul li:nth-of-type(3):hover ul {
   display: block;
}

<div id="nav">
    <ul>
       <li><a href="/">Home</a></li>
       <li><a href="#">Services Offered</a></li>
       <li>Toggle Me
          <ul>
             <li><a href="/residential">Residential</a></li>
             <li><a href="/commercial">Commercial</a></li>
             <li><a href="/industrial">Industrial</a></li>
           </ul>
        </li>
        <li><a href="/areas">Areas We Service</a></li>
        <li><a id="quote" style="cursor: pointer">Request A Quote</a></li>
     </ul>
</div>

注意：您的标记无效，您不能ul直接作为子元素嵌套在另一个ul元素下，您需要ul 在一个li元素下嵌套另一个。

另请注意，我故意使用nth-of-type此处选择第 3 个li，因为如果您想在另一个列表下嵌套另一个列表li并且您不想切换它，那么nth-of-type它将起作用，否则您想要切换每个嵌套列表而不是使用下面的部分of 选择器也可以

演示

#nav ul li:hover ul {
   display: block;
}
于 2013-05-17T03:34:40.153 回答
1

问题是该ul元素不包含在li悬停的元素中。尝试ul在“悬停”元素中移动li元素。

这是我创建的 jsfiddle；只移动ul要包含在的元素li并添加position:relative;到父li元素：http: //jsfiddle.net/BQHyq/1/

如果您有任何疑问，请随时进行询问 - 我很乐意提供帮助。

于 2013-05-17T03:35:55.807 回答
0

我怀疑你没有给position: relative;父母。而主要问题是，<UL>不在里面<LI>。所以:hover不会被触发。为此，您需要将 UL 移动到 LI 内。

为什么不考虑做这样的事情。为什么不试试这个 HTML/CSS 结构呢？

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

小提琴： http:
//jsfiddle.net/vMuxA/（垂直菜单）
http://jsfiddle.net/vMuxA/1/（水平菜单）

于 2013-05-17T03:34:13.947 回答