Menu problem

[Bornfree]

Hi Guys,

I have a problem with my Menus. I think it has to do with the css but not sure. After a added a few menus the background goes black at the bottom. Can anyone tell me what could be the problem?

I got a temp[late for this website and the original was working fine.

problem : www.spe.com.fj.

Its the products menu. right at the bottom it goes black.


Thanks

[ajfmrf]

I just started to look and found this so far:



.main {
width:940px;
padding:0;
margin:0 auto;
font-size:0.8125em;
line-height:1,2307em;
text-align: center;
}


I have to question the line-height of 1,2307em;

That could the issue but I am still looking


Bud

[Bornfree]

Hi Bud,

Thanks for your help. What should i change it to? I also have another issue. When i click on other menus the they should change to an orange color indicating were the user is but only the home button is always orange.

[azoomer]

On the home page the home button in the navigation has a class called .active
You can see it in this part of the html:


<nav>
<ul class="sf-menu">
<li class="active"><a href="index.html">home</a></li>
<li>
<a href="products.htm">Products</a>
<ul>

Sectional Door Motors</a></li>
</ul>

On the products page you need to put the class .active inside the <li> tag that surrounds the link to "products.htm". Like this


<nav>
<ul class="sf-menu">
<li><a href="index.html">home</a></li>
<li class="active">
<a href="products.htm">Products</a>
<ul>

That will make the products tab orange. Similar changes can be made with the other tabs.

Regarding the black color at the bottom: it seems to be the background color, set in this part of the superfish.css, that is a bit to dark compared to the lower part of the gradient image ( submenu.png):


.sf-menu ul {
position: absolute;
top: -999em;
width: 130px; /* left offset of submenus need to match (see below) */
background:url(../images/submenu.png) 0 0 repeat-x #0e0d0d;
padding:19px 1px 22px;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
box-shadow:1px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4);
}

Unfortunately it also does not look right when I make it a lighter color so maybe the problem is the gradient ( submenu.png) and you may want to make a new smother gradient. Unless someone else has a better suggestion !

[Bornfree]

Hi Azoomer,

Thank you very very much. I managaed to solve it. The Menu with the black bottom was solved by creating a new gradient fill image. works perfectly now.

Thank you once again