水平菜单下拉菜单

时间：2013-02-21 07:16:27

标签： html css

我想创建一个水平菜单下拉列表，如下所示：

Home   Menu 1   Menu 2   Menu 3   Menu 4
       Sub Menu 11
       Sub Menu 12
       Sub Menu 13ssssssssssssssssssssssssssssssssssssss
       Sub Menu 14

每个子菜单将显示在一行中，即使子菜单太长

这是my code

4 个答案:

答案 0 :(得分：1)

修改

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

更近但不完美：

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

答案 1 :(得分：1)

这可能是您的答案 - http://jsfiddle.net/VUScp/22/

使用height和width自动

我在你的小提琴中编辑的代码 - 

/* 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;

}

答案 2 :(得分：1)

这就是你要找的东西吗？ http://jsfiddle.net/VUScp/44/ 我刚刚添加了一些CSS，HTML完好无损...... 

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

答案 3 :(得分：0)

使用此代码

html代码

<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代码

#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;
}
相关问题
最新问题