Question

我的页面是here。

我的下拉导航css为here。

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

我认为在下拉列表中添加一个“子选项”类可以解决问题，同时为该下拉列表设置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>

的浮动

您必须在<li>之后清除浮动，或者为li添加bg图像。

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

透明图像不出现在菜单中

1 个答案: