Help with show_menu2 and css

[Backwash]

Thanks, I've been there before.  I was actually looking for that site the other day but couldn't remember the address.  I'll just go through each piece of the menu and step by step it out.  I appreciate the link!

[kweitzel]

Maybe have a look at this site for more references: http://www.cssmenus.co.uk/

cheers

Klaus

[Backwash]

Ok, using another template as an example and a lot of trial and error, I've managed to fit it in the designated area.  I can't figure out which tag to modify to vertically center and increase height to take up the full amount of space, though.

I'm using the following css for the menu:

Code Select Expand


ul.menu, li.menu {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}

/* Header menu */    
#header_menu {
   position: absolute;
   margin-left: 20px;
   background:#555;
}
#header_menu li {line-height: normal;}
ul#header_menu  {
   z-index: 10;
   clear: both;
}

#nav {
   height: 35px;
   background: #666;
   border-top-width: 0;
   border-bottom-width: 1px;
   border-bottom-style: none;
   border-bottom-color: #666;
   padding-top: 0px;
}
#nav ul {
   list-style-type: none;
   font-size: 100%;
   text-transform: uppercase;
   width: auto;
   /*
   (Disappearing List-Background)
   http://www.positioniseverything.net/explorer/ie-listbug.html
   */
   position: relative;
   margin: 0px;
}
#nav ul li {float: left; color: #fff; text-align: center; font-weight: normal;}
#nav ul li a {display: block; background: #666; padding: 5px 10px; padding-bottom: 4px; border-left: 1px solid #000; border-right: 1px solid #000; color: #fff; text-decoration: none;}

/* Root Level Link Formatting */
#nav ul li a:hover, #nav li a:focus {background: #d1d2d4; border-color: #fff; color: #4b4c4d;}
#nav li a:active, #nav ul li a.active {background: #d1d2d4; border-color: #fff; color: #4b4c4d;}

/* Current page Customisations*/
#nav li.menu-current a        {background: #000; color: #fff; border-bottom: 1px solid #000;}
#nav li.menu-current a        {font-weight: bold;}

/* 2nd Child menu */
#nav .menu li ul {position: absolute; width: 12em; margin: 0; display: none; text-transform: none; border: 1px solid #000; border-top: 0; font-size: 100%;}
#nav .menu li ul li {width: 12em; text-align: left; font-weight: normal; margin: 0; padding: 0; line-height: 1.2em;}
#nav .menu li ul a {width: 11.5em; padding: .6em .1em .6em .4em; background: #4b4c4d; color: #fff; border: 0;}

/* 2nd Child link hover */
#nav .menu li ul a:hover {color: #4b4c4d; background: #666; border: 0; color:#fff;}

/* Show and hide */
#nav .menu li:hover ul, #nav .menu li a:focus ul, #nav .menu li.subMenu ul {display: block;}
#nav .menu li ul ul { display: none;}
#nav .menu li:hover ul ul, #nav .menu li.subMenu ul ul {display: none;}
#nav .menu li:hover ul, #nav .menu li li:hover ul, #nav .menu li.subMenu ul, #nav .menu li li.subMenu ul {display: block;}


/* 3rd Child Menu Appreances */
#nav .menu li ul li ul li a     { width: 11.5em; padding: .6em .1em .6em .4em; background: #c6c6c6; color: #fff; }

/* Positioning the Pop-out Drops */
#nav li {position: relative;}

#nav ul ul ul {
   position: absolute;
   top: 1px;
   left: 100%;
}


It aligns the nav to the top left of the table.  I can reduce the height and add padding to the top, but it just centers it vertically (leaving space at the top and bottom).  I'd rather have it take up the full table space.  I know this is probably a crude way of centering it, but I was just trying to figure a way to make it work myself before asking...

[Backwash]

I'm hoping this is something more simple than I'm making it out to be.  I want to create a simple css drop down menu and allow the user to control the menu items or add/remove menu items through WB.

Normally, I would have an unordered list:

Code Select Expand


<ul id="nav">
     <li><a href="#">Home</a>         
     </li>     
   
     <li><a href="#">Random Info</a>
           <ul>
                 <li><a href="#">Info 1</a></li>
                 <li><a href="#">Info 2</a></li>
                 <li><a href="#">Info 3</a></li>
           </ul>
     </li>

<!-- etc. -->

</ul>

Then set up the styling in my css file.

In http://code.jellycan.com/sm2test/, I see the UDM4 example is the closest to that, but uses JS for the functionality of the menu.  It's then referenced for WB using:

Code Select Expand


<?php 
show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul class="udm" id="udm">'); 
?>


Will that work the same way for a full CSS menu?  How exactly would I structure the code for that?

Also, if there is an easier way to do this I would love any help.  I'm still learning as well, so forgive me if my questions are just ignorant.