horizontal menu dropdown - html

Question

I want to create a horizontal menu dropdown, like this:
Home Menu 1 Menu 2 Menu 3 Menu 4
Sub Menu 11
Sub Menu 12
Sub Menu 13ssssssssssssssssssssssssssssssssssssss
Sub Menu 14
And each sub menu will display in one row, even if sub menu too long
Here's my code

Answer 1

Is thath what you're looking for?
http://jsfiddle.net/VUScp/44/
I just added some CSS, the HTML is intact...
/* CSS code */
#menu {
background: #333;
height: 30px;
}
#menu ul {
margin:0;padding:0;
}
#menu ul a {
text-decoration: none;
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu > ul > li > a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px;
width: 154px;
}
#menu ul ul {
padding:0;
position: absolute;
top:100%;
left:0;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a{
background: #f0f0f0;
color: #333;
border:none;
width:100%;
}
#menu ul ul li a{
display:inline-block;
white-space:nowrap;
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block !important;
}

Answer 2

This may be your answer-http://jsfiddle.net/VUScp/22/
Use height and width auto.
Code i edited in your fiddle-
/* CSS code */
#menu {
background: #333;
height: auto;
}
#menu ul {
margin:0;padding:0;
}
#menu ul a {
text-decoration: none;
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu ul li a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px;
width: auto;
}
#menu ul ul {
padding:0;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a {
background: #f0f0f0;
color: #333;
border:none;
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block!important;
}

Answer 3

EDIT
GOT IT http://jsfiddle.net/VUScp/61/
#menu {
background: #333;
height:30px;
}
#menu ul {
margin:0;
padding:0;
}
#menu ul a {
text-decoration: none;
margin-right:150px; /* Use to adjust top menu width */
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu ul li a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px 12px;
}
#menu ul ul {
padding:0;
position:absolute;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a {
background: #f0f0f0;
color: #333;
border:none;
margin-right:0; /* Undo top menu width for sub menu */
min-width:160px; /* use to adjust sub menu minimum width */
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover, #menu ul li:hover ul li {
display:block !important;
}
A bit closer but not perfect:
http://jsfiddle.net/VUScp/14/
#menu {
background: #333;
height: 30px;
}
#menu ul {
margin:0;padding:0;
}
#menu ul a {
text-decoration: none;
}
#menu ul li {
list-style: none;
float: left;
position: relative;
}
#menu ul li a {
background: #333;
color: #fff;
border: 1px solid #333;
display: block;
padding: 4px;
padding-right: 154px;
}
#menu ul ul {
padding:0;
}
#menu ul ul li {
float:none;
display: none;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
white-space:nowrap;
}
#menu ul ul li a {
background: #f0f0f0;
color: #333;
border:none;
}
#menu ul ul li a:hover {
background: #ccc;
}
#menu ul li a:hover,
#menu ul li:hover ul li {
display:block !important;
}

Answer 4

use this code
html code
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
css code
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #095c80;
}