Forum Moderators: not2easy
I have problems with a list menu using transparent gifs as a background. When I do this, the next <li> gets the background from the one at top of it (since it's a nested system).
I want a feature like this because sometimes I need to have an independent background in the menu container going downwards. Because of that I need the backgrounds in the list to be transparent not to ruin the main menu background. I won't blame you if this sounds too complicated :p
I'll try to explain with a little bit of code:
HTML
<!-- LEFT #1 START -->
<div class="left1">
<div class="menustart"></div>
<div class="menu">
<ul>
<li><a href="#">Videofilmer</a></li>
<li><a href="#">Videofilmer</a></li>
<li><a href="#">Videofilmer</a></li>
<li><a href="#">Videofilmer</a></li>
<li><a href="#">Videofilmer</a></li>
<li><a href="#">Videofilmer</a>
<div>
<ul class="sublevel">
<li><a href="#">Action</a></li>
<li><a href="#">Komedie</a></li>
</ul>
</div>
</li>
<li><a href="#">Hvitevarer</a>
<div>
<ul class="sublevel">
<li><a href="#">Kjøleskap</a>
<div>
<ul class="sublevel2">
<li><a href="#">Electrolux</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="menuend"></div>
</div>
<!-- LEFT #1 END -->
And the CSS
.menustart { width: 182px; height: 26px; padding: 0 0 0 0; clear: both; background-image: url(graphics/menu_top2.gif); }
.menuend { width: 164px; height: 27px; padding: 0 0 0 0; clear: both; background-image: url(graphics/.gif); display:none; }
.menu { width: 182px; padding: 0; height:auto; background-image:url(graphics/menu_bg.gif); }
.menu ul { padding: 0; margin:0; list-style:none; }
.menu h2 { color: #5A5A43; font-family:Verdana, Arial, Helvetica, sans-serif; line-height: 10px; margin: 0; padding: 0; }
.menu li { /*display: inline*/ padding:0; margin:0; background-image: url(graphics/menu_level1.gif); width:182px; text-indent: 1.3em; line-height:1.5em; }
.menu li a { font-size: 11px; color: #000000; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
.menu li a:hover { background-image: url(graphics/menu_level1_hover.gif); font-size: 11px; color: #6e6e6e; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; /* IE6 fix for stuck onMouseOut fra hover ---> */ background-position: 0 0; }
.menu .sublevel li { background-image: url(graphics/menu_level2.gif); width:182px; text-indent: 2.2em; }
.menu .sublevel a { font-size: 11px; color: #000000; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
.menu .sublevel a:hover { background-image: url(graphics/menu_level2.gif); font-size: 11px; color: #6e6e6e; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
.menu .sublevel2 li { background-image: url(graphics/menu_level3.gif); width:182px; text-indent: 3.2em; }
.menu .sublevel2 a { font-size: 11px; color: #000000; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
.menu .sublevel2 a:hover { background-image: url(graphics/menu_level3.gif); font-size: 11px; color: #6e6e6e; display: block; padding: 0 0 0 7%; text-decoration: none; width: 95%; }
Ok. It's like this. In order to show the bg in .menu properly I must set the backgrounds in the LI's to be transparent or they will be rendered on top of the .menu BG. The problem now is that, since the list menu is nested in each other, the <li> under another <li> will borrow the BG of the one over it since they are not overlapping each other with none-transparent-backgrounds.
Anyone know how I can fix this the easy way, please? Tips and suggestions will be greatly appreciated.
Cheers :)
[edited by: encyclo at 1:37 pm (utc) on Sep. 19, 2007]
[edit reason] fixed formatting [/edit]
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
/* for Mozilla */
-moz-opacity:0.6;
You can read more about is here [w3schools.com]
Marshall
