Results 1 to 2 of 2

Thread: Drop Down Tabs (5 styles) Help w/submenu

  1. #1
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face Drop Down Tabs (5 styles) Help w/submenu

    1) Script Title: Drop Down Tabs (5 styles)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...roptabmenu.htm

    3) Describe problem: The submenu links are always visible and are in a row instead of 'dropping down' like they should. My code is below. Please help.

    /*HTML*/

    Code:
    <div id="bluemenu" class="bluetabs">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Location</a></li>
    <li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1">Site Plan</a></li>
    <li><a href="http://www.dynamicdrive.com/resources/">Area Attractions</a></li>
    <li><a href="http://tools.dynamicdrive.com">Real Estate</a></li>
    <li><a href="http://www.dynamicdrive.com/resources/">Community</a></li>
    <li><a href="http://tools.dynamicdrive.com">Home</a></li>
    </ul>
    </div>
    
    <!--1st drop down menu --> 
    <div id="dropmenu1" class="dropmenudiv">
    <a href="http://www.cssdrive.com">CSS Drive</a>
    <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    <a href="http://www.codingforums.com">Coding Forums</a>
    <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
    </div>
    
    <script type="text/javascript">
    //SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
    tabdropdown.init("bluemenu", 0)
    </script>
    
    
    
    /* CSS Document */
    
    .bluetabs{
    display: inline;
    }
    
    .bluetabs ul{
    list-style: none;
    padding: 0em;
    margin: 0;
    width: 50em;
    display: inline;
    }
    
    .bluetabs li{
    float: right;
    margin: 0 0.15em;
    display: inline;
    }
    
    .bluetabs li a{
    height: 2em;
    line-height: 2em;
    float: right;
    width: 8.9em;
    border: 0.1em solid #dcdce9;
    display: inline;
    color: #512600;
    font-family: arial;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    text-shadow: #ffffff 2px -2px 2px;
    text-align: center;
    margin: 0em;
    }
    
    .bluetabs li a:hover{
    color: #9d4b02;
    }
    
    .bluetabs li.selected{
    color: #9d4b02;
    }
    
    .bluetabs li.selected a{ /*selected main tab style */
    }
    
    .bluetabs li.selected a:hover{ /*selected main tab style */
    }
    
    /* Hide from IE5-Mac \*/
    #nav-menu li a
    {
    float: none
    }
    /* End hide */ 
    
    
    /* ######### Style for Drop Down Menu ######### */
    
    .dropmenudiv_b{
    position:absolute;
    top: 0;
    border: 1px solid #918d8d; /*THEME CHANGE HERE*/
    border-width: 0 1px;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    }
    
    
    .dropmenudiv_b a{
    width: auto;
    display: block;
    text-indent: 5px;
    border: 0 solid #918d8d; /*THEME CHANGE HERE*/
    border-bottom-width: 1px;
    padding: 2px 0;
    text-decoration: none;
    color: black;
    }
    
    * html .dropmenudiv_b a{ /*IE only hack*/
    width: 100%;
    }
    
    .dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
    background-color: #edf3f3;
    }
    Last edited by Snookerman; 06-09-2009 at 11:42 PM. Reason: the code tags

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    It's hard to tell just based on the code you've posted. Please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

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
  •