CSS菜单，悬停时显示子AV

我在一个我正在工作的网站上做了一个自定义的迷你导航，我需要SUNBAV显示在hover上，就像我在它当前所在的类别或页面上显示它一样，但无法正确选择它

它是右侧的小导航，带有收音机/电视/竞赛/博客图标 链接：

我原以为这样行得通，但行不通

ul#mininav li#mntv a:hover ul#minisubnav li#subtv {
    display:inline !important;
}

以下是迄今为止的代码：

<ul id="mininav">
    <li id="mnradio"><a href="http://www.getconnectedmedia.com/wp/?post_type=radio">radio</a></li>
    <ul id="minisubnav">
        <li id="subradio">RADIO</li>
    </ul>
    <li id="mntv"><a href="http://www.getconnectedmedia.com/wp/?post_type=gctv">tv</a></li>
    <ul id="minisubnav">
        <li id="subtv">TV</li>
    </ul>
    <li id="mnblog"><a href="http://getconnectedmedia.com/wp/?cat=2">blog</a></li>
    <ul id="minisubnav">
        <li id="subblog">BLOG</li>
    </ul>
    <li id="mncontests"><a href="http://www.getconnectedmedia.com/wp/?post_type=contests">contests</a></li>
    <ul id="minisubnav">
        <li id="subcontests">CONTESTS</li>
    </ul>
    <li id="mnarchives"><a href="http://getconnectedmedia.com/wp/?page_id=108">archives</a></li>
    <ul id="minisubnav">
        <li id="subarchive">ARCHIVES</li>
    </ul>
    <li id="mnabout"><a href="http://getconnectedmedia.com/wp/?page_id=119">about</a></li>
    <ul id="minisubnav">
        <li id="subabout">ABOUT</li>
    </ul>
</ul>

---

首先，你的标记是错误的。你将内在的“ul”嵌入到li之外

试着改变

<ul id="mininav">
<li id="mnradio"><a href="http://www.getconnectedmedia.com/wp/?post_type=radio">radio</a></li>
<ul id="minisubnav">
.
.
.
</ul

.
.
.

到





.
.
.


元素确实有语法。请不要违反它们。唯一可以成为ul直接子元素的元素是“li”
您的子AV
ul
s必须是您的顶级
li
s的子元素，如下所示：

<li id="mnradio"><a href="http://www.getconnectedmedia.com/wp/?post_type=radio">radio</a>
    <ul id="minisubnav">
        <li id="subradio">RADIO</li>
    </ul>
</li><!-- #mnradio -->

然而，我实际上建议您隐藏整个subnav
ul
，而不仅仅是
li
，然后显示带有悬停目标的
ul
：

li#mnradio:hover li#subradio {
    display: inline !important;
}

ul#minisubnav {
    display: none;
}
li#mnradio:hover ul#minisubnav {
    display: block;
}

另外，我建议将您的所有subnav
id
s更改为
class
es。从技术上讲，每页只能有一个
id
。如果要重用该
id
，请将其改为类。请参阅规范：
 谢谢你，帮了我很多忙。我完全搞砸了这本书。
li#mnradio:hover li#subradio {
    display: inline !important;
}

ul#minisubnav {
    display: none;
}
li#mnradio:hover ul#minisubnav {
    display: block;
}