View Full Version : css sub menu not appearing

09-15-2011, 06:05 PM
I have a problem with this code on this page.


great script and love the menu, but cannot get it to work in any browser for ie. works in safari, ff, on my blackberry default browser, but none of the text appears in the sub menu in internet explorer 6, 7, 8, and 9.

can anyone help?


<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li style="border-left: 1px solid #202020;"><a href="http://www.javascriptkit.com/">Home</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JS</a></li>
<li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
<li><a href="#">References</a>
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
<li><a href="http://www.javascriptkit.com/howto/">web Tutorials</a></li>
<li><a href="#">Resources</a>
<li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
<br style="clear: left;" />

<p id="iepara">Rest of content here</p>


`.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;


/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: auto; /*Width of top level menu link items*/
padding: 4px 14px;
border: 1px solid #202020;
border-left-width: 3;
text-decoration: none;
background: none;
color: white;
font: bold 14px Arial;

/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
display: block;
visibility: hidden;


/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;

/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 225px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: #657278;
border-width: 0 1px 1px 1px;

.horizontalcssmenu ul li a:hover{
background: transparent url(menuarrow.gif)
center center repeat-x;

.horizontalcssmenu ul li ul li a:hover{
background: #006194;

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;

/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */


here is what u see in ie