OK...working on this vertical menu with fly outs.
http://www.dynamicdrive.com/style/cs...menu-vertical/

Instead of a white background, I changed the colors to fit the color scheme of this web site that i'm working on. The problem is, where I have a sub menu, the parent of that sub menu won't change background colors like the rest. Here's a screenshot:




and on roll over:


the image that's to the right is a transparent gif. It's not stretched or anything.

My CSS:

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 110px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;

}
	
.suckerdiv ul li{
position: relative;
}
	
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 120px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #7fba42;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: yellow;
}

.suckerdiv .subfolderstyle{
background: url(../images/arrow-list.gif) no-repeat center right;

}

	
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

and my HTML

        <ul id="suckertree1">
          <li><a href="/shop_products.php#kits">Kits</a>
            <ul>
              <li><a href="/shop_products.php#kits">EFI Wet</a></li>
              <li><a href="/shop_products.php#kits">EFI Dry</a></li>
            </ul>
          </li>
          <li><a href="/shop_products.php#bottles">Bottles</a></li>
          <li><a href="/shop_products.php#guages">Guages</a></li>
          <li><a href="/shop_products.php#brackets">Brackets</a></li>
          <li><a href="/shop_products.php#valves">Valves</a></li>
          <li><a href="/shop_products.php#nozzles">Nozzles</a></li>
          <li><a href="/shop_products.php#jets">Jets</a></li>
          <li><a href="/shop_products.php#electrical">Electrical</a></li>
          <li><a href="/shop_products.php#switches">Switches</a></li>
          <li><a href="/shop_products.php#fittings">Fittings</a></li>
          <li><a href="/shop_products.php#hoses">Hoses</a></li>
          <li><a href="/shop_products.php#labels">Labels</a></li>
          <li><a href="/shop_products.php#hardware">Hardware</a></li>
          <li><a href="/shop_products.php#misc">Misc</a></li>
          </li>
        </ul>

I just need the white to be green like the rest, and then yellow on roll over.

I also noticed that when I remove the CSS tag with arrow-list.gif, the green background shows up as it should. I tried to add a background-color: tag, but it still won't work when the .gif is present.

Thanks for any help!

First of all:

<ul class="suckerdiv">

Then:

.suckerdiv ul li{
position: relative;
background-color:#7ebc41;}

sorry...that first code you posted is already there...i just forgot to post it...here's the code that belongs there:
<div class="suckerdiv">

As for the bg color, i've already tried that code and it does not work.

Now...something even stranger is going on. I've made no changes to the CSS, except color, and now it's as if my "list-style-type: none;" tag is not working at all!





I've figured out that this happens whenever I use an external style sheet..... why would using an external style sheet make a difference? The code works properly when It's defined at the top of the document, but it will not work if i link to it in an external CSS doument

I hope i'm just looking over something simple. I feel like an idiot right now.

Embedded CSS- working

External CSS - not working

edit: the one noted as "not working" appears to be working fine in IE.

Hi NateL,
I'm sorry - I noticed your questions just today.

* comments in css - only /* */
It was the reason of problem with external css file.

* validation (both CSS and HTML)
I use WebDeveloper toolbar for FF for easy and quick validation.

I'm sorry i don't quite follow what you're saying...

1) a piece of code from your external css file:

/* CSS Document */<!--		#7fba42	-->			
.suckerdiv ul{...

At the very beginning you put there incorrect comment. IE "eats" it, but FF is more straight and requires only /*...*/ commenting.

2) There were some other errors in your example pages, that's why I've made my own example for you.

You'll be able to avoid many mistakes if you validate your code - both css and html.
One of the ways of validation is using of FireFox add-ons.