WordPress.org

Ready to get started?Download WordPress

Forums

Codium Extend
Horizontal Submenue (1 post)

  1. pkinzler
    Member
    Posted 1 year ago #

    Hi,

    I am very happy with the look and functionality of Codium extend for my webpage. I have modified the look a bit but the functionality remains the same.

    But is drives my crazy that I can not get the submenue items to appear horizontal in a line. My idea can be seen realized graphically here. But wherever I put a "display:inline" in, the sub menue items arrage themeselves partly on top of each other, partly higer and lower in respect to the main menue. I have researched a lot of blosg and tried a lot of things but I just don't find the trick. I am not savy enough.

    Thanks in advance!
    Patrick

    This is the CSS part that defines the menue behavior

    /*Navigation*/
    #access{background:#ffffff;display:block;float:left;width:100%;margin:-20px 0 0 0 ;text-transform: uppercase;}
    #access .menu-header,div.menu{font-size:1.3em;padding-left:18px;margin:0;}
    #access .menu-header ul,div.menu ul{list-style:none;margin:0;}
    #access .menu-header li,div.menu li{float:left;position:relative;margin:-10px 0 0 0 ;}
    #access a{color:#6b6969;display:block;line-height:80px;text-decoration:none;padding:0 10px;}
    #access ul ul{box-shadow:0 3px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);display:none;position:absolute;top:60px;left:0;float:left;width:180px;z-index:99999;}
    
    #access ul ul li{min-width:180px;}
    #access ul ul ul{left:100%;top:0;}
    
    #access ul ul a{background:#ffffff;line-height:1.3em;width:180px;height:auto;padding:10px;}
    
    #access li:hover > a,
    #access ul ul :hover > a
    {color:#ff0101;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
    
    #access ul li:hover > ul{display:block;}
    
    #access ul li.current_page_item > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a,
    #access ul li.current-menu-parent-parent > a
    {color:#ff0101;}

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic