尝试在嵌套中选择CSS3元素 <li> 样式菜单

Question

我有这样的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的情况下如何使它正常工作？

谢谢！

Answer 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选择第三个li因为如果您想将另一个列表嵌套在另一个li并且您不想切换它，那么nth-of-type将会起作用，否则您想要切换每个嵌套列表，那么使用下面的选择器也可以

演示版

#nav ul li:hover ul {
   display: block;
}

Answer 2

问题是ul元素不包含在被悬停的li元素内。 尝试将ul元素移到“悬停的” li元素内。

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

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

Answer 3

您的标记中包含无效的标签。 ul不能包含li应该包含的另一个ul 。 除此之外，我只是固定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>

Answer 4

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

为什么不考虑做这样的事情。 为什么不尝试使用这种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/ （水平菜单）