CSS Dropdown menu for the header- With Categories!

[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

[gee38l]

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?

[CES]

Sorry about that.

Not sure.

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

[gee38l]

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?

[CES]

div#dropMenu ul

text-align:center;

[gee38l]

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

[gee38l]

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

[gee38l]

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:

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

[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

[gee38l]

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)