jettrue:
You will need to give each section its own id in includes/templates/YOUR_TEMPLATE/common/tpl_drop_menu.php
Like so:
<li class="submenu"
[B]id="catalog"[/B]><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>
<li class="submenu"
[B]id="categories"[/B]><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a>
<li class="submenu"
[B]id="information"[/B]><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_INFORMATION; ?></a>
<li
[B]id="contact"[/B]><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
<li class="submenu" [B]
id="cart"[/B]><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
<li i
[B]d="cart"[/B]><a class="noLine" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
```
>
> Then you can give them each their own image in the css.
alright I got the images to work and everything is fine in Firefox, but in IE 6 the images and dropdown menus are all justified to the right. how can i make them justified to the left like they should be?
here is my css file, this is my website http://www.kingpinstatus.com
body {
behavior: url(includes/csshover.htc);
}
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/
/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/
/*red */
div#dropMenu ul.level2 a:hover {
color: #FFFFFF important;
background-color: #FFFFFF; /*background:#DC262E;originally 650302, then beigeF7E2AD*/
}
/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
div#dropMenu {
width:70em;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}
div#dropMenu ul {
margin:0;
padding:0;
}
div#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
line-height:1em;
width:14.285%;
*width:14.255%;
}
div#dropMenu ul.level1 {
width:70em;
margin:0 auto;
text-align:center;
background:url(../images/menubg.jpg) repeat-x; /*background color of top menu when NOT selected. */
z-index:1000;
float:left;
height:33px;
}
div#dropMenu ul.level1 ul.level2 li a {background-image:none;} /*added per jadetrue*/
div#dropMenu li a {
display: block;
/* Hides from IE5-mac \*/
height: 1%;
/* End hide from IE5-mac */
padding: .6em 0;
text-decoration: none;
text-transform:uppercase;
color:#ffffff;
text-align:left;
text-indent:-9000px;
}
div#dropMenu ul li ul li a {text-indent:0!important;}
a.shop {
background: #993300 url(../buttons/english/boxhead-categories.gif) no-repeat;
background-image: url(../buttons/english/boxhead-categories.gif);
}
#navColumnTwo #categories a {background:none;}
div#dropMenu ul.level1 li {background: url(../images/menubg.jpg) no-repeat;}
div#dropMenu ul.level1 ul.level2 li {background-image:none;}
div#dropMenu li:hover {}
/* div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}url(../images/boxhead-categories.gif) 95% 50% no-repeat originally commented out*/
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {border:none;}
div#dropMenu>ul a {width: auto;z-index:1000;}
div#dropMenu ul ul {display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;z-index:1000;} /*originally 12em;, then 12.6em*/
div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} /*orig commented out*/
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {position: absolute; width: 12em;display:block;z-index:1000;} /*originally 12em;*/
div#dropMenu ul.level2 {
background:#4f4f4f; /*originally #4f4f4f;*/
z-index:1000;
position:absolute;
left:0;
}
div#dropMenu ul.level3,
div#dropMenu ul.level4,
div#dropMenu ul.level5,
div#dropMenu ul.level6,
div#dropMenu ul.level7,
div#dropMenu ul.level8{
top: 0;
left: 12em; /*originally 12em;*/
background:#4f4f4f;
}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0em;color: white; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}
.clearBoth {
clear:both;
height:0;
font-size:0;
line-height:0;
}
#categories a, #categories a:hover {
background-image: url(../images/navbar_shop.gif);
background-repeat: no-repeat;
background-position: center-y;
}
#cart a, #cart a:hover{
background-image: url(../images/navbar_cart.gif);
background-repeat: no-repeat;
background-position: center;
}
#catalog a, #catalog a:hover {
background-image: url(../images/navbar_home.gif);
background-repeat: no-repeat;
background-position: center;
}
#information a, #information a:hover {
background-image: url(../images/navbar_info.gif);
background-repeat: no-repeat;
background-position: center;
}
#contact a, #contact a:hover {
background-image: url(../images/navbar_contact.gif);
background-repeat: no-repeat;
background-position: center;
}
#account a, #account a:hover {
background-image: url(../images/navbar_account.gif);
background-repeat: no-repeat;
background-position: center;
}
