July 30, 201214 yr How can I make these sub list items horizontal? <html> <head> <title></title> <style> * { margin: 0; padding: 0; } body { padding: 100px 0 0 0; } container { position: relative; } #navbar { width: 1600px; height: 46px; background:url('darkheader.png'); } #navwrapper { width: auto; height: auto; border: solid 1px yellow; position: absolute; top: 100px; left: 250px; } ul#nav, .sub1 { list-style: none; } ul#nav li{ width: 150px; text-align: center; position: relative; float: left; margin-right: 5px; } ul#nav li a{ text-decoration: none; display: block; width: 150px; height: 45px; line-height: 45px; } ul#nav .sub1 li { border: solid 1px green; position: absolute; float: left; } ul#nav .sub1 a { margin-top: 10px; } ul#nav li:hover > a{ background: #a22c1f; } ul#nav .sub1 { visibility: hidden; position: absolute; } ul#nav li:hover .sub1 { visibility: visible; } </style> </head> <body> <div id="container"> <div id="navbar"></div> <div id="navwrapper"> <ul id="nav"> <li><a href="aboutus.php">ABOUT US</a> <ul class="sub1"> <li><a href="aboutus.php">Company</a></li> <li><a href="team.php">Team</a></li> <li><a href="careers.php">Careers</a></li> </ul> </li> <li><a href="ourwork.php">OUR WORK</a> <ul class="sub1"> <li><a href="ourwork.php">Portfolio</a></li> <li><a href="upcoming.php">Upcoming</a></li> </ul> </li> <li><a href="blog.php">WHATS NEW</a> <ul class="sub1"> <li><a href="blog.php">Blog</a></li> </ul> </li> <li><a href="products.php">PRODUCTS</a> <ul class="sub1"> <li><a href="products.php">Websites</a></li> <li><a href="addons.php">Add Ons</a></li> </ul> </li> <li><a href="contact.php">CONTACT</a></li> </ul> </div> </div> </body> </html>
Create an account or sign in to comment