I am soooo confused! Here is the site I’m developing: Cancer Support site
I seem to have two problems… that I have spent hours and hours trying to figure out the solution.. so I really hope someone can help.
Problem 1: I use an ID=navactive to keep the parent menu item active if it is the current page being diplayed. That works. However, the way I have coded the CSS, it has introduced an error by making the submenu items appear active when they first appear upon mousever of an ID=navactive parent. Instead the submenu items should initially appear as inactive until they are actually moused over. On the site, you can see that the “Home” page is the active page on the parent menu. If you mouse over it, the two children submenus appear.. but they show up active. They should appear as inactive – the same way as the submenus do when you mouse over the “Our Work” parent menu item.
Problem 2: None of my grandchildren submenu items appear at all.. Under both the “Home” and “Our Work” parent menu items I have the following configuration:
Top level menu (parent)
Submenu 1 (child 1)
Submenu 2 (grandchild 1)
Submenu 3 (child 2)
Instead it appears on the page like this where the grandchild 1 becomes the child 2, and no grandchildren are viewable (and the original child 2 [submenu 3] is missing):
Top level menu (parent)
Submenu 1 (child 1)
Submenu 2 (child 2)
Any suggestions would be greatly appreciated!!!
Thanks!
For your convenience.. here is my css code for the nav menu section:
#navcontainer
{
width: 711px;
height: 25px;
text-align: center;
margin: 0px auto; /*Center container on page*/
clear: both;
background-color: #129F9F;
border: 3px solid #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* Opera */
background-image: -o-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #16ACAC), color-stop(1, #0D6F6F));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #16ACAC 0%, #0D6F6F 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #16ACAC 0%, #0D6F6F 100%);
}
.main_menu
{
height: 24px;
line-height: 24px;
font-size: 12px;
position: relative;
}
.main_menu ul
{
padding: 0px 0px 0px 35px; /* padding on left to get nav menu to center.. since it has a float left to make it display properly*/
list-style: none;
}
.main_menu ul li
{
padding: 0;
margin: 0;
border-right: 2px solid #129F9F;
float: left;
}
.main_menu ul li.navcontact /* to stop right border at end of nav line */
{
padding: 0;
margin: 0;
border-right: none;
float: left;
}
.main_menu ul li a
{
color: #FFF;
display: block;
text-decoration: none;
padding: 0 15px;
}
.main_menu ul > li:hover > a, #navactive a:link, #navactive a:visited, #navactive > ul > li > a:hover
{
text-decoration: none;
color: #EAA339;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0D6F6F), color-stop(1, #16ACAC));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0D6F6F 0%, #16ACAC 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0D6F6F 0%, #16ACAC 100%);
}
.main_menu ul li ul
{
display: none;
width: auto;
position: absolute;
padding: 0px;
margin: 0px;
}
.main_menu ul li:hover ul
{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
.main_menu ul li:hover li
{
float: none;
list-style: none;
margin: 0px;
}
.main_menu ul li:hover li
{
font-size: 12px;
height: 24px;
background: #54C4C4;
/* border-top: 1px solid #129F9F; */
border: 1px solid #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
.main_menu ul li:hover li a
{
font-size: 11px;
color: #fff;
padding: 0px;
display: block;
width: 150px;
}
.main_menu ul li li a:hover
{
font-size: 11px;
height: 24px;
color:#EAA339;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
And here is the HTML code:
<div id="navcontainer">
<div class="main_menu">
<ul>
<li id="navactive"><a href="index.asp" title="Cancer Support for Families Foundation is a community funded, community focused cancer charity.">Home</a>
<ul>
<li><a href="CSFF_presentation.pdf" title="Presentation about CSS in PDF format">submenu 1</a>
<ul>
<li><a href="CSFF_presentation.pdf" title="Presentation about CSS in PDF format">submenu 2</a></li>
</ul>
</li>
<li><a href="CSFF_presentation.pdf" title="Presentation about CSS in PDF format">submenu 3</a></li>
</ul>
</li>
<li><a href="what_is_csff.asp" title="Supporting families in financial need who are living with cancer.">What is CSFF</a>
<ul>
<li><a href="CSFF_presentation.pdf" title="Presentation about CSS in PDF format">submenu 4</a></li>
</ul>
</li>
<li><a href="make_a_donation.asp" title="CSFF supporters can fund the charitable support programs, community experiences and fundraising events.">Make a Donation</a></li>
<li><a href="our_work.asp" title="Individuals and families battling cancer need more financial support. CSFF can help.">Our Work</a>
<ul>
<li><a href="CSFF_presentation.pdf" title="Presentation about CSS in PDF format">submenu 5</a>
<ul>
<li><a href="CSFF_presentation.pdf" title="Presentation about CSS in PDF format">submenu 6</a></li>
</ul>
</li>
<li><a href="CSFF_presentation.pdf" title="Presentation about CSS in PDF format">submenu 7</a></li>
</ul>
</li>
<li><a href="our_events.asp" title="Local communities come together in a relaxed family friendly environment to support those living with cancer.">Events Outline</a></li>
<li class="navcontact"><a href="contact_csff.asp" title="Contact CSFF to help those in need.">Contact Us</a></li>
</ul>
</div>
</div>
The reason you are getting this problem is due to your CSS and the way you have structured your HTML code. Here is your problem –
Simply change the “#navactive a:link” part of your CSS code above to a seperate class that handles the active link. Currently any link within the “navactive” div will inherit the styles given in this class, and this is why the sub menu text is appearing yellow and not white. So like I said change the above CSS code to a separate class, eg – “#navactive .current”
and then change your HTML code to look like this:
That should do the trick! Obviously I haven’t been able to test it, but let me know if you have any problems. Also just a tip – using the Chrome ‘Inspect Element’ function is really useful when faced with these kind of problems!