fishcuisine Posted December 14, 2010 Report Share Posted December 14, 2010 Hello, There is site that has a horizontal menu that looks good. Link: http://css.flepstudio.org/en/css-tutorials/horizontal-drop-down-menu.html I pasted the first set of codes on to my DW MX new file page. It looked good as advertised: <div id="menu"> <ul> <li><a href="#nogo">Link 1</a> <ul> <li><a href="#nogo">Link 1-1</a></li> <li><a href="#nogo">Link 1-2</a></li> <li><a href="#nogo">Link 1-3</a></li> </ul> </li> <li><a href="#nogo">Link 2</a> <ul> <li><a href="#nogo">Link 2-1</a></li> <li><a href="#nogo">Link 2-2</a></li> <li><a href="#nogo">Link 2-3</a></li> </ul> </li> <li><a href="#nogo">Link 3</a> <ul> <li><a href="#nogo">Link 3-1</a></li> <li><a href="#nogo">Link 3-2</a></li> <li><a href="#nogo">Link 3-3</a></li> </ul> </li> </ul> </div> Then I tried the other set of codes but I ended up getting the codes reproduced on the page. Clearly, I did not have the codes placed correctly. Any ideas I wonder? #menu{ padding:0; margin:0; } #menu ul{ padding:0; margin:0; } #menu li{ position: relative; float: left; list-style: none; margin: 0; padding:0; } #menu li a{ width:100px; height: 30px; display: block; text-decoration:none; text-align: center; line-height: 30px; background-color: black; color: white; } #menu li a:hover{ background-color: red; } #menu ul ul{ position: absolute; top: 30px; visibility: hidden; } Regards rk Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 14, 2010 Report Share Posted December 14, 2010 The first set of code should be in the page body section, but the second set beginning #menu{ padding:0; margin:0;} should be in a separate stylesheet or in head section style tags like <style type="text/css"> (all the code here) </style> Have you put it all in the body section? If you want to choose a menu, there are lots at cssplay http://www.cssplay.co.uk/menus/ Quote Link to comment Share on other sites More sharing options...
Andrea Posted December 14, 2010 Report Share Posted December 14, 2010 How about a link to the page you're talking about so we can see what you really have - and often, it's not just the part you might think, it could be something somewhere else on the page that affects it. Quote Link to comment Share on other sites More sharing options...
fishcuisine Posted December 15, 2010 Author Report Share Posted December 15, 2010 Hello, Thanks for your reply. I tried the following format. Same ole same. No change...I know I missed something. Regards fish <div id="menu"> <ul> <li><a href="#nogo">Link 1</a> <ul> <li><a href="#nogo">Link 1-1</a></li> <li><a href="#nogo">Link 1-2</a></li> <li><a href="#nogo">Link 1-3</a></li> </ul> </li> <li><a href="#nogo">Link 2</a> <ul> <li><a href="#nogo">Link 2-1</a></li> <li><a href="#nogo">Link 2-2</a></li> <li><a href="#nogo">Link 2-3</a></li> </ul> </li> <li><a href="#nogo">Link 3</a> <ul> <li><a href="#nogo">Link 3-1</a></li> <li><a href="#nogo">Link 3-2</a></li> <li><a href="#nogo">Link 3-3</a></li> </ul> </li> </ul> </div> <style type=”text/css”> #menu{ padding:0; margin:0; } #menu ul{ padding:0; margin:0; } #menu li{ position: relative; float: left; list-style: none; margin: 0; padding:0; } #menu li a{ width:100px; height: 30px; display: block; text-decoration:none; text-align: center; line-height: 30px; background-color: black; color: white; } #menu li a:hover{ background-color: red; } #menu ul ul{ position: absolute; top: 30px; visibility: hidden; } </style> Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 15, 2010 Report Share Posted December 15, 2010 That's still not right. You should have something like: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name="keywords" content="Wickham"> <meta name="description" content="Test items"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Test</title> <style type="text/css"> #menu{ padding:0; margin:0; } #menu ul{ padding:0; margin:0; } #menu li{ position: relative; float: left; list-style: none; margin: 0; padding:0; } #menu li a{ width:100px; height: 30px; display: block; text-decoration:none; text-align: center; line-height: 30px; background-color: black; color: white; } #menu li a:hover{ background-color: red; } #menu ul ul{ position: absolute; top: 30px; visibility: hidden; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#nogo">Link 1</a> <ul> <li><a href="#nogo">Link 1-1</a></li> <li><a href="#nogo">Link 1-2</a></li> <li><a href="#nogo">Link 1-3</a></li> </ul> </li> <li><a href="#nogo">Link 2</a> <ul> <li><a href="#nogo">Link 2-1</a></li> <li><a href="#nogo">Link 2-2</a></li> <li><a href="#nogo">Link 2-3</a></li> </ul> </li> <li><a href="#nogo">Link 3</a> <ul> <li><a href="#nogo">Link 3-1</a></li> <li><a href="#nogo">Link 3-2</a></li> <li><a href="#nogo">Link 3-3</a></li> </ul> </li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
BeeDev Posted December 15, 2010 Report Share Posted December 15, 2010 http://www.w3schools.com Good place to start. Quote Link to comment Share on other sites More sharing options...
Andrea Posted December 15, 2010 Report Share Posted December 15, 2010 No change...I know I missed something. Yes, based on our experience, that would be about 95% of all the advice you've been getting here. If you did as I asked in my last post in this thread and posted a link to the page you're struggling with, we could see EXACTLY what you're working with and tell you specifically how it could be fixed. Quote Link to comment Share on other sites More sharing options...
fishcuisine Posted December 16, 2010 Author Report Share Posted December 16, 2010 That's still not right. You should have something like: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name="keywords" content="Wickham"> <meta name="description" content="Test items"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Test</title> <style type="text/css"> #menu{ padding:0; margin:0; } #menu ul{ padding:0; margin:0; } #menu li{ position: relative; float: left; list-style: none; margin: 0; padding:0; } #menu li a{ width:100px; height: 30px; display: block; text-decoration:none; text-align: center; line-height: 30px; background-color: black; color: white; } #menu li a:hover{ background-color: red; } #menu ul ul{ position: absolute; top: 30px; visibility: hidden; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#nogo">Link 1</a> <ul> <li><a href="#nogo">Link 1-1</a></li> <li><a href="#nogo">Link 1-2</a></li> <li><a href="#nogo">Link 1-3</a></li> </ul> </li> <li><a href="#nogo">Link 2</a> <ul> <li><a href="#nogo">Link 2-1</a></li> <li><a href="#nogo">Link 2-2</a></li> <li><a href="#nogo">Link 2-3</a></li> </ul> </li> <li><a href="#nogo">Link 3</a> <ul> <li><a href="#nogo">Link 3-1</a></li> <li><a href="#nogo">Link 3-2</a></li> <li><a href="#nogo">Link 3-3</a></li> </ul> </li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
fishcuisine Posted December 16, 2010 Author Report Share Posted December 16, 2010 Hello, Re: CSS Horizontal Menu Link - http://css.flepstudi...-down-menu.html'>http://css.flepstudi...-down-menu.html I'm back. Would you believe... I trust you already know that I am still in T-Ball league, so please bear with me. I went with your latest code sequence; pasted it into my DW MX new page. What I saw was a great improvement. Link 1 Link 2 Link 3 were all in their proper black rectangles. How do I now have each link (Link 1 Link 2 Link 3) light up in red or any other color and display the drop down menu, i.e. 1-1, 1-2, 1-3 etc. Regards Link: http://css.flepstudi...-down-menu.html Quote Link to comment Share on other sites More sharing options...
falkencreative Posted December 16, 2010 Report Share Posted December 16, 2010 Based on the code you have shown so far, it looks like you need to add #menu ul li:hover ul{ visibility:visible; } to your css -- within the <style type=text/css">...</style>. Place it just before the </style>. Quote Link to comment Share on other sites More sharing options...
Andrea Posted December 16, 2010 Report Share Posted December 16, 2010 Re: CSS Horizontal Menu Link - http://css.flepstudi...-down-menu.html Link: http://css.flepstudi...-down-menu.html That link isn't working - but I did not mean the link to where you got the code from, but a link to YOUR page - the one you're working on. Just upload it to your site and let us look. Quote Link to comment Share on other sites More sharing options...
fishcuisine Posted December 17, 2010 Author Report Share Posted December 17, 2010 Hello there, Again, thanks for sticking this one out. As everyone knows I am still a T-Ball leaguer. All I have been doing is cut and paste. I checked the result of the codes below on my DW MX new page. The result is no change. Same as last time. I really don't have a clue why... I get the a rectangular black box with Link 1 Link 2 Link 3 wording in white letters. No red; no drop down. When I click on the wording I see a thin white verticle line about 1-2 mm wide. Confused fish... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta name="keywords" content="Wickham"> <meta name="description" content="Test items"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Test</title> <style type="text/css"> #menu{ padding:0; margin:0; } #menu ul{ padding:0; margin:0; } #menu li{ position: relative; float: left; list-style: none; margin: 0; padding:0; } #menu li a{ width:100px; height: 30px; display: block; text-decoration:none; text-align: center; line-height: 30px; background-color: black; color: white; } #menu li a:hover{ background-color: red; } #menu ul ul{ position: absolute; top: 30px; visibility: hidden; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#nogo">Link 1</a> <ul> <li><a href="#nogo">Link 1-1</a></li> <li><a href="#nogo">Link 1-2</a></li> <li><a href="#nogo">Link 1-3</a></li> </ul> </li> <li><a href="#nogo">Link 2</a> <ul> <li><a href="#nogo">Link 2-1</a></li> <li><a href="#nogo">Link 2-2</a></li> <li><a href="#nogo">Link 2-3</a></li> </ul> </li> <li><a href="#nogo">Link 3</a> <ul> <li><a href="#nogo">Link 3-1</a></li> <li><a href="#nogo">Link 3-2</a></li> <li><a href="#nogo">Link 3-3</a></li> </ul> </li> </ul> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
fishcuisine Posted December 17, 2010 Author Report Share Posted December 17, 2010 GUYS! Actually, the last two code sequences will work. What I did not do was check the codes with my browser with an F12 move. Well...when I did that I saw what was actually written in code. I believe I can move forward! Tnks Fishy T-Ball Leaguer Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.