Results 1 to 2 of 2

Thread: How do I remove subsequent drop down boxes?

  1. #1
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How do I remove subsequent drop down boxes?

    I only want one category deep, for a total of two. One menu item, with a single drop down list. I have multiple products in the second category, and I can't figure out how to only allow the first drop down. My CSS is below. Any help is appreciated




    /*Credits: Dynamic Drive CSS Library */

    .suckerdiv ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 150px; /* Width of Menu Items */
    border-bottom: 1px solid #808080;
    font-family: arial;
    font-size: 12px;
    }

    .suckerdiv ul li{
    position: relative;
    background-color: #404040;
    }

    /*1st level sub menu style */
    .suckerdiv ul li ul{
    left: 149px; /* Parent menu width - 1*/
    position: absolute;
    width: 150px; /*sub menu width*/
    top: 0;
    display: none;
    }

    /*All subsequent sub menu levels offset */
    .suckerdiv ul li ul li ul{
    left: 148px; /* Parent menu width - 1*/
    }

    /*All subsequent sub menu levels offset */
    .suckerdiv ul li ul li a{
    left: 147px; /* Parent menu width - 1*/
    background-color: #404040;
    }

    /*All subsequent sub menu levels offset */
    .suckerdiv ul li ul li ul li a{
    background-color: #404040;
    }

    /*All subsequent sub menu levels offset */
    .suckerdiv ul li ul li ul li ul li a{
    background-color: #404040;
    }

    /* menu links style */
    .suckerdiv ul li a{
    display: block;
    color: #cccccc;
    text-decoration: none;
    background-color: #404040;
    padding: 2px 5px;
    border: 1px solid #808080;
    border-bottom: 0;
    line-height: 1.75em;
    }

    .suckerdiv ul li a:hover{
    background-color: #808080;
    color: #000000;
    text-decoration: none;
    }

    .suckerdiv ul li ul li a:hover{
    background-color: #808080;
    color: #000000;
    text-decoration: none;
    }

    .suckerdiv ul li ul li ul li a:hover{
    background-color: #808080;
    color: #000000;
    text-decoration: none;
    }

    /* The main categories with sub-categories */
    .suckerdiv .subfolderstyle{
    background: url(images/arrow-list.gif) no-repeat center right;
    }

    /* This one colors the sub-folder with other sub-folders */
    .suckerdiv ul li ul .subfolderstyle {
    background-color: #404040;
    }

    /* This one colors the sub-folder with other sub-folders */
    .suckerdiv ul li ul li ul .subfolderstyle {
    background-color: #404040;
    }

    /* This one colors the sub-folder with other sub-folders */
    .suckerdiv ul li ul li ul li ul .subfolderstyle {
    background-color: #404040;
    }

    /* Holly Hack for IE \*/
    * html .suckerdiv ul li { float: left; height: 1%; }
    * html .suckerdiv ul li a { height: 1%; }

  2. #2
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Another option

    Hi, I don't know how to solve your current problem, however if I understood correctly what you want, you can achieve it with another CSS/javscript combo:
    jQuery Multi Level CSS Menu #2
    It is a featured item on the main page for DynamicDrive.com and its web page is
    here. I found it quite easy to create a main menu, with as many submenus as I wanted.

    Hope it helps!
    Cheers!

Bookmarks

Posting Permissions

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