0

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

它是右侧带有收音机/电视/竞赛/博客图标的小导航链接：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;
}
4

2 回答 2

1

Your subnav uls need to be children of your top level lis, like so:

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

Then in the CSS you'll need to select your li for the :hover target rather than the anchor in order to show the child subnav li. The subnav ul is not a child of the anchor tag which is why you'll need to use the actual parent tag, the li, as the hover target:

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

I would actually recommend, however, that you hide the whole subnav ul instead of the just the li, then show the ul with the hover target:

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

Also I recommend changing all your subnav ids to classes. Technically speaking there is only supposed to be one id per page. If you're reusing that id, change it to be a class instead. See the spec: http://dev.w3.org/html5/markup/global-attributes.html.

于 2013-10-11T22:07:00.937 回答
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

>

至

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

于 2013-10-11T21:38:46.430 回答