PDA

View Full Version : CSS menu - geesh, I need some help!



jenniferknott
Jan 18th, 2007, 07:38 PM
The link: http://www.specialaudience.com/cpnetwork/website/index-california.html

Would like help with:
- The first level hover underlines extend beyond the words. I'd like them to line up.
- The entire navigation space as a whole should center on the page, not to the left. It would look better if that happened.


Styles below:

/*Top level list items */
.horizontalcssmenu ul {font-size:8.5pt; margin: 0px; padding: 2px 0px; list-style-type: none;}
.horizontalcssmenu ul li{position:relative; display: inline; float: left; width:auto;}
.horizontalcssmenu ul li a {display:block; padding: 2px 8px; text-decoration: none;}
.horizontalcssmenu ul li a:hover {text-decoration:underline;}

/*FIRST level menu arrangement */
.horizontalcssmenu ul li ul {position:absolute; visibility: hidden;}
.horizontalcssmenu ul li ul li{display: inline; float:left;}
.horizontalcssmenu ul li ul li a {padding: 2px 10px; background-color:#333333; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#663399; width:85px; color:#FFFFFF;}
.horizontalcssmenu ul li ul li a:hover {color:#333333; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#663399; background-color:#FFFFFF; height:-1px; text-decoration: none;}

VIPStephan
Jan 18th, 2007, 07:52 PM
Hi Jennifer,

To center the top level navigation:


.horizontalcssmenu ul {text-align: center;}

And remove the left float from the list item style. Float the links (a) instead.
Ahh, hold on, it's a little more complicated! Solution follows shortly...

As to the underline being too long, could it be this in your JavaScript?


var spanref=document.createElement("span")
spanref.className="arrowdiv"
spanref.innerHTML="    "
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
ultags[t].parentNode.onmouseover=function(){

VIPStephan
Jan 18th, 2007, 08:42 PM
OK, well... I couldn't figure out how to fix it without screwing up in another place so I just applied the suckerfish (http://www.htmldog.com/articles/suckerfish/dropdowns/) method wich I'd recommend you to use rather than your current JavaScript method. To center the menu I applied a width to the primary ul and centered the list itself instead of the list elements:


/*Top level list items */
#cssmenu1, #cssmenu1 ul {font-size:8.5pt; margin: 0px; padding: 2px 0px; list-style-type: none; width: 530px;}
#cssmenu1 li {float: left; width: auto;}
#cssmenu1 a {display:block; padding: 2px 8px; text-decoration: none;}
#cssmenu1 a:hover {text-decoration:underline;}

/*FIRST level menu arrangement */
#cssmenu1 li ul {position:absolute; left: -999em; width: auto;}
#cssmenu1 li:hover ul, #cssmenu li.sfhover ul {left: auto;}
#cssmenu1 ul li {float: none;}
#cssmenu1 ul li a {padding: 2px 10px; background-color:#333333; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#663399; width:85px; color:#FFFFFF;}
#cssmenu1 ul li a:hover {color:#333333; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#663399; background-color:#FFFFFF; height:-1px; text-decoration: none;}

For IE you still need JavaScript which, however, is definately shorter than your current script:


sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);