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

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

编辑:

我明白你现在想做什么了。将

的内容包裹在某种容器中，然后您可以在其中 float 元素。我把你的 fiddle 弄得一团糟，但这个概念仍然存在。您应该能够在您的标记中实现它。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;
}

这是一个 fiddle :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;
}

如果你想玩的话，这里有一个 fiddle :http://jsfiddle.net/thomas4g/NQQjX/4/

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