Show Menu 2 Difficult to use

[daydreamer]

Maybe just me but I find it very hard to add custom drop down menus with show menu 2.
I'm not a coder but have tried and tried to add a menu for this

Code: [Select]

#main_menu {float:right;}
#menu {
float:right;
}
#main_menu ul li {padding:0px 9px; display:block; float:left; position:relative; background:url(../images/line_menu.png) no-repeat; z-index:200;}
#main_menu ul li .lb {width:5px; height:5px; display:none; overflow:hidden; position:absolute; left:0px; bottom:1px; background:url(../images/bg_menu_l_b.jpg) no-repeat; z-index:1000;}
#main_menu ul li .rb {width:5px; height:5px; display:none; overflow:hidden; position:absolute; right:0px; bottom:1px; background:url(../images/bg_menu_r_b.jpg) no-repeat;}
#main_menu ul li:first-child {padding-left:0px; background:none;}
#main_menu ul li a {display:block;}
#main_menu ul li a:hover {text-decoration:none;}
#main_menu ul li a span {display:block; cursor:pointer;}
#main_menu ul li a span span {height:30px; line-height:30px; padding:0px 16px; position:relative; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#828181;}
#main_menu ul li:hover {z-index:201;}
#main_menu ul li:hover a {background:url(../images/bg_menu_active_m.png) repeat-x;}
#main_menu ul li:hover a span {background:url(../images/bg_menu_active_l.jpg) no-repeat;}
#main_menu ul li:hover a span span {background:url(../images/bg_menu_active_r.jpg) no-repeat right; color:#ffffff;}
#main_menu ul li:hover ul {display:block;}
#main_menu ul li:hover .lb {display:block;}
#main_menu ul li:hover .rb {display:block;}
#main_menu ul li.active a {background:url(../images/bg_menu_active_m.png) repeat-x}
#main_menu ul li.active a span {background:url(../images/bg_menu_active_l.jpg) no-repeat;}
#main_menu ul li.active a span span {background:url(../images/bg_menu_active_r.jpg) no-repeat right; color:#ffffff;}

#main_menu ul li ul {width:177px; padding-bottom:9px; display:none; position:absolute; left:9px; top:28px; z-index:201; background:url(../images/bg_submenu_bottom.png) no-repeat left bottom;}
#main_menu ul li:first-child ul {left:0px;}
#main_menu ul li ul li {width:177px; padding:0px; padding-top:8px; display:block; background:url(../images/bg_submenu_mid.gif) repeat-y;}
#main_menu ul li ul li.top {height:4px; padding:0px; background:url(../images/bg_submenu_top.jpg) no-repeat;}
#main_menu ul li ul li a {margin:0px 5px; padding-left:18px; padding-top:7px; background:url(../images/arrow_submenu.gif) no-repeat 8px 12px !important; border-top:1px solid #f0f0f0; font-family:Arial, Helvetica, sans-serif; color:#737373;}
#main_menu ul li ul li a:hover {background:url(../images/arrow_submenu_on.blue.gif) no-repeat 8px 12px !important; color:#1191b0;}
#main_menu ul li ul li.first {padding-top:0px;}
#main_menu ul li ul li.first a {border-top:none;}

[Ruud]

This is the css for a menu with a lot of extra classes and span stuff in the html.

If you have working (demo) html with this css it would be helpfull.
It is more easy to work backwards from the output than trying to read the css and reverse engineer the browser behavour.

[daydreamer]

Thanks for the reply this is the html for the menu

Code: [Select]

<div id="main_menu">
                <ul>
                    <li class="active"><a href="/index.php"><span><span>Home</span></span></a>
                     
                         
                        </li>
                      <li><a href="#"><span><span>About Us</span></span></a></li>
                 
                       
                        <li><a href="#"><span><span>Services</span></span></a>
          <ul>
                            <li class="top"></li>
                            <li class="first"><a href="#">Child One</a></li>
                                <li><a href="#">Child Two</a></li>
                            </ul>
                        </li>
                     
                      <li><a href="#"><span><span>Blog</span></span></a></li>
                      <li><a href="#"><span><span>Contact Us</span></span></a></li>
                  </ul>
                   
                </div>