Horizontal Submenue

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;}