lora Posted January 23, 2014 Share Posted January 23, 2014 (edited) I have a working drop down menu almost perfectly styled. It functions however I want the submenus to appear in column rows not straight down. Here is my current HTML and CSS. Thanks in advance! <div id="navbar"> <ul id="dropdown"> <li class="topnav"><a href="#">Item One</a> <ul> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> <div class="column"> <li><a href="#">Subitem One</a></li> <li><a href="#">Second Subitem</a></li> <li><a href="#">3rd Subitem</a></li> </div> </ul> </li> </ul></div> #navbar { width: 100%; border-bottom: 1px solid #ccc; padding: 10 10 10 10; }#dropdown { width: 960px; margin: 0 auto; padding: 0; height: 1em; text-transform: uppercase; text-align: center; font-weight: bold; }#dropdown li { list-style: none; float: left; }#dropdown li a { display: block; padding: 3px 8px; text-decoration: none; }#dropdown li ul { display: none; width: 10em; /* Width to help Opera out */ background-color: #fff; } #dropdown li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; border-bottom: 1px solid #ccc; }#dropdown li:hover li, #navbar li.hover li { float: none; }#dropdown li:hover li a, #navbar li.hover li a { background-color: #fff; color: #000; }.topnav a { color: #000; text-decoration: none; }.topnav a:hover { border-bottom: 1px solid gold; }.column {list-style-type: none;float: right;margin: 5px 0 0 0;padding: 0 5px 0 0;width:180px; }.column a { color: #999; text-decoration: none; font-size: .7em; }.column a:hover { border-bottom: 0px; } Edited January 23, 2014 by lora Link to comment Share on other sites More sharing options...
ChrisLannister Posted February 14, 2014 Share Posted February 14, 2014 http://jsfiddle.net/jg9NZ/ Check out the fiddle above for result. I believe your (Opera) width declaration was hurting you, also missing a display:inline. #navbar { width: 100%; border-bottom: 1px solid #ccc; padding: 10 10 10 10; }#dropdown { width: 960px; margin: 0 auto; padding: 0; height: 1em; text-transform: uppercase; text-align: center; font-weight: bold; }#dropdown li { list-style: none; float: left ; }#dropdown li a { padding: 3px 8px; text-decoration: none; }#dropdown li ul { display: none ; background-color: #fff; } #dropdown li:hover ul, #navbar li.hover ul { display: block; position: absolute ; margin: 0; padding: 0; border-bottom: 1px solid #ccc; }#dropdown li:hover li, #navbar li.hover li { float: left; }#dropdown li:hover li a, #navbar li.hover li a { background-color: #fff; color: #000; }.topnav a { color: #000; text-decoration: none; }.topnav a:hover { border-bottom: 1px solid gold; }.column { display:block;list-style-type: none;float: left;margin: 5px 0 0 0;padding: 0 5px 0 0;width:400px; }.column li{ float:left; display:inline;}.column a { color: #999; text-decoration: none; font-size: .7em; }.column a:hover { border-bottom: 0px; } 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