Forums

Drop Down with CSS

Permalink
Hi!

I'm new here, actually this is my first post so please forgive any mistake i do. Thanks!

I think my problem is simple, i have a Concrete 5 website (it's awesome this CMS!) with a head menu (nav-header) but i would like it to dropdown showing the sub-pages (if they have) when you pass the mouse through. I have searched a lot, and tried out a lot of CSS but nothing works...can someone help me?
Thanks a lot!
Cheers!
 
antonioazevedo replied on at Permalink Reply
Check this tutorialhttp://www.codeblog.ch/2009/04/concrete5-drop-down-menu/... hope it helps
suso replied on at Permalink Reply
I had checked out that tutorial and didnt worked but i tried again carefully and got it! thanks...only one thing, can't i use my CSS style? i mean just the drop down effect, because now i have a blue menu like the one in the tutorial. I'm looking at it already but any help its very appreciated.

EDIT: I don't understand where is the reference to the CSS in the php file... :S

Thanks a lot!
Cheers!
ThemeGoodness replied on at Permalink Reply
ThemeGoodness
If you copied over Remo's css the blue is coming from there. You will want to change the hex number in the CSS for it.


Steph
suso replied on at Permalink Reply
I know, i want to keep my aspect, i just want the drop down effect, the problem is that i dont know how... its difficult having already the menu created and wanting to modify it know with this drop down thing...im still finding out how to do it.

Thanks!
Cheers!
ThemeGoodness replied on at Permalink Reply
ThemeGoodness
.menu {width:745px; height:32px; position:relative; z-index:100;font-family:arial, sans-serif;}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:746px; w\idth:745px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:149px;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; width:138px; height:30px; background:#09c; padding-left:10px; line-height:29px; font-weight:bold;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 130px center;}
/* style the second level hover */
Viewing 15 lines of 45 lines. View entire code block.


Everywhere you see "background:#09c" change the 09c to a new hex number for the color you want. Some are for hovers as well.

Steph
zoinks replied on at Permalink Reply
have ya checked this out in IE8? I can't get to the dropdown before it disappears in IE8, so I'm gonna guess it's not foolproof.