Jump to content

Adding columns to drop down menu


lora
 Share

Recommended Posts

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 by lora
Link to comment
Share on other sites

  • 3 weeks later...

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...