had to do a lot of editing of the list apart code, using the author's new version ( http://www.htmldog.com/articles/suckerfish/dropdowns/ ) and a slightly edited version ( http://www.cssdrive.com/index.php/examples/exampleitem/css_drop_down_menu/ ) but have ended up with something pretty good :cool: code below if anyone wants to check it out. it has varying size menu colums, just simple text for the root menu links, and some much nicer looking menu boxes...
fwiw, didn't put the a:focus on most of the stuff as it makes anything that's clicked stay that way until something else is clicked (eg highlighted links look same as hovered links).
/*###### Start Menu CSS ######*/
#cssdropdown, #cssdropdown ul {
padding:0px;
margin: 0;
list-style: none;
z-index: 9999;
}
#cssdropdown li {
float: left;
position: relative;
z-index: 9999;
}
#cssdropdown li>ul {
top: auto;
}
#cssdropdown li ul {
left: -999em;
}
#cssdropdown li:hover ul, #cssdropdown li:focus ul, #cssdropdown li.sfhover
ul {
left: auto;
display: block;
}
/* Root link formatting */
.mainitems a {
display: block;
padding-right: 10px;
text-decoration: none;
font-weight:bold;
color: #FDED8F;
}
.mainitems a:hover, .mainitems a.sfhover {
color: black;
}
/* Menu box formatting */
#cssdropdown ul {
padding:2px;
}
.subuls {
position: absolute;
margin: 0px;
list-style-type: none;
padding: 2px;
background-color: #FFED88;
border: solid 1px #9D9D9D;
}
.subuls li {
width: 100%;
}
/* Menu link formatting */
.subuls li a {
display: block;
margin: 0;
padding: 2px;
border: 1px solid #FDED8F;
background: #FFF5BF;
font-weight: normal;
font-family: Tahoma;
font-size: 8pt;
color: black;
}
/* Menu link hover formatting */
.subuls li a:hover, .subuls li a.sfhover {
display: block;
padding: 2px;
border: 1px solid #927773;
background: #FFFFFF;
color: black;
}
#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}
/*###### End Menu CSS ######*/
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById
("cssdropdown").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);
//--><!]]></script>
<ul id="cssdropdown">
<li class="mainitems">
<a href="http://www.cssdrive.com">HOME</a>
<ul class="subuls" style="width: 10em">
<li><a href="http://www.alistapart.com/articles/dropdowns/">Gordon
Mac</a></li>
<li><a href="http://www.htmldog.com/articles/suckerfish/dropdowns/">Juiced
Thoughts</a></li>
<li><a
href="http://www.cssdrive.com/index.php/examples/exampleitem/css_drop_down_me
nu/">The Daily Flight</a></li>
<li><a href="">GrapeFruit</a></li>
</ul>
</li>
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">ARCHIVES</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">GIGS</a>
<ul class="subuls" style="width: 3.5em">
<li><a href=""> 23</a></li>
<li><a href=""> 2444</a></li>
<li><a href=""> 2444</a></li>
</ul>
</li>
</ul>
<div id="restofcontent">
rest of page
</div>