I am having a little issue with my code here and cannot for the life of me figure out what I'm doing wrong. Any help is greatly appriciated. ISSUE: The list is dropping down 1 item then moving the others beside the first one. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style> * { margin: 0px; padding: 0px; } #navcon { background: #000; width: 100%; } #nav { width: 450px; height: 36px; position: relative; color: #999; font-family: helvetica; margin: 0px auto; font-size: .9em; } #nav ul { list-style-type: none; } #nav ul li { float: left; position: relative; } #nav ul li a { border-right: 1px solid; padding: 10px; display: block; text-align: left; color: #999; text-decoration: none; } #nav ul li a:hover { background: #12aeef; color: #fff; } #nav ul li ul { display: none; } #nav ul li:hover ul { display: block; position: absolute;} #nav ul li:hover ul li a { background: #12aeef; color: #fff; display: block; border-bottom: 1px solid #f2f2f2; border-right: none; width: 100px;} #nav ul li:hover ul li a:hover { background: #6dc7ec; color: #fff; } .top { border-top: 1px solid #f2f2f2; } .first { border-left: 1px solid #e9e9e9; } </style> <!-- END DROPDOWN MENU --> <div id="navcon"> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Portfolio</a></li> <ul> <li class="top"><a href="#">site 1</a></li> <li><a href="#">site 2</a></li> <li><a href="#">site 3</a></li> </ul> <li><a href="#">Services</a></li> <ul> <li class="top"><a href="#">service 1</a></li> <li><a href="#">service 2</a></li> <li><a href="#">service 3</a></li> </ul> <li><a href="#">Contact Us</a></li> <ul> </div> <!-- nav --> </div> <!-- navcon --> <!-- END DROPDOWN MENU --> Code (markup):
submenu items should be nested within the main <li> item. Example: <li><a href="#">Portfolio</a> <!--remove the closing li --> <ul> <li class="top"><a href="#">site 1</a></li> <li><a href="#">site 2</a></li> <li><a href="#">site 3</a></li> </ul> </li> <!-- close the li of main item here --> Code (markup):
Thank you for your response. Corrected that and still nothing, any other ideas? I can upload the code if you need something to look at. I have a feeling the issue is in the style somewhere ... if I increase the padding from 10 to 20 on the "#nav ul li a" it works but I don't want that much padding.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style> * { margin: 0px; padding: 0px; } #navcon { background: #000; width: 100%; } #nav { width: 450px; height: 36px; position: relative; color: #999; font-family: helvetica; margin: 0px auto; font-size: .9em; } #nav ul { list-style-type: none; } #nav ul li { float: left; position: relative; } #nav ul li a { border-right: 1px solid; padding: 10px; display: block; text-align: left; color: #999; text-decoration: none; } #nav ul li a:hover { background: #12aeef; color: #fff; } #nav ul li ul { display: none; } #nav ul li:hover ul { display: block; position: absolute;} #nav ul li:hover ul li a { background: #12aeef; color: #fff; display: block; border-bottom: 1px solid #f2f2f2; border-right: none; width: 100px;} #nav ul li:hover ul li a:hover { background: #6dc7ec; color: #fff; } .top { border-top: 1px solid #f2f2f2; } .first { border-left: 1px solid #e9e9e9; } </style> <!-- END DROPDOWN MENU --> <div id="navcon"> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Portfolio</a> <ul> <li class="top"><a href="#">site 1</a></li> <li><a href="#">site 2</a></li> <li><a href="#">site 3</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li class="top"><a href="#">service 1</a></li> <li><a href="#">service 2</a></li> <li><a href="#">service 3</a></li> </ul> </li> <li><a href="#">Contact Us</a></li> <ul> </div> <!-- nav --> </div> <!-- navcon --> <!-- END DROPDOWN MENU --> Code (markup): works for me on FF, IE8
Oh I see ... my embedded browser through nusphere is outdated thus the issue. I just tested on ff and ie 8 and works thank you.
+rep but they seem to have moved the button for this on the top right of posts so not sure how to give it besides saying thank you for your help
What button/posts? Don't see any code other than the Nav related code and css. Assuming, you've other issues as well.
I was talking about DP Forums they used to have a button to give posters a rating based on their response to an issue. I was going to give you +rep but they removed the button that used to be on the heading of each post. Thank you for all your help
I thought that's the icon (something like a sherif badge or star) below the user post? And you are welcome, shoot your queries, i'm sure somebody will be able to point you to the right direction. Thanks
Thank you ... yeah I have been very busy with work but am learning some new languages i.e. CSS more than just styleing text and simple stuff along with more detailed javascripts. I have always been a table developer with CSS for styling and using only PHP, HTML, MySQL and very little jQuery and CSS. I would like to move into full CSS / javascript sites with PHP only for structure and database interaction.