CSS Dropdown menu for the header- With Categories!

[threddies.com]

OK, I believe I have the structure correct - the menu displays fine on the first level. Unfortunately I've probably done something else dumb and am stumped again...

When you mouse-over one of the main categories, the sub-categories are all there and are generally fine. The problem is that the subs below that do not flyout into their own boxes, instead they are layered on top of the preceding categories.

Below is a screenshot. The 2nd level categories under Hair Accessories should be BANDANAS, BARRETTES, BASICS IN BULK, CLAW CLIPS, FOR TOTS, HAIR STICKS, HEADBANDS, PONYTAIL HOLDERS, SCRUNCHIES, MADE-TO-ORDER, RUNWAY COLLECTION. Everything that is there other than that should be a sub of something else, if that makes any sense. Don't know why it is not popping out.



Here is the code:

<style type="text/css">

#zUL li {
    float:left;
    width:10em;
    position:relative;
}


#zUL li ul {
    visibility:hidden;
    position:absolute;
}


#zUL li:hover ul {
    visibility:visible;
    background-color:#000000; /*change this to any color you want*/
}
</style>

<div id="navMainWrapper">
<div id="navMain">

<ul id="zUL">
<!--Insert your links here-->
<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=128">Apparel</a>
</li>


<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=125">Bath + Body</a>
</li>

<li class="submenu"><a href="#">Hair Accessories</a>
<ul class="level1">

    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_72">Bandanas</a>
    </li>




    <li> <a href="#">Barrettes</a>
      <ul class="level2">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_68_106">Embellished Barrettes</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_68_105">Large Barrettes</a></li>
      </ul>
    </li>





    <li> <a href="#">Basics in Bulk</a>
      <ul class="level2">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_76_88">Headbands</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_76_90">Ponytail Holders</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_76_124">Snap Clips</a></li>
      </ul>
    </li>



    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_74">Claw Clips</a>
    </li>





    <li> <a href="#">For Tots</a>
      <ul class="level2">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_122">Barrettes</a></li>
    <li> <a href="#">Clips</a>
        <ul class="level3">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_119">Embellished</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_115">Flowers</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_117">Gingham</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_116">Polka Dots</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_118">Solid Colors</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_121">Stripes</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_111_120">Teeny Tiny Clips</a></li>
        </ul>
        </li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_70_112">Headbands</a></li>
      </ul>
    </li>





    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_73">Hair Sticks</a>
    </li>





    <li> <a href="#">Headbands</a>
      <ul class="level2">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_83">Basics in Bulk</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_78">Beaded</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_79">Elastic</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_80">Fabric</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_81">Lace</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_85">Ribbon</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_137">Scarf Headbands</a></li>
    <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_102">Stretch</a></li>
    <li> <a href="#">Structured</a>
        <ul class="level3">
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_107">Plastic Headbands</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_123">Skinny Structured Headbands</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_108">Structured Fabric Headbands</a></li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_86_104">Structured Scarf Headbands</a></li>
        </ul>
        </li>
        <li> <a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_65_82">Woven</a></li>
      </ul>
    </li>





    <li><a href="#">Ponytail Holders</a>
      <ul class="level2">
        <li><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_66_109">Double-loop Pony Holders</a></li>
    <li><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_66_95">Basic Pony Holders</a></li>
    <li><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_66_96">Embellished Pony Holders</a></li>
      </ul>
    </li>




    <li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_94">Scrunchies</a></li>




    <li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_71">Made-to-order</a></li>





    <li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=127_110">Runway Collection</a></li>
  

</ul>
</li>



<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=129">Odds + Ends</a></li>



<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=21">Gift Certificates</a></li>



<li class="submenu"><a href="http://www.threddies.com/store/index.php?main_page=index&cPath=77">CLEARANCE!</a></li>



<!--------------end of links-------------->

</ul>

<br class="clearBoth" />

</div>
</div>

I'm thinking it has something to do with these "submenu" and "level2" etc classes maybe? I don't know where they're coming from to be quite honest....

Thanks again for all your help - it is so much appreciated! I'd love to get this great mod working right...

[jettrue]

OK, I believe I have the structure correct - the menu displays fine on the first level. Unfortunately I've probably done something else dumb and am stumped again...

When you mouse-over one of the main categories, the sub-categories are all there and are generally fine. The problem is that the subs below that do not flyout into their own boxes, instead they are layered on top of the preceding categories.

Below is a screenshot. The 2nd level categories under Hair Accessories should be BANDANAS, BARRETTES, BASICS IN BULK, CLAW CLIPS, FOR TOTS, HAIR STICKS, HEADBANDS, PONYTAIL HOLDERS, SCRUNCHIES, MADE-TO-ORDER, RUNWAY COLLECTION. Everything that is there other than that should be a sub of something else, if that makes any sense. Don't know why it is not popping out.

I'm thinking it has something to do with these "submenu" and "level2" etc classes maybe? I don't know where they're coming from to be quite honest....

Thanks again for all your help - it is so much appreciated! I'd love to get this great mod working right...

I'm curious. Why are you doing this all by hand? Are those your categories? This mod does that all by itself.

Also, look closer at the code I posted for you. Every <li> except for the last submenu, should be like this:

