JavaScript Menu, DHTML Menu Powered By Milonic
style 1   style 2
applies padding in menuStyle using css applies different padding to the links item
.menuOff1{
padding-top:8px;padding-right:3px;padding-bottom:1px;padding-left:10px; }

.menuOn1{
padding-top:8px;padding-right:3px;padding-bottom:1px;padding-left:10px; }		 .menuOff2{
padding-top:2px;padding-right:3px;padding-bottom:2px;padding-left:20px; }

.menuOn2{
padding-top:2px;padding-right:3px;padding-bottom:2px;padding-left:20px; }
style 3 style 4
Note: coding border in the css class gives a border that goes around each item, not the outside of the menu. This means that it will look as if the border is double between items. This is because each item has its own surrounding border. This example has had the border color changed for the on state so this will show. Note: using background-image will not place a background in the menu, it will place a background in each separate item, equivalent to using the bgimage property not the menubgimage.

.menuOff3{
background-color:#FFCC99;
color:#000000;
font-style:normal;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:12px;
text-align:center;
border-style:solid;
border-width:1px;
border-color:#999999;
margin:0px;
padding:2px;
}

.menuOn3{
background-color:#ddffdd;
color:#000099;
font-style:normal;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:12px;
text-align:center;
border-style:solid;
border-width:1px;
border-color:#669933;
margin:0px;
padding:2px;
}		 .menuOff4{
background-image:url(style_bg4.gif); color:#ffffff;
font-style:normal;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:12px;
text-align:center;
border-style:solid;
border-width:1px;
border-color:#33FFFF;
margin:0px;
padding:2px;
}

.menuOn4{ background-image:url(style_bg4.gif); color:#FFCCFF;
font-style:normal;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:12px;
text-align:center;
border-style:solid;
border-width:1px;
border-color:#33FFFF;
margin:0px;
padding:2px;
}
style 5style 6
setting different background images for the off and on classes emulates the bgimage and overbgimage properties of the menu Using css it is possible to set a background color for the off state of the menu and a background image for the on state.

.menuOff5{
background: #FFF2E1 url(style_bg5.gif); color:#990066;
font-style:normal;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:12px;
text-align:center;
margin:0px;
padding-top:2px;
padding-right:6px;
padding-bottom:2px;
padding-left:6px;
}

.menuOn5{
background: #FFF2E1 url(style_bg5_over.gif); color:#FFCC99;
font-style:normal;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:12px;
text-align:center;
margin:0px;
padding-top:2px;
padding-right:6px;
padding-bottom:2px;
padding-left:6px;
}
.menuOff6{
background: #990066;
color:#FFF2E1;
font-style:normal;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:12px;
text-indent:5px;
border-style:solid;
border-width:1px;
border-color:#FFF2E1;
margin:0px;
padding:2px;
width:70px;
}

.menuOn6{
background: #FFF2E1 url(style_bg6_over.gif); color:#E6C697;
font-style:italic;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:12px;
text-indent:5px;
border-style:solid;
border-width:1px;
border-color:#FFF2E1;
margin:0px;
padding:2px;
width:70px;
}
style 7 and 7a - This menu contains submenus and more than one menu style. The main menu is styled using all css codes. The submenus are styled using a combination of css and menu style properties for the off state and only css for the on state.
The menu uses two styles, one for the main menu and one for the submenu. When using css, creating different styles for different menus, and both mouseOn and and mouseOff properties are desired then two classes must be created for each menu style. This main menu uses background images for the off and on states. The submenu uses both css styling and menu styling for background images. Since using the css property background-image places that background into each item, to get a background on the full menu the menu property menubgimage is used in the menuStyle7a section of the menu_data.js file. In conjunction with that a css property of background image used in the menuOn class. This keeps the menubgimage always visible and the 'item' background image is visible in mouse over state. Mouse over the submenu items to see the image coded for the menuOn state and still see the menubgimage showing in the other items.
7 is for the main menu

.menuOff7{
background: #569696 url(style_bg7.gif);
color:#d1e9e9;
font-style:normal;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:12px;
border-style:solid;
border-width:0px;
border-color:#FFF2E1;
margin:0px;
padding:2px;
width:100px;
}

.menuOn7{
background: #7cb7b7 url(style_bg7_over.gif);
color:#477b7b;
font-style:italic;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:12px;
border-style:solid;
border-width:0px;
border-color:#FFF2E1;
margin:0px;
padding:2px;
width:100px;
}

7a is for sub menus

.menuOff7a{
color:#569EA7;
font-style:normal;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:11px;
margin:0px;
padding:3px;
height:20px;
}

.menuOn7a{
background: #FFF2E1 url(style_bg7a_over.gif);
color:#477b7b;
font-style:normal;
font-weight:bold;
font-family:arial,tahoma,serif;
font-size:11px;
margin:0px;
padding:3px;
height:20px;
}
DOWNLOAD the examples with stylesheet and menu data file