1. 首頁
  2. 問答
  3. 橫向菜單下拉

橫向菜單下拉

2013-02-21 245 views
0

我想創建一個橫向菜單下拉列表中，這樣的：橫向菜單下拉

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

每個子菜單將會在一排顯示，即使子菜單太長

這裏的my code

來源

2013-02-21 furyfish

+0

更好地張貼在你的問題的代碼了。 – fredsbend 2013-02-21 07:25:25

+0

明白了。請參閱編輯的文章 – fredsbend 2013-02-21 08:28:47

回答

1

編輯的thath你在找什麼？ 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; 
}

來源

2013-02-21 08:13:49 xpy

+0

我更喜歡我的，但我擴展了你的想法。 http://jsfiddle.net/VUScp/61/ – fredsbend 2013-02-21 09:37:17

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

來源

2013-02-21 07:24:39 Kumar

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

來源

2013-02-21 07:40:56 fredsbend

1

這可能是你的答案 - http://jsfiddle.net/VUScp/22/

使用height和width汽車。

代碼，我在你的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; 

}

來源

2013-02-21 07:46:45 Manoj

相關問題

 相關問題