Support » Themes and Templates » Navigational Menu Help

  • crystalclearimagedesign


    working with a template (Ideal Theme) where I’m attempting to solve the problem of a drop down menu for the following site:

    …in the Stylesheet (style.css), the script coding for the navigation menu looks like what I’ve pasted below

    /*- Top Nav -*/
    .topnav { float:right; width:450px; margin:50px 0 0 0; padding:0; background:#4d4d4d; border:1px solid #707070; }
    .topnav ul { float:left; list-style:none; padding:0; margin:0; }
    .topnav li { float:left; padding:0 5px; }
    .topnav li a { font:normal 12px Arial, Helvetica, sans-serif; color:#fff; display:block; float:left; padding:10px; }
    .topnav li a:hover { background:#2c2c2c; }
    .topnav li.current_page_item a { background:#2c2c2c; }

    what in this script would need to changed to get the drop down effect I’m needing for this navigational menu?


Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Andrew Nevins


    Try a CSS-specific forum for CSS-specific help.



    Where did your theme or site come from?



    very “generic” support help
    which is why I came here



    You’re not handling hiding the sub list. You have to hide ul.children and then only display it when its parent li is being hovered over. The code below isn’t 100% perfect, but if you add it to your css you’ll get the idea.

    ul.children {
        display: none;
    .topnav li {
        position: relative;
    .topnav li:hover ul.children {
        background: #c0c0c0;
        display: block;
        position: absolute;
        top: 25px;
        width: 250px;
        z-index: 1000;
    .topnav li li,
    .topnav li li a {
        display: block;
        width: 100%;

    Moderator Andrew Nevins


    WordPress forums do not support commercial themes.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Navigational Menu Help’ is closed to new replies.