G1337 Posted March 16, 2006 Share Posted March 16, 2006 I'm having some trouble making a CSS drop down menu, wondering if any help can be offered, here's the code, tell me if you see a problem. <html><heaD><title>Drop down menu?</title><style type="text/CSS">a { text-decoration: none; }ul.menu, ul.menu, ul {width: 60px;border: 2.5px double blue;background-color: black;margin-left: 5px;}ul.menu li {list-style-type: none;margin: 0;position: relative;color: red;}ul.menu li > ul {display: none;position: absolute;top: 3px;left: 50px;}ul.menu ul.CSStoShow {display: none;}ul.menu li:hover > ul {display: block;}ul.menu li a { color: red; display: block; width: 100% text-decoration: none; }ul.menu li a:hover, ul.menu li a.CSStoHighLink { color: blue; }ul.menu li:hover > a {color: blue; }</style></head><body><ul class="menu"><li>Menu</li><ul><li><a href="http://Google.com">Sub</a></li><li>Menu</li><li>Here</li></ul></ul></li> This one's getting to me. Link to comment Share on other sites More sharing options...
Chocolate570 Posted March 16, 2006 Share Posted March 16, 2006 But what is the problem? What would you like help with? Link to comment Share on other sites More sharing options...
G1337 Posted March 16, 2006 Author Share Posted March 16, 2006 The second list should be hidden, it is not. When you mouse over the "menu" in the first list, the second list should be displayed, it is not. I don't know what's wrong. Link to comment Share on other sites More sharing options...
Guest DiNo Posted March 16, 2006 Share Posted March 16, 2006 Hey,Do you have to do this in the CSS code because i can help you with the same effect, but using JavaScript to activate the hide/show of the second menu.DiNo Link to comment Share on other sites More sharing options...
G1337 Posted March 16, 2006 Author Share Posted March 16, 2006 I don't have to do it in CSS only, but I don't want to use JavaScript. Link to comment Share on other sites More sharing options...
scott100 Posted March 16, 2006 Share Posted March 16, 2006 You can do it without javacript, look here: http://www.cssplay.co.uk/menus/dd_valid.html Link to comment Share on other sites More sharing options...
G1337 Posted March 17, 2006 Author Share Posted March 17, 2006 Not helping. Link to comment Share on other sites More sharing options...
Guest mvnbh Posted March 17, 2006 Share Posted March 17, 2006 In javascript you can do it very easily.1) Add this part in the scriptfunction show(varname){ if (varname == 1) { document.getElementById('divlayer').style.display=''; document.getElementById('divlayer').style.visibility = 'visible'; }}in your 2nddrop downadd < ...... id='divlayer' style="display: none; visibility: hidden">in your firstdropdown add <..... onmouseover="java script: show('divlayer')"...>- What this does is initially sets the 2nddropdown value as hidden and mouseover the firstone the second one is active. Hope this helps Link to comment Share on other sites More sharing options...
Err Posted March 18, 2006 Share Posted March 18, 2006 You can do it without javacript, look here: http://www.cssplay.co.uk/menus/dd_valid.html<{POST_SNAPBACK}> COOL! Now, you don't see stuff like that everyday. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now