Прозрачное изображение не появляется в меню

Question

Моя страница здесь .

Моя выпадающая навигационная css здесь .

Я пытаюсь добавить прозрачное изображение PNG, изображение здесь , в раскрывающуюся часть меню. Тем не менее, он не появляется.

Я думал, что добавление класса «suboptions» в выпадающий список 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>

Вы должны очистить поплавок после <li> или применить изображение bg для 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;
}