I've just started using a Horizontal Navbar using a DD template.
All going well except for the placement and size of the submenus.
Currently the CSS is as follows:
The problem I have is that something is adding an inline style ofCode:.jqueryslidemenu{ background-image:url("navback.png"); background-repeat:no-repeat; background-color:transparent; font-size:10pt; height:2.8em; width: 100%; margin-top:10px; z-index:1000; } .jqueryslidemenu ul{ margin: 0; list-style-type: none; color:#ffffff; } /*Top level list items*/ .jqueryslidemenu ul li{ position: relative; display: inline; float: left; padding-right:25px; } /*Top level menu link items style*/ .jqueryslidemenu ul li a{ display: block; color: white; margin-top:10px; padding-left:0px; padding-right:20px; padding-bottom:0px; border-right: 1px solid #778; color: #2d2b2b; text-decoration: none; } * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; } .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; } .jqueryslidemenu ul li a:hover{ color:#74a6df; } /*1st sub level menu*/ .jqueryslidemenu ul li ul{ background-color:#4078bb; position: absolute; left: 0; display: block; padding-top:2px; padding-bottom:2px; } /*Sub level menu list items (undo style from Top level List Items)*/ .jqueryslidemenu ul li ul li{ display: list-item; float: left; } /*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ top: 0; } /* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ width: 175px; /*width of sub menus*/ padding-top: 2px; padding-left:0px; padding-right:5px; padding-bottom:2px; margin: 0; border-top:#4078bb 1px solid; border-right:4078bb 1px solid; } .jqueryslidemenu ul li ul li a:hover{ /*sub menus hover style*/ color: #74a6df; } /* ######### CSS classes applied to down and right arrow images ######### */ .downarrowclass{ position:absolute; top:12px; padding-left:3px; } .rightarrowclass{ position:absolute; top:1px; padding-left:10px; }display: none; visibility: visible; top: 27px;to the submenus. I tried to addtop: 35px !importantas a CSS style to correct it, but doing so causes the submenus to flicker.
Additionally, the submenus are extremely wide and I can't figure out why. The submenu should only be as wide as the grey border.
Any help is really welcome as I'm stumped.



Reply With Quote
Bookmarks