Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Thanked 0 Times in 0 Posts

    Exclamation css sub menu not appearing

    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

    Last edited by rikkir; 09-15-2011 at 06:46 PM.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts