CSS菜单，悬停时显示subnav

时间：2013-10-11 21:31:26

标签： css menu navigation

我在我正在处理的网站上制作了一个自定义迷你导航，我需要在悬停时显示subnav，就像我将它显示在当前所在的类别或页面上一样，但是无法正确选择。

这是右侧的小导航，带有收音机/电视/竞赛/博客图标 链接：http://www.getconnectedmedia.com/wp/?post_type=radio

我认为这样可行，但不是

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>

CSS：

ul#mininav li {
    display: block;
    float: left;
    margin: 0 0 0 0px !important;
}

ul#mininav li a {
    display: block;
    outline: none;
    width: 30px;
    height: 30px;
    background: transparent url(images/mininav/mininav.png) no-repeat 0 0;
    text-indent: -9009px;
    margin: 0 4px 0 0;
}

ul#mininav li#mnradio a {
    width: 30px;
    background-position: 0px 0px;
}

ul#mininav li#mnradio a:hover {
    width: 30px;
    background-position: 0px -31px;
}

.post-type-archive-radio ul#minisubnav li#subradio {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -40px;
}

.single.single-radio ul#minisubnav li#subradio {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -40px;
}

ul#mininav li#mntv a {
    width: 30px;
    background-position: -33px 0px;
}

ul#mininav li#mntv a:hover {
    width: 30px;
    background-position: -33px -31px;
}

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

.post-type-archive-gctv ul#minisubnav li#subtv {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -27px;
}

.single.single-gctv ul#minisubnav li#subtv {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -27px;
}

ul#mininav li#mnblog a {
    width: 30px;
    background-position: -66px 0px;
}

ul#mininav li#mnblog a:hover {
    width: 30px;
    background-position: -66px -31px;
}

.category-blog.category-2 ul#mininav li#mnblog a {
    width: 30px;
    background-position: -66px -31px;
}

.category-blog.category-2 ul#minisubnav li#subblog {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -38px;
}

.single.single-post ul#minisubnav li#subblog {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -38px;
}

.single.single-post.category-2 ul#minisubnav li#subblog {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -38px;
}

ul#mininav li#mncontests a {
    width: 30px;
    background-position: -99px 0px;
}

ul#mininav li#mncontests a:hover {
    width: 30px;
    background-position: -99px -31px;
}

.post-type-archive-contests ul#mininav li#mncontests a {
    width: 30px;
    background-position: -99px -31px;
}

ul#minisubnav li#subcontests {
    display: none;
    position: relative;
    top: -75px;
    left: 90px;
}

.post-type-archive-contests ul#minisubnav li#subcontests {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -53px;
}

.single.single-contests ul#minisubnav li#subcontests {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -53px;
}

ul#mininav li#mnarchives a {
    width: 30px;
    background-position: -132px 0px;
}

ul#mininav li#mnarchives a:hover {
    width: 30px;
    background-position: -132px -31px;
}

.page.page-id-108 ul#mininav li#mnarchives a {
    width: 30px;
    background-position: -132px -31px !important;
}

.page.page-id-108 ul#minisubnav li#subarchive {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -53px;
}

ul#mininav li#mnabout a {
    width: 30px;
    background-position: -165px 0px;
}

ul#mininav li#mnabout a:hover {
    width: 30px;
    background-position: -165px -31px;
}

.page.page-id-119 ul#mininav li#mnabout a {
    width: 30px;
    background-position: -165px -31px;
}

.page.page-id-119 ul#minisubnav li#subabout {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -42px;
}

.page-child.parent-pageid-119 ul#minisubnav li#subabout {
    display: inline;
    width: 0px;
    position: relative;
    top: -20px;
    left: -42px;
}

ul#minisubnav {
    width: 235px;
}

ul#minisubnav li {
    color: #a7a9ac;
    font-size: 1.2em;
}

ul#minisubnav li#subradio {
    display: none;
}

ul#minisubnav li#subtv {
    display: none;
}

ul#minisubnav li#subblog {
    display: none;
}

ul#minisubnav li#subcontests {
    display: none;
}

ul#minisubnav li#subarchive {
    display: none;
}

ul#minisubnav li#subabout {
    display: none;
}

2 个答案:

答案 0 :(得分：1)

您的子帐号ul需要是您的顶级li的子级，如下所示：

<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 -->

然后在CSS中，您需要为li目标选择:hover而不是锚点，以便显示子子项li。子空间ul不是锚标记的子项，这就是为什么您需要使用实际的父标记li作为悬停目标的原因：

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

但我实际上会建议您隐藏整个子扫描ul而不是li，然后使用悬停目标显示ul：

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

另外，我建议您将所有子帐号id更改为class个。从技术上讲，每页只应该有一个id。如果您正在重复使用id，请将其更改为类。请参阅规范：http://dev.w3.org/html5/markup/global-attributes.html。

答案 1 :(得分：0)

首先，你的标记是错误的。你将内部'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

＆GT;

到

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

元素确实有语法。请不要违反它们。唯一可以成为ul的直接子元素的元素是'li'

相关问题
最新问题