html - 如何在下拉 CSS 列表中显示缩略图以及其他文本样式

Question

我搜索并遇到了一些示例，但无法将它们合并到我现有的代码中，但如果可能的话，我更愿意保留当前的样式和悬停选项。

我已将菜单代码上传至http://jsfiddle.net/ob5fa8mg/

我想做的是在每个菜单项的左侧显示一个小图像(每个元素的图像都不同)图像大小为 16px x 11px

HTML:

    <!--drop down menu start-->
    <div class="menu-wrap">
        <nav class="menu">
            <ul class="clearfix">
                <li><a href="index.html">Home</a></li>
                <li>
                    <a href="#">Pages <span class="arrow">&#9660;</span></a>

                    <ul class="sub-menu">
                        <li><a href="#">Sub Page 1</a></li>
                        <li><a href="#">Sub Page 2</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
            </ul>
        </nav>
    </div>
    <!--drop down menu end-->

CSS:

/* drop down menu */
 .clearfix:after {
    display:block;
    clear:both;
}
/*----- Menu Outline -----*/
 .menu-wrap {
    background: #32271F;
    display: inline-block;
    -webkit-border-radius:.3em;
    -moz-border-radius:.3em;
    border-radius:.3em;
}
.menu {
    width:990px;
    margin:0px auto;
}
.menu li {
    margin:0px;
    list-style:none;
    font-family:sans-serif;
}
.menu a {
    transition:all linear 0.15s;
    color: #d9c8be;
}
.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color: #ffffff;
}
.menu .arrow {
    font-size:11px;
    line-height:0%;
}
/*----- Top Level -----*/
 .menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:19px;
    -webkit-border-radius:.3em;
    -moz-border-radius:.3em;
    border-radius:.3em;
}
.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background: #352a22;
    -webkit-border-radius:.3em;
    -moz-border-radius:.3em;
    border-radius:.3em;
}
/*----- Bottom Level -----*/
 .sub-menu {
    width:160%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
    background: #352a22;
}
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
.sub-menu li {
    display:block;
    font-size:16px;
}
.sub-menu li a {
    padding:10px 30px;
    display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
    background: #473a30;
}
}
/* drop down menu END */

Answer 1

你有办法做到这一点。

您可以在您的 a 标签中添加一个(例如 span)。

<li>
    <a href="#">
        <span class="icon icon-page1"></span>
        Page 1
    </a>
</li>

并制定类似的规则

.icon {
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 5px;
}

.icon.icon-page1 {
    background: url('http://placehold.it/16x16');
}

它将像this fiddle 一样工作和输出给你看。

请注意，如果您可以使用 svg，那么使用您的图标创建自定义字体并使用它来显示您的图标(如 font-awseome、glyphicons 等)将是一种更好的方法

看here了解更多信息

希望对你有帮助。