Hello, could some please help with this drop down menu? I basically copied all chucks from Muddydogpaws.com and edited all tags to work in Revo and I have the menu generating but I cant figure out how to style it like the original nav css. Live link in process please be gentle
http://www.stjosephparishhanover.org/ Here is the orignial nav css..
#menu5 {
float:right;
width:39%;
position:relative;
clear:right;
margin-top:10px;
margin-right:0;
padding:0;
}
#menu5 ul {
list-style-type:none;
overflow:hidden;
}
#menu5 ul li {
float:left;
margin-left:15px;
color:#fff;
}
#menu5 ul li:first-child {
margin-left:0;
}
#menu5 ul li a {
color:#fff;
display:block;
font-size:.85em;
font-weight:500;
text-align:center;
text-decoration:none;
text-transform:none;
width:98px;
padding:4px 0;
}
ul.sub-nav {
margin-left:-30px;
margin-right:0;
list-style:none;
font-size:1.1em;
padding:0;
}
ul.sub-nav li {
border-bottom:1px dotted #909090;
}
ul.sub-nav li a {
text-decoration:none;
display:block;
padding:3px 2px;
}
ul.sub-nav li.nav-selected a {
color:#000;
font-weight:700;
}
ul.sub-nav li li {
border-bottom:none !important;
color:#777;
font-size:0.9em;
}
ul.sub-nav li ul {
margin-top:0;
margin-bottom:0.5em;
}
ul.sub-nav li li a {
padding:0;
}
#main_menu {
float:left;
width:100%;
background:#2d221c;
margin-top:35px;
line-height:normal;
}
#main_menu ul {
list-style:none;
margin:0;
padding:5px 10px 0;
}
#main_menu li {
float:left;
background:url("../images/left.gif") no-repeat left top;
margin:0;
padding:0 0 0 28px;
}
#main_menu a {
display:block;
background:url("../images/right.gif") no-repeat right top;
text-decoration:none;
font-weight:700;
color:#92A2AC;
float:none;
padding:9px 28px 4px 0;
}
#main_menu a:hover {
color:#A56060;
}
#main_menu #current {
background-image:url("../images/left_on.gif");
}
#main_menu #current a {
background-image:url("../images/right_on.gif");
color:#A56060;
}
div#horiz-menu {
position:relative;
z-index:50;
height:30px;
}
div#horiz-menu .wrapper {
position:relative;
}
#horiz-menu li li {
margin:0;
}
div#horiz-menu li li span,div#horiz-menu li.active li span,div#horiz-menu li:hover li span {
background:none;
}
.nav {
line-height:.85;
float:left;
margin-bottom:1.5em;
position:relative;
}
.nav ul {
background:#fff;
padding:0;
}
.nav li {
float:left;
list-style:none;
position:relative;
}
.nav li li a {
display:block;
text-decoration:none;
background-image:none;
float:none;
width:120px;
color:#fff;
text-transform:uppercase;
padding:.25em 0 .25em 2em;
}
div#horiz-menu li li a {
height:30px;
line-height:30px;
color:#fff;
}
.nav li ul {
float:none;
left:-999em;
position:absolute;
width:175px;
z-index:5;
color:#fff;
}
.nav li:hover ul,.nav li.sfHover ul {
left:5px;
top:42px;
}
.nav li:hover li ul,.nav li.sfHover li ul,.nav li li:hover li ul,.nav li li.sfHover li ul,.nav li li li:hover li ul,.nav li li li.sfHover li ul {
top:-999em;
}
.nav li li:hover ul,.nav li li.sfHover ul,.nav li li li:hover ul,.nav li li li.sfHover ul,.nav li li li li:hover ul,.nav li li li li.sfHover ul {
left:178px;
top:0;
width:175px;
}
.nav li li {
position:relative;
float:none;
width:175px;
background:#e0e0cd;
border-bottom:1px solid #cdcdbb;
border-right:1px solid #cdcdbb;
border-left:1px solid #cdcdbb;
color:#fff;
}
div#horiz-menu ul {
margin:0;
padding:0;
}
div#horiz-menu li {
float:left;
list-style:none;
color:#fff;
margin:0;
padding:0 2px 0 0;
}
div#horiz-menu a {
display:block;
float:left;
height:34px;
line-height:38px;
font-weight:700;
text-decoration:none;
text-transform:uppercase;
color:#fff;
padding:0 25px;
}
body:nth-of-type(1) #horiz-menu a {
height:35px;
}
body:nth-of-type(1) #horiz-menu {
padding-top:1px;
}
#horiz-menu .nav li.current a,#horiz-menu .nav li a:hover {
color:#322620;
}
.nav li li:hover,.nav li li.sfHover,#horiz-menu li:hover li:hover,#horiz-menu li.sfHover li.sfHover,#horiz-menu li.active li.active {
background:#d7d7c4;
}
#horiz-menu li:hover li a.daddy:link,#horiz-menu li.sfHover li a.daddy:link,#horiz-menu li:hover li a.daddy:visited,#horiz-menu li.sfHover li a.daddy:visited {
background:url(../images/bullet-sucker.png) 100% 50% no-repeat;
}
.nav li.sfHover,.nav li:hover,.nav li.current {
background:url(../images/menu2-r.png) 100% 0 no-repeat;
}
.nav li.sfHover a,.nav li:hover a,.nav li.current a {
background:url(../images/menu2-l.png) 0 0 no-repeat;
}
div#horiz-menu li:hover li,div#horiz-menu li.sfHover li,div#horiz-menu li.active:hover li,div#horiz-menu li.active.sfHover li,div#horiz-menu li:hover li a,div#horiz-menu li.sfHover li a,div#horiz-menu li.active:hover li a,div#horiz-menu li.active.sfHover li a {
background-image:none;
}
Here are my chunks
cssplay_parentRow
<li><a [[+wf.classes]] href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>
<!--[if lte IE 6]>
<a class="sub" href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]
<table><tr><td>
<![endif]-->
[[+wf.wrapper]]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
cssplay_outer
<div[[+wf.classes]]>
<ul>
[[+wf.wrapper]]
</ul>
</div>
cssplay_inner
<ul>
[[+wf.wrapper]]
</ul>
cssplay_row
<li[[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
cssplay_dropdown
<link rel="stylesheet" media="all" type="text/css" href="assets/sj/css/dropdown.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/sj/css/dropdown_ie.css" />
<![endif]-->