CSS Dropdown menu for the header- With Categories!

Woodymon:

As previously reported the settings offered by Jade did appear to not help.

Woody

Hi Woody,

Changing each menu item to a percentage will get rid of the space, and I think it will be a better way to go about it than you have. Here's the exact post with instructions on doing so (you can always find it by searching for "percentage" in this thread):

http://www.zen-cart.com/forum/showthread.php?p=390897

Sorry, I can't follow css without looking at its' visual expression, so I can't offer advice on your method. I'd reload the original stylesheet, and follow the instructions above.

CES:

Do you want to have a look at my shop and see if that is what you want? https://www.NicheLocks.com. If you want I can post my css to show what I did. (I can't remember if or what alterations I did make - lol.)

Hi Craig-

I like what you did with "dropmenu.gif". That is what I was looking for or something similar.

So is that a mod option or something custom?

For the site I'm working on I probably would want to create the gif to match background color so then the menu bar does not appear to go all the way across.

I just took a snapshot of your CSS but still not sure how you did it.

Yes it would be great if you could post any code and/or CSS changes used to customize your menu bar.

Thanks,

Woody.

jettrue:

Changing each menu item to a percentage will get rid of the space, and I think it will be a better way to go about it than you have.

Here's the exact post with instructions on doing so (you can always find it by searching for "percentage" in this thread):

http://www.zen-cart.com/forum/showthread.php?p=390897
Oops. I missed that one. Yes I like your way better than mine ;-)

I was previously understanding your "percentage" recommend was just to control the menu resizing and not anything to do with the centering. but now I think I understand.

I'll wait to see CES/Craig's updated code.

I like his idea of creating a gif file and adding to
#dropMenuWrapper

background:transparent url(../images/dropmenu.gif) repeat-x scroll 100%;

That fits in very well with how the Future Zen Template works.

Thanks again,
Woody

Woodymon:

if you could post any code and/or CSS changes used to customize your menu bar..
I just used firebug to capture your two relevant CSS files. I am investigating. Were there any menu bar mod code changes besides the CSS adjustments and the placeholder gif?

I see you're using a template based on one of jade's template creations (nice look by the way...very clean). I suspect Jade also has inside knowledge how well the menu integrates into that specific template. :wink2:

Woody

Woodymon:

I just used firebug to capture your two relevant CSS files. I am investigating. Were there any menu bar mod code changes besides the CSS adjustments and the placeholder gif?

I see you're using a template based on one of jade's template creations (nice look by the way...very clean). I suspect Jade also has inside knowledge how well the menu integrates into that specific template. :wink2:

Woody

Hi Woody,

I think I'm still trying to visualize your issue. As I mentioned, I'm a very visual person, and I always have a hard time working with offline sites. If I see it, I can usually figure it out quickly.

If I understand correctly, you want a menu that is centered. :-) Now, do you want the drop down items to start all the way to the left, and end all the way to the right, so that there is no empty menu space? Or do you want it centered with space between the menu and the edges of the site?

I also understand that you want the menu to match the background color of your site. Is it a solid color? If so, instead of using a gif, you can just give dropMenuWrapper a background color that matches your sites color.

I just looked at future zen, and I see that it has kind of an "open" background near the top. I also see that is a fluid site. So, you could give dropMenuWrapper and dropMenu the same background color of your site. Make dropMenuWrapper a width of 100%, give it the text-align:center AND margin:0 auto. Make dropMenu have a smaller width, like 90%. Do the percentage instructions I gave above. I think that'll get you close.

jettrue:

Or do you want it centered with space between the menu and the edges of the site?
Yes. It's just the extra space to the right causing me issues. When I look more closely at CSE's menu he also still has a bit of space to the right, but not much at all, and that is fine.

Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.

I just looked at future zen, and I see that it has kind of an "open" background near the top. I also see that is a fluid site.
It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).

