I'm having a nightmare trying to figure out how to edit the CSS to create a dropdown menu from existing css at http://www.tpw.uk.com

 

Below is the CSS for the #header and #mainnav - could someone please help and point out where I need to add the dropdown bits? I'm getting really confused and nothing seems to work

 

 

/**

header

*******************/

 

#header {

background:url(images/bgHeader.jpg) no-repeat center top;

height:274px;

}

 

#header h1

{

float:right;

width:280px;

height:200px;

margin:0 0 21px 0;

}

 

#header h1 a

{

display:block;

width:280px;

height:200px;

text-indent:-9999px;

}

 

#header h2

{

margin:0 0 0 0;

color:red;

float:left;

text-indent:-9999px;

}

 

#header #mainNav

{

/*clear:both;*/

float:left;

width:750px;

height:52px;

}

 

#header #mainNav li

{

display:block;

float:left;

margin-right:30px;

width:auto;

}

 

#header #mainNav li#menu-item-56

{

width:87px;

}

 

#header #mainNav li#menu-item-54

{

width: 86px;

}

 

#header #mainNav li#menu-item-53

{

width: 76px;

}

 

#header #mainNav a

{

font-size:14px;

line-height:14px;

text-transform:uppercase;

text-decoration:none;

color:#000;

font-weight:bold;

padding-top:13px;

display:block;

}

 

#header #mainNav li.current_page_item a,

#header #mainNav li.current_page_parent a,

#header #mainNav li a:hover

{

background:url(images/bgMenuActive.jpg) no-repeat center top;

color:#f2152a;

}

 

 

#header .social

{

width:171px;

float:right;

margin:13px 0 0 0;

}

 

#header .social li

{

margin:0 0 0 9px;

}

Try with this CSS & HTML

 

CSS

 

#menu-main ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#menu-main ul li {
display: block;
position: relative;
float: left;
}
#menu-main li ul {
display: none;
}
#menu-main ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
#menu-main ul li a:hover {
background: #3b3b3b;
}
#menu-main li:hover ul {
display: block;
position: absolute;
}
#menu-main li:hover li {
float: none;
font-size: 11px;
}
#menu-main li:hover a {
background: #3b3b3b;
}
#menu-main li:hover li a:hover {
background: #1e7c9a;
}
</style>

HTML

 

<div id="menu-main">
 <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
     <ul>
       <li><a href="#">Loream Ipsum Link</a></li>
     </ul>
   </li>
   <li><a href="#">Contact</a>
     <ul>
       <li><a href="#">Loream Ipsum Link</a></li>
     </ul>
   </li>
   <li><a href="#">blog</a></li>
 </ul>
</div>

 

Just need to make little change in color as per your requirement.