Question

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

我想要做的是，在每个菜单项的左侧显示一个小图像（每个项目的图像将不同）图像大小为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

你有办法做到这一点。

您可以在标签中添加（例如跨度）。

<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，那么使用您的图标创建自定义字体并使用它来显示您的图标（如字体，字体，字形，......）是更好的方法

查看here了解更多信息

希望它会帮助你。

Answer 2

如果您有图像文件，我建议您这样做：

nav li a{
background-image: url('path/to/your/image.png');
background-size:16px 11px;
background-repeat:no-repeat;
background-position:left;
}

编辑：删除尾随“

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

2 个答案: