尝试在嵌套的<li>样式菜单中选择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

试试这个

Demo （未添加切换菜单标题）

Updated Demo

#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将会生效，否则你想要切换每个嵌套列表而不是使用下面的选择器也可以正常工作

Demo

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

Answer 2

问题是ul元素未包含在正在悬停的li元素中。尝试移动'hovered'ul元素中的li元素。

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

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

Answer 3

您的标记中包含无效标记。 ul无法在ul中包含其他li。除此之外，我刚刚修复了已移除top:100%的css，它看起来就是这样。不确定你想要它。

Demo

的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;
}

MarkUp已修复

<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/（水平菜单）