Submenu Help

[james.davis]

Hey guys I need some assistance. I took the advice given yesterday and I reworked the header and menu for the site. Hopefully it is better now.

Ok so here is the issue. Below the main menu in the light purple area I want my sub-menu to appear when you rollover the main menu. Do I use jQuery for this? If so, can someone start me off please. Or can I use CSS. Point me in the direction of what would be most efficient. Thanks.

http://www.nucm.org

[james.davis]

Chris thanks I used the link you referenced above. I am stuck again though and I am not sure what I a doing wrong. The submenu appears now but I cannot get it to fall below the main menu.

The site:

http://www.nucm.org

My CSS for the menu:

/*

---

START menu

---

*/

div#menu {
height: 260px;
background-image: url(‘../images/imgHeader.png’);
background-repeat: no-repeat;
list-style: none;
z-index: 500;
}

div#menu div#table {
display: table;
margin: 0 auto;
margin-top: 158px;
}

div#menu .selectmenu {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
}

div#menu li {
margin: 0;
padding: 0;
height: auto;
float: left;
}
div#menu .selectmenu a#home {
display: block;
height: 58px;
float: left;
text-decoration: none;
text-indent: -9999px;
white-space: nowrap;
background: url(‘../images/mainmenuHome.png’);
background-repeat: no-repeat;
width: 88px;
}

div#menu .selectmenu a#about {
display: block;
height: 58px;
float: left;
text-decoration: none;
text-indent: -9999px;
white-space: nowrap;
background: url(‘../about/images/mainmenuAbout.png’);
background-repeat: no-repeat;
width: 95px;
}

div#menu .selectmenu li:hover a#home {
background-image: url(‘../images/rolloverHome.png’);
background-repeat: no-repeat;
width: 88px;
}

div#menu .selectmenu li:hover a#about {
background-image: url(‘../about/images/rolloverAbout.png’);
background-repeat: no-repeat;
width: 95px;
}

div#menu .selectsubmenu {
display: none;
}

div#menu .submenu {
display: inline;
margin: 0 auto;
padding: 0;
list-style: none;
}
div#menu .submenu_active a:hover {
background: transparent;
color: #f00000;
}

div#menu .selectmenu :hover .selectsubmenu {
display: block;
padding: 0;
left: 0;
text-align: center;
}

div#menu .selectmenu :hover .submenu li a {
display: block;
float: left;
background: transparent;
padding: 0 10px 0 10px;
margin: 58px 0 0 0;
white-space: nowrap;
border: 0;
}

div#menu .selectmenu :hover .submenu li a:hover; {
visibility: visible;
}

/*

---

END menu

---

*/

[Author]

Posts