So, you could give dropMenuWrapper and dropMenu the same background color of your site. Make dropMenuWrapper a width of 100%, give it the text-align:center AND margin:0 auto. Make dropMenu have a smaller width, like 90%. Do the percentage instructions I gave above. I think that'll get you close.

Already did something similar but not getting the centering happening due to that space to the right of the menu. I'll keep trying but waiting to hear back from CSE. Whatever he did he hit it pretty much on the bullseye.

Thanks again for the advice. Most appreciated.
Woody

Woodymon:

Yes. It's just the extra space to the right causing me issues. When I look more closely at CSE's menu he also still has a bit of space to the right, but not much at all, and that is fine.

Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.

It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).

Already did something similar but not getting the centering happening due to that space to the right of the menu. I'll keep trying but waiting to hear back from CSE. Whatever he did he hit it pretty much on the bullseye.

Thanks again for the advice. Most appreciated.
Woody

you might want to take a look at our menu. Ours runs 'side to side' (aka 100%) of the window, but you could easily change the percentage to suit, or use a transparent base wrapper and a color wrapper for the actual dropdowns. Perhaps the transparent base, with a color flip on mouseover/hover?

Woodymon:

Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated. I'm confused, why use a colored gif, if you can just set the background color?

background:#000000;

Woodymon:

It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).
You can change em's to pixels. Change the padding from em's to pixels, etc. Get rid of em's you get rid of resizing with font changes.

Woodymon:

Already did something similar but not getting the centering happening due to that space to the right of the menu.
Have you tried switching to percentages like my post? That gets rid of the extra space to the right of the menu.

Jade-

I uploaded original CSS (v. 1.2 dated Feb 23, 2007) and then made edits as you recommended in this thread on June 17, 2007 and presto. Just what I was looking for... mostly.

The menu centers well in both Firefox and IE6. But when I adjust type size in IE6 I get mixed results.

At small/smaller/larger/largest text sizes the menu stays on one line. Cool!

But in IE6 when set text size to medium, the menu wraps to two lines ("Shopping Cart" moved to under "Home"). Strange that this only happens at default medium type size in IE6? And only in IE6, does not wrap not in FF.

Any ideas? My current relevant CSS is below.

I still need to test IE7 when it goes online but that can wait.

Thanks for your assist.

Woody

#dropMenuWrapper {
	width: 100%; /* ORIG */
	height: 2.17em; /* ORIG */
	margin: 0; /* ORIG  */
	font-size: 1em; /* ORIG */
	padding-bottom: 1em; /*NOT IN ORIG */
	}
	
div#dropMenu {
	width:70em; /* ORIG */
	margin:0 auto; /* ORIG */
        text-align:center; /* ORIG */
	z-index:1000; /* ORIG */
	position:relative; /* ORIG */
	}

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

div#dropMenu ul.level1 {
	width:70em; /* ORIG */
	margin:0 auto; /* ORIG */
	background:#4F4F4F;  /* ORIG */
	text-align:center; /* ORIG */
	height:2.17em; /* ORIG */
	z-index:1000; /* ORIG */
	}

div#dropMenu li a {
	display: block; /* ORIG */
	/* padding: .6em 2em .6em 2em; */ /* ORIG */
	padding: .6em 0 .6em 0; /* by Jade */
	text-decoration: none; /* ORIG */
	text-transform: uppercase; /* ORIG */
	color:#ffffff; /* ORIG */
	text-align: center; /* ORIG */
	border-right:1px solid #ffffff; /* ORIG */
	border-left: 1px solid #ffffff; /* by jade  */
	}	

div#dropMenu ul.level2 {
	top: 2.17em; 
	background:#4f4f4f;
	z-index:1000;
	left:0; /* by jade */
	}

/*
div#dropMenu li a.noLine {
	padding-right:2em;
	border:none;
	} */

I have learned to take things one step at a time, especially when I am learning something new ;-)

When you recommended change em's to pixels I understood that had to do with resizing the menu objects but not anything to do with centering the menu on the page and maintaining all in one line. My first goal was to achieve centering and nowrapping. Then the undesirable effects resulting from type resizing could be dealt with next.

So when I have the IE6 wrapping issue solved (when type size id default medium) I will proceed changing em's to px.

But then there are fifteen or so em settings in the menu CSS file. Any recommends on what px sizes to change the em sizes to (based on orginal CSS)?

Thanks for any recommends,
Woody

Woodymon:

I have learned to take things one step at a time, especially when I am learning something new ;-)

When you recommended change em's to pixels I understood that had to do with resizing the menu objects but not anything to do with centering the menu on the page and maintaining all in one line. My first goal was to achieve centering and nowrapping. Then the undesirable effects resulting from type resizing could be dealt with next.

So when I have the IE6 wrapping issue solved (when type size id default medium) I will proceed changing em's to px.

But then there are fifteen or so em settings in the menu CSS file. Any recommends on what px sizes to change the em sizes to (based on orginal CSS)?

Thanks for any recommends,
Woody

No, changing em's to px's will help your resizing issues. Because if padding is in em's then as font size increases, the padding increases. IE's default font size is larger than firefox's, so it will wrap first.

The most important thing to adjust is this section:
padding: .6em 2em .6em 2em;

The 2em's are the left and right padding. Change that to px's, then the widths won't resize.

If the full menu width is in em's, then the full menu will resize with font size as well.

The rest of the em's you can probably leave alone.

OK, sorry for nor getting back sooner woody.

Here are my files:

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 li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
 

/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
	
#dropMenuWrapper {
	background: url(../images/dropmenu.gif) 100% 100% repeat-x;
/*background: rgb(79,79,79);*/
  /*border-top:0px solid #fff;*/
  width:100%;
	height:2.17em;
	margin:0;
	font-size:1em;
	}
	
div#dropMenu {
  	width:65em;
  	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;
	}
	
div#dropMenu ul.level1 {
	width:65em; 
	margin:0 auto; 
	text-align:center;
	background: url(../images/dropmenu.gif) 100% 100% repeat-x;
/*	background: rgb(79,79,79);*/
  height:2.17em;
	z-index:1000;
	}
	
div#dropMenu li a.lineright {border-right:1px solid #ffffff;}

div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% repeat-x;} */ 
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 2em .6em 2em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% repeat-x;} */
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 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {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;}
/*div#dropMenu li.submenu li.submenu {background: #737373;}*/
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 100% 50% no-repeat;}*/

And:

<!-- menu area -->

<div id="dropMenuWrapper">
  <div id="dropMenu">
    <ul class="level1">
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>
        <ul class="level2">
          <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_NEW); ?>"><?php echo HEADER_TITLE_NEW_PRODUCTS; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_SPECIALS); ?>"><?php echo HEADER_TITLE_SPECIALS; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_ADVANCED_SEARCH); ?>"><?php echo HEADER_TITLE_SEARCH; ?></a></li>
        </ul>
      </li>
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a>
        <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>
      
      </li>
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_INFORMATION; ?></a>
        <ul class="level2">
          <li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo HEADER_TITLE_SHIPPING_INFO; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo HEADER_TITLE_PRIVACY_POLICY; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo HEADER_TITLE_CONDITIONS_OF_USE; ?></a></li>
          <?php if (defined('FILENAME_SITE_MAP')) { ?>
          <li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>
          <?php } ?>
          <?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'true') { ?>
          <li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_GV_FAQ; ?></a></li>
		  <?php } ?>

		  <?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'true') { ?>
          <li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_UNSUBSCRIBE; ?></a></li>
		  <?php } ?>
		  <?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>
        </ul>
      </li>
      <li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
        <ul class="level2">
          <?php if ($_SESSION['customer_id']) { ?>
          <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
          <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_NEWSLETTERS, '', 'SSL'); ?>"><?php echo HEADER_TITLE_NEWSLETTERS; ?></a></li>
          <?php } else { ?>
          <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li>
          <?php } ?>
        </ul>
      </li>
      <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
      <li class="submenu"><a class="lineright" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
        <ul class="level2">
          <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
        </ul>
      </li>
      <?php } else { ?>
      <li><a class="lineright" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
      <?php } ?>
    </ul>
  </div>
</div>
<div class="clearBoth"></div>

If anybody looks at this and thinks "what a plonker Craig, you should have done this" please go ahead and tell me.

Sorry I can't remember what alterations I did and what they were for woody. I hope this helps anyhow.

Craig

Just a lot of random trial and error. Two steps forward one step back.

Now in IE6 menu stays on one line and no wrapping and no resizing, when browser type size changed.

And now in Firefox the menu stays on one line and never wraps.

But when FF browser type size is changed the menu increases/decreases in size.

Understanding the relevant diffs in FF and IE6 is my main issue now.

Some more trial and error to do. And also test in IE7 and Safari and Opera and...

Thanks for all the suggestions.

Woody

Woodymon:

Just a lot of random trial and error. Two steps forward one step back.

Now in IE6 menu stays on one line and no wrapping and no resizing, when browser type size changed.

And now in Firefox the menu stays on one line and never wraps.

But when FF browser type size is changed the menu increases/decreases in size.

Understanding the relevant diffs in FF and IE6 is my main issue now.

Some more trial and error to do. And also test in IE7 and Safari and Opera and...

Thanks for all the suggestions.

Woody

You may never be able to get all browsers look exactly the same.

Will your site be online soon? LOL, that would help a ton.

What's your set width for dropMenuWrapper and dropMenu?

What's your font size for the menu?

jettrue:

What's your set width for dropMenuWrapper and dropMenu? What's your font size for the menu?

The main thing is all now stays on one line and does not wrap in either IE6 or FF. With your assistance I have succeeded. Thanks!

Anyone aware of a good web resource explaining how FF, IE6 and IE7 respond to CSS and providing workarounds and hacks?

Below is my latest relevant CSS. Still some "em" values to convert to "px" but I'm slowly getting there (no real need to convert for the submenu items).

Woody

#dropMenuWrapper {
	width: 100%; /* ORIG */
	height: 5px; /* ORIG */
	margin: 0; /* ORIG  */
	font-size: 11px; /* ORIG */
	padding-bottom: 1px;  
	}
	
div#dropMenu {
	width: 840px; 
	margin: 0 auto; /* ORIG */
	text-align: center; /* ORIG */
	z-index: 1000; /* ORIG */
	position: relative; /* ORIG */
	}

div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
	
div#dropMenu li { 
	position: relative; /* ORIG */
	list-style: none; /* ORIG */
	margin: 0; /* ORIG */
	float: left; /* ORIG */
	line-height: 1em; /* ORIG */
	width: 16.667%; /* width added by jade */
	background: #A5B7E9; /*NOT IN ORIG */
	}
	
div#dropMenu ul.level1 {
	width: 70em; /* ORIG  NOT ME */
	margin: 0 auto; /* ORIG  NOT ME */
	text-align: center; /* ORIG */
	height: 2.17em; /* ORIG */
	z-index: 1000; /* ORIG */
	}

div#dropMenu li a {
	display: block; /* ORIG */
	padding: 5px 0 5px 0; /* by Jade */
	text-decoration: none; /* ORIG */
	text-transform: uppercase; /* ORIG */
	color: #ffffff; /* ORIG */
	text-align: center; /* ORIG */
	border-right: 1px solid #ffffff; /* ORIG */
	border-left: 1px solid #ffffff; /* by jade  */
	}	

div#dropMenu ul.level2 {
	top: 3px;
	background: #4f4f4f;
	z-index: 1000;
	left: 0; /* recommend by jade */
	}

Thanks :)

I would love to have my site look something like this one
http://makeupconnection.com/

I don't know how to get rid of the categories on the side panel of mine http://www.the-unique-boutique.com and
I don't know how to add the other links they
(http://makeupconnection.com/) have at the top :)

If you can help, please help me. Down on hands and knees begging :)

Thanks
Sandra

Woodymon:

The main thing is all now stays on one line and does not wrap in either IE6 or FF. With your assistance I have succeeded. Thanks!

Anyone aware of a good web resource explaining how FF, IE6 and IE7 respond to CSS and providing workarounds and hacks?

Below is my latest relevant CSS. Still some "em" values to convert to "px" but I'm slowly getting there (no real need to convert for the submenu items).

Woody

#dropMenuWrapper {
width: 100%; /* ORIG /
height: 5px; / ORIG /
margin: 0; / ORIG /
font-size: 11px; / ORIG */
padding-bottom: 1px;
}

div#dropMenu {
width: 840px;
margin: 0 auto; /* ORIG /
text-align: center; / ORIG /
z-index: 1000; / ORIG /
position: relative; / ORIG */
}

div#dropMenu ul {
margin: 0;
padding: 0;
}

div#dropMenu li {
position: relative; /* ORIG /
list-style: none; / ORIG /
margin: 0; / ORIG /
float: left; / ORIG /
line-height: 1em; / ORIG /
width: 16.667%; / width added by jade */
background: #A5B7E9; /*NOT IN ORIG */
}

div#dropMenu ul.level1 {
width: 70em; /* ORIG NOT ME /
margin: 0 auto; / ORIG NOT ME /
text-align: center; / ORIG /
height: 2.17em; / ORIG /
z-index: 1000; / ORIG */
}

div#dropMenu li a {
display: block; /* ORIG /
padding: 5px 0 5px 0; / by Jade /
text-decoration: none; / ORIG /
text-transform: uppercase; / ORIG /
color: #ffffff; / ORIG /
text-align: center; / ORIG /
border-right: 1px solid #ffffff; / ORIG /
border-left: 1px solid #ffffff; / by jade */
}

div#dropMenu ul.level2 {
top: 3px;
background: #4f4f4f;
z-index: 1000;
left: 0; /* recommend by jade */
}

Try changing that 70em to 840px. Also, since your menu is now a set width, instead of using 16.667%, you can use 140px instead. (840px divided by 6).

icyorchid:

Thanks :)

I would love to have my site look something like this one
http://makeupconnection.com/

I don't know how to get rid of the categories on the side panel of mine http://www.the-unique-boutique.com and
I don't know how to add the other links they
(http://makeupconnection.com/) have at the top :)

If you can help, please help me. Down on hands and knees begging :)

Thanks
Sandra

I'm not sure what you're asking for as far as the top of the site. That's a fairly complicated graphical drop down menu and the extra links "at the top" also. I have no quick solution to get your site looking like that one. You can examine their header_menu.css to get an idea on how it was done.

To get rid of the side panel, just turn the sidebox off in "tools", "Layout Boxes Controller".

jettrue:

I'm not sure what you're asking for as far as the top of the site. That's a fairly complicated graphical drop down menu and the extra links "at the top" also. I have no quick solution to get your site looking like that one. You can examine their header_menu.css to get an idea on how it was done.

To get rid of the side panel, just turn the sidebox off in "tools", "Layout Boxes Controller".

I feel like a dope! I didn't think of turning off the sidebox. lol
I was trying to close out the categories. lol Thank you for letting me know where that was. lol

As far as the other links, I guess I can do without. :(

I wish I knew how to do these templates. Is there like a school or something that is free of reasonably priced that I can join online?

Thanks
Sandra

icyorchid:

I feel like a dope! I didn't think of turning off the sidebox. lol
I was trying to close out the categories. lol Thank you for letting me know where that was. lol

As far as the other links, I guess I can do without. :(

I wish I knew how to do these templates. Is there like a school or something that is free of reasonably priced that I can join online?

Thanks
Sandra

I'm just not fully sure what you're looking for, I'd be happy to help. As for other links, you can turn on ezpages for the header, and those would show up just above your drop down menu.

Are you having problems with your "HOME" and "LOGIN" links up top? they seem kind of squished off to the right there.

I don't know of any free schools online, sorry....