Here's my menu css - most is straight out of layout.css, but I put in custom.css 'cos it was going to be modified
/*---Nav Styles---*/
#top .main_menu #menu-main a {
border: none !important;
padding: 20px 24px 4px 24px;
text-transform: uppercase;
font-size: 16px;
color: #414042;
}
#top .main_menu #menu-main a:first-child {
padding: 20px 20px 4px 30px;
}
.main_menu{
clear:both;
position: relative;
z-index: 20;
padding:0;
line-height:30px;
height:15px;
margin:9px 0;
left:0;
}
.main_menu ul{
margin:0;
padding: 10px 0 0 0;
width: 760px;
}
.main_menu ul:first-child >li > ul{
border-top:none;
}
.main_menu .pointer_arrow_wrap{
display:none;
}
.main_menu ul:first-child > li{
line-height: 30px;
height: 30px;
}
.main_menu ul:first-child > li > a{
padding:0 15px;
}
#top .main_menu .menu li:first-child>a{
border:none;
}
.main_menu .menu li a strong {
display:block;
font-size:14px;
font-weight:normal;
cursor: pointer;
}
#top .main_menu .menu li{
float:left;
position:relative;
z-index:20;
float:left;
padding:0;
margin:0;
}
#top .main_menu .menu ul li{
padding:0 4px;
}
.main_menu .menu ul {
display: none;
margin-left:0;
left:0;
position: absolute;
top: 24px;
width: 168px;
z-index: 20;
cursor: pointer;
padding:4px 0;
}
#top .main_menu .menu li ul a{
width:130px;
height:auto;
float:left;
text-align:left;
line-height:23px;
padding:6px 0;
font-size: 12px;
min-height: 23px;
max-width: none;
text-decoration: none;
}
#top .main_menu #menu-main li ul li a{
position:relative;
z-index: 20;
display: block;
color: #fff;
}
#top .main_menu #menu-main li ul li{
background: #8F1009;
border-top: 5px solid #fff;
border-bottom: 2px solid #8F1009;
}
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