<li class="submenu">

But again I have to ask... why in the world would you do it by hand? LOL!

[threddies.com]

I'm curious. Why are you doing this all by hand? Are those your categories? This mod does that all by itself.

LOL I think there is something wrong with me...

Here goes the dumbest question yet...

HOW does it do it all by itself?? What the heck have I been doing all morning?

Looking at the Readme, right... I edited the bg color, edited the links, pushed the files over. (well, they're not over right now, but ya know)

When you say "edit the links", you do mean to fill them in just as indicated in the original file, right? I started by doing that, but ran into trouble when I tried to get the links to go another level or two deeper... the example which you provided in the file only went one deep.

What the heck did I do? Leave it to me to take something super easy and make it complicated...

[jettrue]

LOL I think there is something wrong with me...

Here goes the dumbest question yet...

HOW does it do it all by itself?? What the heck have I been doing all morning?

Looking at the Readme, right... I edited the bg color, edited the links, pushed the files over. (well, they're not over right now, but ya know)

When you say "edit the links", you do mean to fill them in just as indicated in the original file, right? I started by doing that, but ran into trouble when I tried to get the links to go another level or two deeper... the example which you provided in the file only went one deep.

What the heck did I do? Leave it to me to take something super easy and make it complicated...

No, the mod MAKES the drop down menu. Automatically. If you uploaded every file, turned on the ezpages_drop_menu.php sidebox in the admin (under Tools, Layout Boxes Controller), BAM the menu appears.

At first I thought you just wanted to add a single drop down to the drop down. But then I realized you were recreating the entire menu!

Also you are probably not using my version, as my version does not indicate to fill in any links. There's a version right after mine in the download section that says "Paul's version". His tpl_drop_menu.php gives you an example on HOW to add additional links if you should need them, but it STILL automatically creates the menu. I'm guessing you didn't turn the side box on.

Also, "Paul's Version", creates EACH category as a drop down menu, whereas mine has a lot of miscellaneous drop downs, with ONE drop down called "Categories" which then lists all the categories (you can see mine in action here - www.zencart137.jadetrue.com). BOTH options work, its just up to you which one you want to use. Also, Paul's version doesn't come with a support thread, so you are welcome to be here.

[threddies.com]

Also you are probably not using my version, as my version does not indicate to fill in any links.

And there we have the problem.

Downloaded your version instead and everything auto-populated like a beautiful dream. Now just have to figure out why my header image is smushed, which I think I saw something about in another post.

Thanks again for dealing with me! It's so great that you maintain this support thread

[jettrue]

And there we have the problem.

Downloaded your version instead and everything auto-populated like a beautiful dream. Now just have to figure out why my header image is smushed, which I think I saw something about in another post.

Thanks again for dealing with me! It's so great that you maintain this support thread

If you read the readme.txt file on installing my version, there is this section:

3. If you have heavily modified your includes/templates/YOUR_TEMPLATE/common/tpl_header.php, instead of uploading the tpl_header.php included in this download, you can simply add this to your header where you'd like the css menu to appear:

<!--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-->


That could be your problem with the logo. If you made any changes to your old tpl_header.php, you'll probably want to reload your old version, and simply paste the code above into the file. The best place to add it is right after:
<!--eof-optional categories tabs navigation display-->

[threddies.com]

Got it looking lovely. Thanks so much for all of your help Jettrue - it is truly appreciated!!!

[donrisdesigns]

Hello I am new to Zen but I love it, I'd sure like someone knowledgeable to help with a few things if possible. I have spent days reading threads and unfortunately the main thing that boggles my mindis trying to upload mass products and categories. i am currently getting some help from a friend that is having me create a db in access to import, but I know there has got to be an easier way and i cant seem to find or figure out easy populate. The reason I replied to this thread though is because I have installed the drop down menu and I truly loved it. But unfortunately I have changed my design idea and cannot use it for one of the carts i have installed it in and i cant seem to be able to disable it. If you could please help i would greatly appreciate it.

[jettrue]

Hello I am new to Zen but I love it, I'd sure like someone knowledgeable to help with a few things if possible. I have spent days reading threads and unfortunately the main thing that boggles my mindis trying to upload mass products and categories. i am currently getting some help from a friend that is having me create a db in access to import, but I know there has got to be an easier way and i cant seem to find or figure out easy populate. The reason I replied to this thread though is because I have installed the drop down menu and I truly loved it. But unfortunately I have changed my design idea and cannot use it for one of the carts i have installed it in and i cant seem to be able to disable it. If you could please help i would greatly appreciate it.

I PM'd you a response as well, but all you need to do is remove this from includes/templates/YOUR_TEMPLATE/common/tpl_header.php:

<!--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-->

[noleafclover614]

Hello all, great mod, I was wondering if I could get some help.

I have this mod currently installed on my site, and it seems to conflict with Hoverbox2. When I click on one of my products, the resulting window is obstructed slightly by the CSS menu - what I want is for the resulting image window to be in front of everything. You can have a look at: the chop haus DOT com

Also, there seems to be an extra little box with nothing in it at the right hand side of my CSS horizontal menu - any idea how to get rid of that?

Regards,
Matt