Question

我有一个简单菜单的以下html代码：

<div class="wHeader">
        <div class="header">
        <img src="header.png">
        </div><!-- header ends here -->
<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li class="current-item">Home</li>
           <li>
                <a href="#">Language</a>
                <ul class="sub-menu">
                    <li><a href=#>Lang1</a></li>
                    <li><a href=#>Lang2</a></li>
                    <li><a href="#">Other ...</a></li>
                </ul>
            </li>
            </ul>
        </nav>
</div>  <!-- menu-wrap ends here-->

<ul>的CSS样式如下：

.sub-menu {
    width:120%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    background:#808080;
}

我正在尝试将标志图像放在其中一个列表项中：

<li style="list-style-image: url('smallflag.png');"><a href=#">Lang1</a></li>

但到目前为止，图像并未出现。与背景有冲突吗？有什么建议可以解决这个问题吗？

Answer 1

＆＃13;

.sub-menu {
width:120%;
padding:5px 0px;
position:absolute;
/*top:100%;*/
<!--left:0px;-->
z-index:-1;
/*opacity:0;*/
transition:opacity linear 0.15s;
background:#808080;
}

＆＃13;

    <div class="wHeader">
     <div class="header">
      <!--<img src="header.png">-->
     </div><!-- header ends here -->
    <div class="menu-wrap">
     <nav class="menu">
      <ul class="clearfix">
       <li class="current-item">Home</li>
        <li>
         <a href="#">Language</a>
          <ul class="sub-menu">
           <li><a href=#>Lang1</a></li>
           <li><a href=#>Lang2</a></li>
           <li style="list-style-image: url('http://placehold.it/20x20');"><a href="#">Other ...</a></li>
          </ul>
        </li>
       </ul>
      </nav>
     </div>

＆＃13;

子菜单类隐藏它并将其移动到屏幕底部，图片也丢失了左：0px属性。

如果您注释掉顶部：100％，左：0和不透明度属性，该项目将显示其图像

如何将图像添加到Html列表项？

1 个答案: