CSS Dropdown menu for the header- With Categories!

[jettrue]

Hi, I am working on my zen cart site and I have searched the forums and no answer. I installed the css_horizontal_drop_down_menu_1-5
and I changed the CSS and content to what I wanted for my site, but it is not displaying properly in Internet Explorer 7. It works fine in Firefox and Safari. I am sure it is a CSS issue and I have tried to fix it to no avail. I did try to make the text smaller thinking it may why IE is pushing the content to two lines, nothing changed. I tried removing some of the links to see if there were too many and that was causing the issue, but it only looked worse in IE and worse in Firefox, which was strange. I keep reading in the forums that this add-on looks beautiful in IE. Does anyone have any advice?


The development site is live at http://www.divaliciouschocolate.com/dev/store/
It is about 75% complete and needing more CSS tweaking and images added so please remember it is a work in progress....

Mine is a new installation Zen Cart 1.3.8a
My website is currently only locally on my computer
Server OS: Windows NT DELL-024B1D4ABD 5.1 build 2600
Database: MySQL 5.0.51a
Database Host: localhost (127.0.0.1)
PHP Version: 5.2.5 (Zend: 2.2.0)
HTTP Server: Apache/2.2.8 (Win32) DAV/2 mod_ssl/2.2.8 OpenSSL/0.9.8g mod_autoindex_color PHP/5.2.5

Thanks for your help and I look forward to hearing back from you

-- Jackie

Hi There,

first of all, you have a ton of drop menu items... it may be difficult to fit them all.

Now notice, that this section in stylesheet_header_menu.css starts out looking like this:

div#dropMenu li {
	position:relative;
	list-style:none; 
	margin:0; 
	float:left; 
	line-height:1em;
	width:16.667%;
	*width:16.649%;
	}

This is designed for 6 drop down menu items across. Now that you've decided to make it 8 items across, you need to change that 16.667 and 16.649 to reflect your change. 100 / 6 = 16.667, 100 / 8 = 12.5. So your section above should look something like this (the *width:16.649 is for IE only, it needs to be a bit smaller to fit):

div#dropMenu li {
	position:relative;
	list-style:none; 
	margin:0; 
	float:left; 
	line-height:1em;
	width:12.5%;
	*width:12.25%;
	}

You can try adjusting the 12.25 to a slightly smaller number if it doesn't work.

You currently have this:

div#dropMenu li {
	position:relative;
	list-style:none; 
	margin:0; 
	float:left; 
	line-height:1em;
	width:auto;
	margin-right:2em;
	padding-left: .1em;
	*width:16.649%;
	}

Simply replace this with the chunk above.