Question

My page is here.

My drop down navigation css is here.

I’m trying to add a transparent png image, image here, to the drop down portion of the menu. However, it’s not appearing.

I thought adding a “suboptions” class to the dropdown ul would do the trick, along with setting CSS for that dropdown, but it doesn’t seem to be working.

HTML in question:

<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 in question:

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

Any suggestions? Thanks!

Answer 1

you have float for the <li>

You have to clear the float, after <li> or apply bg image for li.

EX:1

add this to your 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:

add this to #menu li ul.suboptions li class

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