Hi
I have this purely CSS menu that I am attempting to sort, I haven't sorted the appearance out yet to make it all pretty as I want to sort this issue first.
Here is the menu, I have just stuck it on its own on the site whilst its worked
on
http://www.thebeautyroomashby.co.uk/css3/html
I can get the drop down menu to hide and appear on hover, but theres another menu within the dropdown (treatments> facial treatments> links to various facial treatments) that I need to do the same thing but it all just appears when you hover over the top bar.
I want the links beyond facial & body treatments to only appear when you hover over either facial or body.
I think I need to add a new section to my css for those specific links , and mess with the visible/hidden but i think i am putting everything in the wrong place.
Heres the css.
[HTML]@charset "utf-8"; #menu-bar { width: 740px; margin: 0; height : 31px; line-height : 100%; border-radius : 0; border : #666 solid 1px; background-color : #ccc; padding-top : 2px; padding-right : 2px; padding-bottom : 0; padding-left : 2px; } #menu-bar li { float : left; position : relative; list-style : none; visibility: visible; width: auto; margin-top: 0; margin-right: 2px; margin-bottom: 0; margin-left: 2px; padding-top: 0; padding-right: 0; padding-bottom: 6px; padding-left: 0; } #menu-bar a { font-weight : bold; font-family : arial; font-style : normal; font-size : 12px; color : #050505; text-decoration : none; display : block; margin : 0; border-radius : 0; background-color: #CCC; padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; } #menu-bar li:hover li a { visibility: visible; background : none; border : none; color : #666; } #menu-bar li:hover > ul { visibility: visible; display : block; } #menu-bar ul li { float : none; margin : 0; padding : 0; width: auto; visibility: hidden; text-align: center; } padding : 10px 0 10px 15px; color : #424242 !important ; font-size : 12px; font-style : normal; font-family : arial; font-weight : normal; text-shadow : #ffffff 2px 2px 3px; } #menu-bar ul li:first-child > a { border-top-left-radius : 10px; border-top-right-radius : 10px; } #menu-bar ul li:last-child > a { border-bottom-left-radius : 10px; border-bottom-right-radius : 10px; } #menu-bar:after { content : "."; display : block; clear : both; visibility : hidden; line-height : 0; height : 0; } #menu-bar { display : inline-block; } html[xmlns] #menu-bar { display : block; font-family : Arial, Helvetica, sans-serif; background-color: #CCC; } * html #menu-bar { height : 1%; } [/HTML]
Please help as I am going round in circles as usual!! And treat me like I am dumb because I am .
Thanks
Before you post, read our: 
