列表项的悬停时不会显示下拉列表

Question

出于某种原因，我不能让我的纯css下拉菜单工作。我已经尝试了我能想到的一切，但无济于事。我知道它必须是小东西或我错过了后代选择器或其他东西。任何人都可以找出这个问题。

HTML

<div class="section navi">
    <div class="row">
        <div class="col_06">
            <ul id="nav">
                <li><a href="/index">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/practice-areas">Practice Areas</a></li>
                <li><a href="/mediation-and-arbitration">Mediation &amp; Arbitration</a></li>
                <li><a href="/attorneys">Attorneys</a></li>
                <li><a href="/offices">Offices</a></li>
                <li><a href="/"><span>▼</span>More
                    <ul class="subNav"></a>
                        <li><a>News &amp; Accolades</a></li>
                        <li><a>Careers</a></li>
                        <li><a>Administration</a></li>
                        <li><a>Disclaimer</a></li>
                        <li><a>Community</a></li>
                        <li><a>The Harmonie Group</a></li>
                        <li><a>Reported Cases</a></li>
                    </ul>           
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

#nav ul{
    background:#fff; <span class="code-comment">/* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */</span>
    background:rgba(255,255,255,0); <span class="code-comment">/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */</span>
    list-style:none;
    position:absolute;
    left:-9999px; <span class="code-comment">/* Hide off-screen when not needed (this is more accessible than display:none;) */</span>
}
#nav ul li{
    padding-top:1px; <span class="code-comment">/* Introducing a padding between the li and the a give the illusion spaced items */</span>
    float:none;
}
#nav ul a{
    white-space:nowrap; <span class="code-comment">/* Stop text wrapping and creating multi-line dropdown items */</span>
}
#nav li:hover ul{ <span class="code-comment">/* Display the dropdown on hover */</span>
    left:0; <span class="code-comment">/* Bring back on-screen when needed */</span>
}
#nav li:hover a{ <span class="code-comment">/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */</span>
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ <span class="code-comment">/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */</span>
    text-decoration:none;
}
#nav li:hover ul li a:hover{ <span class="code-comment">/* Here we define the most explicit hover states--what happens when you hover each individual link. */</span>
    background:#333;
}

Answer 1

CSS中的所有<span>元素都会破坏它们。 HTML元素毁了你的CSS。要发表评论，请使用/*I am a comment*/删除所有<span>，您的下拉列表效果很好：

#nav ul{
    background:#fff; 
    background:rgba(255,255,255,0); 
    list-style:none;
    position:absolute;
    left:-9999px; 
}
#nav ul li{
    padding-top:1px; 
    float:none;
}
#nav ul a{
    white-space:nowrap; 
}
#nav li:hover ul{ 
    left:0; 
}
#nav li:hover a{ 
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ 
    text-decoration:none;
}
#nav li:hover ul li a:hover{ 
    background:#333;
}

JSFIddle Demo

Answer 2

您的CSS中有HTML代码。删除标签。