sircharlo Posted February 7, 2008 Share Posted February 7, 2008 Hi, everyone. First of all, this is the page that is concerned: Page. I am upgrading the previous web site. And now I have a problem.What I would like to do is to create a pop-out menu that would appear when the person hovers on Produits et services. The menu would contain the following items: FileMaker, Servoy, and Hébergement. The menu would disappear when the person removed their mouse from the button. Is there any way of doing this with CSS ?Thank you. Link to comment Share on other sites More sharing options...
jeffman Posted February 7, 2008 Share Posted February 7, 2008 Follow this thread. There were some bumbs along the way, but it all worked out. So be sure to follow the whole thing. Link to comment Share on other sites More sharing options...
sircharlo Posted February 7, 2008 Author Share Posted February 7, 2008 Follow this thread. There were some bumbs along the way, but it all worked out. So be sure to follow the whole thing.What thread ? Link to comment Share on other sites More sharing options...
jeffman Posted February 7, 2008 Share Posted February 7, 2008 My bad. Here:http://w3schools.invisionzone.com/index.php?showtopic=17467 Link to comment Share on other sites More sharing options...
sircharlo Posted February 7, 2008 Author Share Posted February 7, 2008 From what I can tell, that uses JS. I would like if possible only CSS. If it is too complicated, though, I'll go with JS. Link to comment Share on other sites More sharing options...
jeffman Posted February 7, 2008 Share Posted February 7, 2008 Well, that was the original choice of the person who posted that thread, too. If your users won't be using IE6, it can all be done in CSS. But it's likely that 35-40% of your users will be on IE6, so we really have to use JS. What follows contains minimal JS, just enough to get the job done. <html> <head> <style> div.menu {width: 150px; height: 20px; overflow: hidden; } div.body {height: auto; background-color: #DDDDDD; padding-left: 1em;} </style> </head> <body bgcolor="#ffffff"> <div class="menu" id="testMenu"> <div class="menu" onmouseover="document.getElementById('testMenu').style.height='250px';" onmouseout="document.getElementById('testMenu').style.height='20px'}"> Test </div> <div class="menu body" onmouseover="document.getElementById('testMenu').style.height='250px';" onmouseout="document.getElementById('testMenu').style.height='20px'}"> <p><a href="#">Hello world!</a></p> <p><a href="#">Hello world!</a></p> <p><a href="#">Hello world!</a></p> <p><a href="#">Hello world!</a></p> <p><a href="#">Hello world!</a></p> <p><a href="#">Hello world!</a></p> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Synook Posted February 8, 2008 Share Posted February 8, 2008 CSSPlay has some good CSS-only drop-down menus:http://www.cssplay.co.uk/menus/ Link to comment Share on other sites More sharing options...
sircharlo Posted February 8, 2008 Author Share Posted February 8, 2008 I'm almost there now. Check out the page again and hover over Produits et services. Why is the positioning so out of whack, though ? Link to comment Share on other sites More sharing options...
jlhaslip Posted February 9, 2008 Share Posted February 9, 2008 set the #menu to position:relative and play with the px values for top and left in the ul-li-ul on:hover. Link to comment Share on other sites More sharing options...
sircharlo Posted February 11, 2008 Author Share Posted February 11, 2008 HELP !!!I now have exactly the desitred effect in FF, but IE6 scraps it up. PLEASE HELP ME ! Click Here (hover over Produits et services) Link to comment Share on other sites More sharing options...
sircharlo Posted February 11, 2008 Author Share Posted February 11, 2008 I put a HTC file (the whatever:hover method) and it worked !Thank you all for your help.Now, while we're there, is there a way of making the sub-menu the same width as the Produits et services button ? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.