Log in

View Full Version : CSS Drop down menu - Please Help!!!



eman
10-19-2007, 03:00 AM
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>

A800
01-09-2008, 07:20 PM
This should be it.



<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>