Menu
Hi, I’m using the CSS Top Menu from Javascript Kit and trying to customize it. The problem I have is that I want the menu drop-downs to be separate from the header links (not much separation, but more than the default setting), but if I set the “top” attribute in submenus style to great than 1.4 em, the menus will display, then behave strangely (can’t select the contents, etc.) I also need to modify this so the menus will be separate in Firefox and other non-IE browsers. So I’m looking for a solution. Any ideas?
Here’s my code so far:
[CODE]<style type=”text/css”>
#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}
#csstopmenu li{
float: left;
position: relative;
}
#csstopmenu a{
text-decoration: none;
}
.mainitems{
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left-width: 0;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000;
}
.headerlinks {
margin: auto 8px;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #000000;
color: black;}
.headerlinks a:hover{
background-color: #ffffff;
color: #FF0000;
}
.submenus{
display: none;
width: 15em;
position: absolute;
top: 1.4em;
left: 0;
background-color: #f6f6f6;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #000000;
}
.submenus li{
width: 100%;
}
.submenus li a{
display: block;
width: 100%;
text-indent: 8px;
}
html>body .submenus li a{ /* non IE browsers */
width: auto;
}
.submenus li a:hover{
background-color: #f6f6f6;
color: #FF0000;
}
#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}
#csstopmenu li:hover ul, li.over ul {
display: block;
}
html>body #clearmenu{ /* non IE browsers */
height: 3px;
}
</style>
<script type=”text/javascript”>
// CSS Top Menu- By JavaScriptKit.com (http://www.javascriptkit.com)
// Adopted from SuckerFish menu
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Please keep this credit intact
startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById(“csstopmenu”);
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName==”LI”) {
node.onmouseover=function() {
this.className+=” over”;
}
node.onmouseout=function(){
this.className=this.className.replace(” over”, “”)
}
}
}
}
}
if (window.attachEvent)
window.attachEvent(“onload”, startMenu)
else
window.onload=startMenu;
</script>
</head>
<body>
<ul id=”csstopmenu”>
<li class=”mainitems” style=”border-left-width: 1px”>
<div class=”headerlinks”><a href=”http://www.javascriptkit.com”>JavaScript Kit</a></div>
<ul class=”submenus”>
<li><a href=”http://javascriptkit.com/”>Home</a></li>
<li><a href=”http://javascriptkit.com/cutpastejava.shtml”>Free JavaScripts</a></li>
<li><a href=”http://javascriptkit.com/javaindex.shtml”>JavaScript tutorials</a></li>
<li><a href=”http://javascriptkit.com/jsref/index.shtml”>JavaScript Reference</a></li>
</ul>
</li>
<li class=”mainitems”>
<div class=”headerlinks”><a href=”http://www.javascriptkit.com”>2nd Menu Item</a></div>
<ul class=”submenus” style=”width: 14em”>
<li><a href=””>Sub 2 Item 1. Long text, long menu.</a></li>
<li><a href=””>Sub 2 Item 2</a></li>
<li><a href=””>Sub 2 Item 3.</a></li>
</ul>
</li>
<li class=”mainitems”>
<div class=”headerlinks”><a href=”http://www.javascriptkit.com”>3rd Menu Item</a></div>
<ul class=”submenus”>
<li><a href=””>Sub 3 Item 1</a></li>
<li><a href=””>Sub 3 Item 1</a></li>
<li><a href=””>Sub 3 Item 1</a></li>
<li><a href=””>Sub 3 Item 1</a></li>
</ul>
</li>
</ul>
Thanks for any help ?