Results 1 to 10 of 2344

Threaded View

  1. #11
    Join Date
    Oct 2010
    Posts
    46
    Plugin Contributions
    0

    Default Re: CSS Dropdown menu for the header- With Categories!

    Hi - i've read through a lot of posts but can't spot an answer. It's probably something silly but....

    I installed everything ok and on firefox the menu works fine. However in IE8 the menu opens on top of the top category which looks a bit messy!

    The sites local so i can't show you as such but here's my stylesheet and screenshot:-
    body {
    behavior: url(includes/csshover.htc);
    }

    /*green
    div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#0066CC;}
    */

    /*blue*/
    div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#0066CC;}


    /*red
    div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#0066CC;}
    */

    /*grey
    div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#0066CC;}
    */

    #contentMainWrapper {z-index:0;}

    div#dropMenu {
    width:100%;
    margin:0;
    text-align:center;
    z-index:1000;
    position:relative;
    padding-top:10px;
    }

    div#dropMenu ul {
    margin:0;
    padding:0;
    }

    div#dropMenu li {
    position:relative;
    list-style:none;
    margin:0;
    float:left;
    line-height:1em;
    width:16.667%;
    *width:16.649%;
    }

    div#dropMenu ul.level1 {
    width:100%;
    margin:0 auto;
    text-align:center;
    background:#E8F17B; /*background color of top menu when NOT selected. */
    z-index:1000;
    float:left;
    }

    div#dropMenu li a {
    display: block;
    /* Hides from IE5-mac \*/
    height: 1%;
    /* End hide from IE5-mac */
    padding: .6em 0;
    text-decoration: none;
    text-transform:uppercase;
    color:#9933CC;
    text-align:center;
    border-right:1px solid #9933CC;
    }

    div#dropMenu li:hover {}
    /*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
    div#dropMenu li.submenu:hover {}
    div#dropMenu li a.noLine {border:none;}
    div#dropMenu>ul a {width: auto; z-index:1000;}
    div#dropMenu ul ul {display: none;}
    div#dropMenu ul ul li {border-bottom: 1px solid #E8F17B; width:12em; z-index:1000;}
    /*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
    div#dropMenu ul.level1 li.submenu:hover ul.level2,
    div#dropMenu ul.level2 li.submenu:hover ul.level3,
    div#dropMenu ul.level3 li.submenu:hover ul.level4,
    div#dropMenu ul.level4 li.submenu:hover ul.level5,
    div#dropMenu ul.level5 li.submenu:hover ul.level6,
    div#dropMenu ul.level6 li.submenu:hover ul.level7,
    div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 12em;display:block;z-index:1000;}
    div#dropMenu ul.level2 {background:#E8F17B; z-index:1000; position:absolute;left:0;}
    div#dropMenu ul.level3,
    div#dropMenu ul.level4,
    div#dropMenu ul.level5,
    div#dropMenu ul.level6,
    div#dropMenu ul.level7,
    div#dropMenu ul.level8{top: 0; left: 12em; background:#E8F17B}
    div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: #9933CC; text-transform:none;} /* this is text color on drop-down submenu */
    div#dropMenu ul.level2 a:hover {color: #33FFCC;}

    .clearBoth {
    clear:both;
    height:0;
    font-size:0;
    line-height:0;
    }
    Attached Images Attached Images  

 

 

Similar Threads

  1. Categories dropdown menu/css
    By KenshiroU in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 5 Apr 2013, 01:04 PM
  2. HIde categories mod with css dropdown menu
    By adowty in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 9 Feb 2012, 01:05 AM
  3. How to use ezpages/categories as dropdown menu in the header?
    By mdivk in forum Templates, Stylesheets, Page Layout
    Replies: 12
    Last Post: 21 Dec 2011, 06:32 PM
  4. whats wrong with this css for my dropdown menu?
    By 1kell in forum Templates, Stylesheets, Page Layout
    Replies: 9
    Last Post: 28 May 2010, 02:47 AM
  5. Header Dropdown Menu (CSS) Without the Dropdown???
    By hcd888 in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 27 May 2009, 01:20 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg