css - 透明图像未出现在菜单中

Question

我的页面是here .

我的下拉导航 CSS 是 here .

我正在尝试添加一个透明的 png 图像，图像 here , 到菜单的下拉部分。但是，它没有出现。

我认为向下拉列表 ul 添加一个“子选项”类可以解决问题，同时为该下拉列表设置 CSS，但它似乎不起作用。

有问题的 HTML:

<ul class="suboptions">
            <li><a href="/faqs" title="CET Color Frequently Asked Questions">F.A.Q.'s</a></li>
            <li><a href="/install" title="CET Color Installation &amp; Site Prep">Installation</a></li>
</ul>

有问题的 CSS:

#menu li ul.suboptions {
background-image: url(/images/bkg_nav.png) !important;
background-color: transparent !important;
}

有什么建议吗？谢谢!

Answer 1

您有 <li> 的 float

你必须在 <li> 之后清除 float 或为李申请背景图片。

EX:1

将此添加到您的 css

#menu li ul.suboptions:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#menu li ul.suboptions {
    display: inline-block;
}

html[xmlns] #menu li ul.suboptions {
    display: block;
}

* html #menu li ul.suboptions {
    height: 1%;
}

EX2:

将此添加到 #menu li ul.suboptions li 类

#menu li ul.suboptions li {
background-image: url(/images/bkg_nav.png) !important;
background-color: transparent !important;
}