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