CODEWITHSUNDEEP
htmlcss
furyfish
furyfish

Reputation: 2135

horizontal menu dropdown

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

Upvotes: 0

Views: 202

Answers (4)

user1934286
user1934286

Reputation: 1762

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;
}

Upvotes: 1

xpy
xpy

Reputation: 5621

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;
}

Upvotes: 1

Manoz
Manoz

Reputation: 6587

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;

}

Upvotes: 1

Kumar
Kumar

Reputation: 355

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;
}

Upvotes: 0

Related Questions