[RESOLVED] Dropdown Menu - Styling Sub Menu

[dday9]

I'm trying my hardest to create a dropdown menu but I'm running into some issues styling the dropdown menu. Currently this is my code with a JSFiddle:

/* Remove the bullets and margins/padding from the list */
.menubar, .submenubar {
	list-style-type: none;
	display: inline;
	margin: 0;
	padding: 0;
}

/* Display the top items horizontally */
.menubar li {
	display: inline-block;
}

/* Set the width of the text in the list items and set their display to block */
.menubar li a, .menubar li a {
	display: block;
	width: 5em;
}

/* Hide any drop down menus */
.submenubar {
	display: none;
	left: 0;
	position: absolute;
	top: 48px;
	visibility: hidden;
}

/* Display the sub items vertically */
.submenubar li {
	display: block;
	float: left;
}

/* Display the drop down menus on hover */
.menubar li:hover .submenubar {
	display: block;
	visibility: visible;
}

<ul class="menubar">		
	<li><a href="#">Top Menu1</a></li>
	<li><a href="#">Top Menu2</a>
		<ul class="submenubar">
			<li><a href="#">Sub Menu1</a></li>
			<li><a href="#">Sub Menu2</a></li>
			<li><a href="#">Sub Menu3</a></li>
		</ul>
	</li>
	<li><a href="#">Top Menu3</a></li>		
</ul>

What I would like to do is have the sub menu be vertical, but for whatever reason it's horizontal like the top menu is. I thought that displaying it as a block element and floating it to the left would do the trick.

[tr333]

For starters, you can remove the "visibility" properties; the show/hide is already handled by "display". Also remove the "float", as you want it to be a regular vertical <ul> for the dropdown.

https://jsfiddle.net/o3wz20vz/2/

A quick google found this example, which might help you see where to go from there: http://cssdeck.com/labs/another-simp...-dropdown-menu

[dday9]

Thanks for that! I also changed the Top and Left properties for my submenubar class to where both are now auto so that it drops down below it's top menu.