We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 30912
    • 463 Posts
    Hi Folks,

    Ive development a dropmenu using the MuddyDogPaws example but to get to the child menus you have to rollover the Parent around 3 times (well personally i dont but everyone else seems to have to)

    the CSS and Snippets are listed below and the in development site is at http://aspiredevelopmentserver.co.uk/linbrooke/

    cssplay_parentRow
    <li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
        <!--[if lte IE 6]>
        <a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
        <table><tr><td>
        <![endif]-->
        [+wf.wrapper+]
        <!--[if lte IE 6]>
    	</td></tr></table>
        </a>
        <![endif]-->
    </li>


    cssplay_inner
    <ul>
        [+wf.wrapper+]
    </ul>
    


    cssplay_outer
    <div[+wf.classes+]>
        <ul>
            [+wf.wrapper+]
        </ul>
    </div>


    cssplay_row
    <li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>


    CSS

    /* common styling */
    .menu {font-family: arial, sans-serif; width:770px; position:relative; margin:0; font-size:11px; margin:0px 0 0px 5px; z-index:100;}
    .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:80px; height:20px; text-align:center; color:#fff;  background:transparent; line-height:20px; font-size:11px; overflow:hidden;}
    .menu ul {padding:0; margin:0;list-style-type: none; }
    .menu ul li {float:left; margin-right:0px; border-right:1px solid #ffffff;position:relative;}
    .menu ul li ul {display: none;}
    
    /* specific to non IE browsers */
    .menu ul li:hover a {color:#ffffff; background:transparent;}
    .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:80px;}
    .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
    .menu ul li:hover ul li:hover a.hide {background:#ff0000; color:#ff0000;}
    .menu ul li:hover ul li ul {display: none;}
    .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
    
    /*drop down colors*/
    .menu ul li:hover ul li a:hover {background:#cccccc; color:#ff0000;}
    .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
    .menu ul li:hover ul li:hover ul.left {left:-105px;}
    




    IE6 CSS
    .menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
    .menu ul li a:hover ul li a.hide {display:none;}
    
    .menu ul li a:hover {color:#fff; background:#36f;}
    .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:80px;}
    .menu ul li a:hover ul li a.sub {background:#cccccc; color:#fff;}
    .menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
    .menu ul li a:hover ul li a ul {visibility:hidden;}
    .menu ul li a:hover ul li a:hover {background:#cccccc; color:#000;}
    .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
    .menu ul li a:hover ul li a:hover ul.left {left:-105px;}
    


    Any help would be appreciated

    Thanks

    Paul
      • 26931
      • 2,314 Posts
      Hi

      .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:80px;}

      try to change it to "top:20px;" otherwise there might be a 1px gap

      hope that helps, jan
        • 30912
        • 463 Posts
        sharkbait - your a genious thanks, totally missed that!
          • 26931
          • 2,314 Posts
          laugh glad it worked