CSS Dropdown menu for the header- With Categories!

[jamesdavid]

How can you make your top categories so when you are on there page (after you click them) they change colour?

its not using this menu but this site does what im talking about;
http://www.inksale.com/index.php?mai...index&cPath=32


When you are on the categories page the link goes turquoise blue. Whats also cool but probably harder is that the link stays a different colour when you are in one of its sub-categories.

[Edm]

Thanks for the advise Jade.
Regards
Eddie

[jettrue]

How can you make your top categories so when you are on there page (after you click them) they change colour?

its not using this menu but this site does what im talking about;
http://www.inksale.com/index.php?mai...index&cPath=32


When you are on the categories page the link goes turquoise blue. Whats also cool but probably harder is that the link stays a different colour when you are in one of its sub-categories.

I know what you're talking about, but its not possible, not in the way zen cart handles links. There may be some way to do it via javascript, but I haven't the time or inclination to try to implement it, sorry!

[jamesdavid]

Thanks anyway for the answer.
james

[welchyboy]

I changed the Home link to <li><a href="http://www.wpc-consulting.com/~stxmill/">Home</a></li>
It didn't seem to change anything. I changed this link in the tpl_drop_menu.php and it seems to not have made any difference. Also if you could look at my photo gallery page...I am not sure why but the flash gallery on some computers seem to be larger than normal and dont work. However on my computer and work and home it works perfectly. Any ideas....

[jettrue]

I changed the Home link to <li><a href="http://www.wpc-consulting.com/~stxmill/">Home</a></li>
It didn't seem to change anything. I changed this link in the tpl_drop_menu.php and it seems to not have made any difference. Also if you could look at my photo gallery page...I am not sure why but the flash gallery on some computers seem to be larger than normal and dont work. However on my computer and work and home it works perfectly. Any ideas....

Another error I found...

<div id="dropMenuWrapper">
  <div id="dropMenuWrapperb">
    <div id="dropMenuWrapperc">

      <div id="dropMenuWrapperd">
        <div id="dropMenu">
          <ul class="level1">
           
            

            </li>
            <li><a href="http://www.wpc-consulting.com/~stxmill/">Home</a></li>
			<li><a href="http://www.wpc-consulting.com/~stxmill/index.php?main_page=about_us&amp;zenid=842e7cd1b8848968bcba00eb132c766a">About Us</a></li>
				<li><a href="http://www.wpc-consulting.com/~stxmill/index.php?main_page=history&amp;zenid=842e7cd1b8848968bcba00eb132c766a">HISTORY</a></li>

					<li><a href="http://www.wpc-consulting.com/~stxmill/index.php?main_page=fund_raising&amp;zenid=842e7cd1b8848968bcba00eb132c766a">FUND RAISING</a></li>
						<li><a href="http://www.wpc-consulting.com/~stxmill/index.php?main_page=the_windmill&amp;zenid=842e7cd1b8848968bcba00eb132c766a">THE WINDMILL</a></li>
							<li><a href="http://www.wpc-consulting.com/~stxmill/index.php?main_page=photo_gallery&amp;zenid=842e7cd1b8848968bcba00eb132c766a">PHOTO GALLERY</a></li>
								



        </div>
      </div>
    </div>
  </div>

</div><!-- end dropMenuWrapper-->

You have an </li> at the beginning of it, which needs to go, and its missing the closing </ul>.

[welchyboy]

OK I have fixed that and cleared my cache and reloaded the page unfortuantley still doing the same thing...Do you see the red x's on your PC? It is very strange why would it work on my computer but not not work on the majority of others? I appreciate you looking over this for me. Let me know if you spot anything else that i can try to see if we can get this sorted out. Again thanks for everything.

[countrycharm]

Jade could you look at my site in IE and tell me whats going on with it. I mean the drop down menu looks good in FF but when you point your mouse at home in IE there is a white space on the right of the menu. I don't know whats going on. Thank for your help.

My site

[Edm]

Hi Jade'
Well did what you said all good thanks. I have a different problem, I thought it was in SmartBG whowever I have uninstalled both SmartBg and CSS Drop from my files then reinstalled, this time SmartBg first (header_bg) all good, different images loading correct. Installed CSS Drop and my SmartBg header images repeat down my page.
Can you please check my code and see what you think.
tpl_header

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>
<!--Smart Backgrounds-->
<?php $smart_image = '';
if ($current_page_base == 'index' or $current_page_base == 'product_info') { //add _ and top cat id to bg filename only if cat bg image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]) . '.jpg'))?'_' . str_replace(strstr($_GET[cPath],'_'),'',$_GET[cPath]):'';
} else { //add _ and page base to bg filename only if page bg image exists
  $smart_image = (file_exists(DIR_WS_TEMPLATE_IMAGES . 'smartbg_' . $current_page_base . '.jpg'))?'_' . $current_page_base:'';
}?>
<!--/Smart Backgrounds-->
<div id="headerWrapper" class="smartBG<?php echo $smart_image;?>">

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
</div>

<!--eof-branding display-->

<!--bof-navigation display-->
<div id="navMainWrapper">
<!--bof-drop down menu display-->
<?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
<!--eof-drop down menu display-->
<div class="clearBoth"></div>
<div id="navMain">
    <ul class="back"> 
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
<div class="navMainSearch forward"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->
<!--eof-header logo and navigation display-->

<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->



<?php } ?>

stylesheet_css

body 

/*red passion*/ 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #800302!important;background:#ffffff;}

	
div#dropMenu {
	width:100%;
	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:16.667%;
	*width:16.649%;
	}
	
div#dropMenu ul.level1 {
	width:100%;
	margin:0 auto; 
	text-align:center;
	background:#800302; /*background color of top menu when NOT selected. */
	z-index:1000;
	float:left;
	}

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:center; 
	border-right:1px solid #ffffff;
	}	
	
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
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;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
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;}
div#dropMenu ul.level2 {background:#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; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;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;
{
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #3B3B39;
	background-color: #FFFFFF;
	background-image: url(../images/body_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #3B3B39;
	text-decoration: none;
	}
 
a:visited {
	color: #3B3B39;
	text-decoration: none;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #666666;
	}

a:active {
	color: #000000;
	}

h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-size: 1.1em;
	}

.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0.3em 3px;
	}

CODE {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1em;
	}

FORM, SELECT, INPUT {
	display: inline;
	font-size: 1em;
	margin: 0.1em;
	}

TEXTAREA {
	float: left;
	margin: auto;
	display: block;
	width: 95%;
	}

input:focus, select:focus, textarea:focus {
	background: #F0F8FF;

	}

FIELDSET {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px solid #7e0202;
	background-color: #fbf6d5
	}

LEGEND {
	font-weight: bold;
	padding: 0.3em;
	background-color: #7e0202;
	color: #FFFFFF;
	}

LABEL, h4.optionName {
	line-height: 1.5em;
	padding: 0.2em;
	}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
	margin: 0.5em 0.3em;
	}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}

LABEL.inputLabel {
	width: 11em;
	float: left;
	}

LABEL.inputLabelPayment {
	width: 15em;
	float: left;
	}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
	width: 12em;
	float: left;
	}

P, ADDRESS {
	padding: 0.5em;
	}

ADDRESS {
	font-style: normal;
	}

.clearBoth {
	clear: both;
	}

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9A9C86;
	}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #000000;
	}

.messageStackWarning, .messageStackError {
	background-color: #ff0000;
	color: #ffffff;
	}

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
	}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
	}

/*wrappers - page or section containers*/
#mainWrapper {

	text-align: left;
	width: 842px;
	vertical-align: top;
	background-image: url(../images/mainwrapper_tile.jpg);
	background-repeat: repeat-y;
	background-position: center;
	}

#logoWrapper {
    background-color: transparent;
    height:282px;
	}
	
#headerWrapper { background-image: url(../images/smartbg.jpg);}

#headerWrapper.smartBG_contact_us { background-image: url(../images/smartbg_contact_us.jpg);}

#headerWrapper.smartBG_privacy { background-image: url(../images/smartbg_privacy.jpg);}

#headerWrapper.smartBG_shippinginfo { background-image: url(../images/smartbg_shippinginfo.jpg);}
    background-repeat: no-repeat;
}

#contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {
	margin: 0em;
	margin-top: 15px;
	}
	

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 

#tagline {
	color:#ffffff;
	font-size: 1.4em;
	font-weight: bold;
	text-align : right;
	vertical-align: middle;
	padding-right: 30px;
	padding-top: 60px;
	}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

Note:

#headerWrapper.smartBG_shippinginfo { background-image: url(../images/smartbg_shippinginfo.jpg);}
    background-repeat: no-repeat;

Does not stop it from repeating, any advise greatly appreciated.

Kind Regards
Eddie

[mrcoolboy15]

Does anyone know with line of code in the CSS would be used to change the width of the drop down menu?

thanks