Question : joomla ja_purity problem drop down menu

I modified the ja_purity template to add user modules under the menu. I copied the spotlight code from the index.php and pasted it where I want the new modules to appear and also modified the the templatedetails.xml file. It works except for an issue with the drop down menu. The background color does not appear when the menu is over my new modules. If the menu extends lower than my new module the color appears on those parts below the new modules. How do I fix this?
You will see from the image that the menu item for google is okay and a small part of the menu item above it.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:



Modified templatedetails.xml

<positions>
<position>hornav</position>
<position>user6</position>
<position>user7</position>
<position>user8</position>
<position>user9</position>
<position>breadcrumbs</position>
<position>banner</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>user5</position>
<position>footer</position>
<position>syndicate</position>
<position>debug</position>
</positions>

modified index.php
<?php
$spotlight = array ('user6','user7','user8','user9');
$botsl = $tmpTools->calSpotlight ($spotlight,99,22);
if( $botsl ) :
?>
<!-- BEGIN: TOP SPOTLIGHT -->
<div id="ja-botslwrap">
<div id="ja-botsl" class="clearfix">

<?php if( $this->countModules('user6') ): ?>
<div class="ja-box<?php echo $botsl['user6']['class']; ?>" style="width: <?php echo $botsl['user6']['width']; ?>;">
<jdoc:include type="modules" name="user6" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user7') ): ?>
<div class="ja-box<?php echo $botsl['user7']['class']; ?>" style="width: <?php echo $botsl['user7']['width']; ?>;">
<jdoc:include type="modules" name="user7" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user8') ): ?>
<div class="ja-box<?php echo $botsl['user8']['class']; ?>" style="width: <?php echo $botsl['user8']['width']; ?>;">
<jdoc:include type="modules" name="user8" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user9') ): ?>
<div class="ja-box<?php echo $botsl['user9']['class']; ?>" style="width: <?php echo $botsl['user9']['width']; ?>;">
<jdoc:include type="modules" name="user9" style="xhtml" />
</div>
<?php endif; ?>

</div>
</div>
<!-- END: TOP SPOTLIGHT -->
<?php endif; ?>

Attachments:

menuscreenshot.png (85 KB) (File Type Details)

screen shot of menu problem

Answer : joomla ja_purity problem drop down menu

Ok so what you want is the lighter colour that 'google' has in the first menu to be the colour for the whole menu?

I'm unsure if you know what transparency means so just to clarify the meaning of transparancy is that it is see through..which is what all of your menu backgrounds are except for the one the mouse is over. What the mouse is over is called the 'hover' state. So in css you can see some styles for the element as it is normally as well as another style for its hover state.

If this "#ja-mainnav ul.menu li ul" is indeed the css for the menu element (I only say that because I can't confirm myself) then there will also be a "#ja-mainnav ul.menu li ul:hover" one which will contain the style for when the mouse is hovering over it.

So.... what all that means is that the images/opaque.png image is transparent... and the image that is applied in the "#ja-mainnav ul.menu li ul:hover" style will not be.

What you are probably better off doing is removing the background url from both of these styles and replacing it with a solid colour background property

The background colour property is like so

background-color:#b0c4de;

so... for an example what you would have is....

#ja-mainnav ul.menu li ul {
border: 1px solid #2A84B1;
background-color:#b0c4de;
}

and

#ja-mainnav ul.menu li ul:hover {
border: 1px solid #2A84B1;
background-color:#b0c4de;
}

Just change the colours to what you need and it should all be solid colours in your menu.