Question

我有一个基于CSS的下拉菜单，我将其应用到wordpress中，但是当用户在菜单上悬停链接时，我需要帮助在链接的右侧添加图像。下面是我的代码，这里有一个我见过的类似效果，并希望在我的菜单上也能得到相同的效果。

像这样：http://www.clydequaywharf.co.nz/

HTML

<div class="header">

    <div class="nav-holder">
        <ul id="nav">
            <li><?php wp_list_pages('title_li=&depth=0&sort_column=menu_order'); ?></li>
        </ul>

    </div>

</div>

CSS

.nav-holder {
    height: 32px;
    width: 1010px;
    float: right;
    position: relative;

}
#nav {
    font-family: Arial;
    font-size: 12px;
    float: right;
    margin: 0px 30px 0 0px; padding:  0 0px 0 0px;
    color: #FFF;
}

#nav li a, #nav li {
    float: left;
    text-transform: capitalize;
    z-index: 9997;


}

#nav li {
    list-style: none;
    position: relative;
    list-style-position: outside;
}

#nav li a:hover { background:white; color: #666; font-weight: normal; }
#nav li:hover > a { background:white; color: #666; font-weight: normal;}
#nav li a {
    margin: 0px 0px 0px 15.2px;
    padding: 10px 8px 8px 8px;
    text-decoration: none;
    color: #FFF;
    text-transform: uppercase;
    font-weight:normal;
    letter-spacing: 0.8px;
    z-index: 1006;

    /* background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); */
    /* background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); */
}


#nav li li a:link {
    background-color: white;
    color: #333;
    font-size: 12px;
    z-index: 9995;
    height:22px;

    /* background: -moz-linear-gradient(top, #11032e, #2a0d65); */
    /* background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); */
}

#nav li li a:hover {
    background: white;
    color: #8B7500;
    z-index: 9996;


    /* background: -moz-linear-gradient(top, #11032e, #2a0d65); */
    /* background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); */
}

/* Submenu */

#nav li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0px 1px 8px 1px; margin: 0px 0px 0px 0px;
}

#nav li:hover ul {
    padding: 0px 0px 0px 0px;
    margin:  0px 0px 0px 15px;
    width:   184px;
    display: block;
    z-index: 5000;

}

#nav li ul li a {
    float: none;
    letter-spacing: 0.0em;
    background: white;
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 0px 12px; /* Move text inside menu */
    z-index: 1000;
    font-size: 12px;
    color: #666;        
    word-spacing: wrap;
    text-transform: lowercase;
    *margin-left: -9px;
}

#nav li ul li {
    _display: inline; /* for ie6 */
    background: url(../images/wordpress.png) no-repeat;
}

#nav li ul li a {
    width: 158px;
    display: block;

}
/* *** */

/* Sub Sub Menu */
#nav li ul li ul {
    display: none;
}

#nav li ul li:hover ul {
    left: 100%;
    top: 0;
    z-index: 1000;
}

Answer 1

编辑：

我看到你现在要做的事情。将

的内容包装在某种容器中，然后可以将元素浮动到其中。我超级贬低你的小提琴，但这个概念仍然存在。您应该能够在标记中实现它。 HTML：

<ul id="nav">
    <li>
        <a>Past Projects</a>
        <div class="menu-item-container">
            <img src="http://lorempixum.com/100/100/" class="menu-image">
            <ul class='children'>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
                <li>Sub Item 3</li>
            </ul></div>
    </li>   
</ul>

CSS：

#nav li {
    list-style: none;
    position: relative;
}
#nav li div.menu-item-container {
    position: absolute;
    left: 0;
    top:100%;
    display:none;
}
#nav li:hover div.menu-item-container {
 display:block;   
}
#nav li img.menu-image {

    float:right;
}
#nav li ul.children {
float:left;
}

这是一个小提琴：http://jsfiddle.net/thomas4g/VL3Sz/15/

希望这有帮助！

~~我似乎无法重现你的菜单所以我无法给出确切的答案~~ 对于任何人来说，这是我原来的答案：您可以使用CSS pseudo class :hover（我相信您已经知道）并结合背景图像，如下所示： HTML：

<span class="menu-item">My Epic Menu Item</span>

CSS：

.menu-item {
 padding:5px;   
 padding-right:25px;
}
.menu-item:hover {
    background-image:url("http://lorempixum.com/20/20/");
    background-position:right;
    background-repeat:no-repeat;
}

如果你想玩它，这是一个小提琴：http://jsfiddle.net/thomas4g/NQQjX/4/

如果您不想要，请告诉我，希望我能改进答案。

帮助将图像添加到下拉菜单中

1 个答案:

编辑：