CSS Dropdown menu for the header- With Categories!

I'm not sure about 'transparency' but I'm sure you could make the background the of the menu the same colour as the header image.

You could then move the positioning of the menu up by inserting something like:
top: -30px;

under:
position:relative;

Craig

Quote:

---

Originally Posted by CES

I'm not sure about 'transparency' but I'm sure you could make the background the of the menu the same colour as the header image.

You could then move the positioning of the menu up by inserting something like:
top: -30px;

under:
position:relative;

Craig

---

Thanks for that it has moved nicely into the header but now there is a gap of where the css header use to be how can i get rid of this?

Sorry about that.

Not sure.

You could try looking here for help:
http://www.w3schools.com/css/

Quote:

---

Originally Posted by CES

Sorry about that.

Not sure.

You could try looking here for help:
http://www.w3schools.com/css/

---

No problem! thanks for your help

Btw do you know how i can center the drop down ? Atm they are to the left?

div#dropMenu ul

text-align:center;

Quote:

---

Originally Posted by CES

div#dropMenu ul

text-align:center;

---

That didnt seem to do anything to the drop dow box instead i just decreased the width until it was inline.

THnaks

Does anyone know how i can remove the gap that is shown in the attatched picture?

Update on above issue:

I have been playing around with the box layout in the style sheet and just couldnt get the sideboxes to align correctly although i could get the center column after a few hours i gave up on that. I moved on to the header menu stylesheet and started playing around on this one and finally got a little closer to what im trying to do.....

Here is what i have come up with:

HTML Code:

---

Internet Explorer Works with this code but mozilla does not:

div#dropMenu {
        width:90%;
        margin-left:45px;
        margin-bottom:-30px;
        margin-top:0px;
    text-align:center;
        z-index:1000;
        position:relative;
        top:-30px;
       
        }

Mozilla works with this code but ie does not:

div#dropMenu {
        width:90%;
        margin-left:45px;
        margin-bottom:-30px;
        margin-top:0px;
    text-align:center;
        z-index:1000;
        position:relative;
       
        }

---

Does anyone have a solution?

I have attached some pics and link is: www.truwater.com.au

Thanks

Perhaps a couple of things to play with are:

position:absolute; in the css

or try putting the:

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

higher up the header.php and position it lower using the css.

Craig

Quote:

---

Originally Posted by CES

Perhaps a couple of things to play with are:

position:absolute; in the css

or try putting the:

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

higher up the header.php and position it lower using the css.

Craig

---

Ok i used the absolute positioning and i seemed to have got it right! Thanks (please check)