开发者

Transparent image not appearing in menu

开发者 https://www.devze.com 2023-04-08 14:24 出处:网络
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.

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>&l开发者_StackOverflowt;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!


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

精彩评论

暂无评论...
验证码 换一张
取 消