Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • umbracov 38 posts 58 karma points
    Mar 22, 2011 @ 18:57
    umbracov
    0

    2nd Level Navigation with Dropdown on hover

    I have top level horizontal navigation with multiple tabs. Clicking/hovering on one should diplay all the sub menu's as dropdown and the user should be able to click on it to display the page. I have the code that displays the 2nd level navigation as ul/li in relative position.Could some one help me hovering effect on the SubMenu or direct me on samples that might already be in there.

    Copy Link
  • Daniel Bardi 927 posts 2562 karma points
    Mar 22, 2011 @ 19:02
    Daniel Bardi
    0

    Using CSS, set the sub ul to display:none then set the li:hover ul to display:block

    .menu li ul {display:none;}
    .menu li:hover ul {display:block;}

    Here's a good overview: http://www.seoconsultants.com/css/menus/tutorial/

    Copy Link
  • umbracov 38 posts 58 karma points
    Mar 24, 2011 @ 19:15
    umbracov
    0

    Daniel,

     Thanks for your help. I have been able to get this working on FF but not in IE. I have IE 8 and the display: blok does not display the subpages. Here is the CSS I use. Any insight on this highly apprecialted. 

    #menu {
    width: 100%;
    background: #eee;
    float: left;
    }
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    }
    #menu a, #menu h2 {
    display: block;
    border-width: 0px;
    border-style: none;
    margin: 0;
    padding: 0px 0px;
    }
    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }
    #menu a:hover {
    color: #a00;
    background:green;
    }
    #menu li {position: relative;}
    #menu ul ul {
    position: absolute;}
    #menu ul ul ul {
    top: 0;
    left: 100%;
    }
    div#menu ul ul,
    div#menu ul li:hover ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
    div#menu ul li:hover ul,
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}

     

    HTML code as follows........ I have reference to csshover.htc

     
    <
     
    div id="menu">
     
    <ul>
     
    <li><a href="#"> <img name="About" src="" width="141" height="39" border="0" id="Img1" /></a> 
     
    <ul>
     
    <li><a href="">Management</a></li>
     
    <li><a href="">Careers</a></li>
     
    <li><a href="">Privacy Policy</a></li>
     
    </ul>
     
    </li>
     
    </ul>
     
    <ul>
     
    <li><a href=""> <img name="byindustry" width="135" height="39" border="0" id="Img2" src="" /></a>
     
    <ul>
     
    <li><a href="">Origination</a></li>
     
    <li><a href="">Servicing</a></li>
     
    <li><a href="">Quality Control</a></li>
     
    </ul>
     
    </li>
     
    </ul>
    </
     
    div> 
       

     

     Thanks.

    Copy Link
  • umbracov 38 posts 58 karma points
    Mar 25, 2011 @ 19:56
    umbracov
    0

     

    I had the below code in my Template and removing it from there seemed to make the Hover effect work perfectly as intended. 

    <xsl:copy-of select="$currentPage"/>

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies