We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 9486
    • 39 Posts
    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 smiley 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]-->
    
      • 9486
      • 39 Posts
      Wayfinder call:
      [[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]]
        • 19369
        • 1,098 Posts
        For aligning the dropdown menu I think you need to open dropdown.css on line 10 and play with the "top" value. I suggest you install firebug plugin for firefox, it is very easy to change these things once you understand how to use it.
        .menu ul li:hover ul {
            display: block;
            left: 0;
            position: absolute;
            top: 21px;
            width: 105px;
        }
        [ed. note: microcipcip last edited this post 14 years, 7 months ago.]
          • 9486
          • 39 Posts
          Thanks for that! One last question, how could I style it like on the original template? If you hit anyone of the links you can see the original layout. Thanks for your time!
            • 19369
            • 1,098 Posts
            It is not simple to explain, there are lots of css files (some of them repeated two times, like css/ie.css) and they override each other. The easiest way would be to open firebug toolbar with firefox and copy the code which works chunk by chunk (firebug shows you what css property is being overridden), replace it in the dropdown.css and refresh the page each time to see what happens, but you need a basic understanding of how css work to do it right.

            From firebug I can see, for example, that the rounded corners are made on navigation.css line 253, but probably there is a lot more to copy/paste/replace.
              • 9486
              • 39 Posts
              Perfect thats exactly what I needed and thank you for the firebug explanation!