Results 1 to 2 of 2

Thread: CSS Drop down menu - Please Help!!!

  1. #1
    Join Date
    Oct 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Drop down menu - Please Help!!!

    Hello, I am trying to figure out the correct CSS code for the drop down menu provided in calmdesign URL below. What changes should I make. I need this navigation style for my website. Please help. Thanks

    http://www.calmdesign.co.uk/test/blockmenu.html


    http://www.jenkinscreativedesigns.com/ - My website

    .blockmenu1a{
    border-left:1px solid black;
    border-right:1px solid black;
    border-top:4px solid black;
    border-bottom:0px solid black;
    position:absolute;
    top: 220px;
    /*THEME CHANGE HERE*/
    /*Top border width. Should match height of .ddcolortabsline above*/
    line-height:18px;
    z-index:200;
    background-color: white;
    width: 100px; /*show drop down or not*/
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    font-size:12px;
    font-family:Arial;
    left: 510px;
    height: 50px;
    visibility: visible;
    }

    .blockmenu1a a{
    width: auto;
    display: block;
    text-indent: 5px;
    border-top: 0px solid #678b3f;
    border-bottom: 1px solid #678b3f; /*THEME CHANGE HERE*/
    text-decoration: none;
    color: black; padding-left:0; padding-right:0; padding-top:2px; padding-bottom:2px
    }

    * html .blockmenu1a a{ /*IE only hack*/
    width: 100%;
    }

    .blockmenu1a a:hover{ /*THEME CHANGE HERE*/
    background-color: #8a3c3d;
    color: white;
    }


    /* 3366cc url changed blocks to blue*/
    </style>

    <style type="text/css">
    p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
    padding-top: 200em;
    }
    </style>

  2. #2
    Join Date
    Dec 2007
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Correct CSS

    This should be it.

    Code:
    <style type="text/css">
    .dropmenudiv_a{
    position:absolute;
    top: 0;
    border: 0px solid #980E10; /*THEME CHANGE HERE*/
    border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
    border-bottom-width: 0;
    font:normal 12px Arial;
    line-height:18px;
    z-index:100;
    background-color: #980E10;
    width: 200px;
    visibility: hidden;
    }
    
    
    .dropmenudiv_a a{
    width: auto;
    display: block;
    text-indent: 5px;
    border-top: 0 solid #FDE8E9;
    border-bottom: 1px solid #FDE8E9; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    color: white;
    }
    .dropmenudiv_a a.sub_bottom{
    width: auto;
    display: block;
    text-indent: 5px;
    border-top: 0 solid #678b3f;
    border-bottom: 0px solid #678b3f; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    color: white;
    background: transparent url(sub_bottom.gif) bottom left no-repeat;
    }
    
    * html .dropmenudiv_a a{ /*IE only hack*/
    width: 100%;
    }
    
    .dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
    background-color: #8a3c3d;
    color: white;
    }
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .solidblockmenu{
    
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Arial;
    width: auto;
    border: 0px solid #625e00;
    border-width: 0px 0;
    background: transparent url(blockdefault.gif) center center repeat-x;
    }
    
    .solidblockmenu li{
    display: inline;
    }
    
    .solidblockmenu li a{
    float: left;
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: 1px solid white;
    }
    .solidblockmenu a.left{
    float: left;
    color: white;
    padding: 9px 11px ;
    text-decoration: none;
    border-right: 1px solid white;
    background:url(blockdefault_left.gif)  top left no-repeat;
    }
    
    .solidblockmenu a.right{
    float: left;
    color: white;
    padding: 9px 11px 9px 11px;
    text-decoration: none;
    border-right: 0px solid white;
    background:url(blockdefault_right.gif)  top right no-repeat;
    }
    
    .solidblockmenu li a:visited{
    color: white;
    }
    
    #blockmenu a:hover.left{background: transparent url(blockactive_left.gif) top left no-repeat;}
    #blockmenu a:hover.right{background: transparent url(blockactive_right.gif) top right no-repeat;}
    
    #blockmenu a#current{background: transparent url(blockactive_right.gif) top right no-repeat;}
    
    
    
    .solidblockmenu li a:hover, .solidblockmenu li .current{
    color: white;
    background: transparent url(blockactive.gif) center center repeat-x;
    }
    
    
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
    padding-top: 1em;
    }
    </style>

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
  •