透明图像未出现在菜单中

Question

我的页面位于此处。

我的下拉导航 CSS 位于此处。

我正在尝试将透明 png 图像（图像此处）添加到下拉部分菜单的。然而，它并没有出现。

我认为在下拉菜单 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 应用背景图像。

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;
}