響應式水平菜單（表格單元格），懸停時垂直下拉

這裏您可以找到一個菜單。響應式水平菜單（表格單元格），懸停時垂直下拉

<ul id="nav"><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">Home</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">BBB</div></div></div></a><ul><li><a href="/overall"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">1</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">2</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">333</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">44444</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">5</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">666</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">777s</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">8</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">99s</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">10r</div></div></div></a></li></ul> 
    </li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">CCCCC</div></div></div></a><ul><li><a href="/">tak</a></li><li><a href="/">a</a></li><li><a href="/">b</a></li><li><a href="/">c</a></li><li><a href="/">cccccc</a></li><li><a href="/">d</a></li><li><a href="/">e</a></li></ul> 

#nav { 
    display:table; 
    margin: 0; padding: 0; 
} 
#nav a 
{ 
    background-color: red; 
    display: block; 
    width: 100%; 
    text-align: center; 
} 
#nav > li { 
    list-style:none; 
    position:relative; 
    display:table-cell; 
    width:1%; 
    text-align: center; 
    background-color: #F1F1D9; 
    color: black; 
    font-family: 'Arial'; 
    font-size: 14px; 
} 
#nav ul li { 
    width: 100%; 
    display:block; 
    background:#F1F2EA; 
    position:relative; 
    color: black; 
    font-family: 'Arial'; 
    font-size: 14px; 
    white-space:nowrap; 
    text-align: left; 
} 
#nav ul li a { 
    padding: 0px 0 0px 6px; 
} 
#nav ul { 
    display:none; 
    margin: 0; padding: 0; 
} 
#nav li:hover > ul { 
    display:block; 
    position:absolute; 
    z-index:1000; 
} 
ul#nav > li:hover > ul { 
    /*margin-left: -10px;*/ 
} 
#nav > li ul li ul { 
    left:100%; 
    top:-2px; 
    white-space:nowrap; 
} 
#nav li:hover > a, #nav li:hover { 
    background-color: #12142E; 
    color: #FFFF00; 
} 
#nav li, li a { 
    color:#000; 
    text-decoration:none; 
} 

.menuIcons 
{ 
    display: table-cell; 
    vertical-align: middle; 
    height: 38px; 
    background-color: green; 
} 
.menuIcons img 
{ 
    max-width: 25px; 
    max-height: 25px; 
    width: 100%; 
} 
.menuWrapper { display:table; } 

.menuText 
{ 
    padding-left: 10px; 
    display: table-cell; 
    vertical-align: middle; 
}

http://jsfiddle.net/ZQs3h/

更加語義，我突出了綠色的主菜單項。我只談論水平滑桿。這些綠地

應該是100％widthed，並把中心
應該只是把中心，但要小心，邊緣仍然必須作爲鏈接

也不100% width，既不margin: 0 auto幫助。

來源

2014-01-25 John Smith

我真的不知道如何修復你的代碼。我相信你正在尋找這樣的：Live demo (click).

唯一棘手的部分是，Firefox將不display: table-cell元素上承認position: relative。爲了解決這個問題，我把嵌套的ul包裝在的div中。這也可以使用display: inline-block而不是table和table-cell來完成，但是您需要手動輸入每個li的寬度。最好的方法可能是flexbox，但在瀏覽器中不太受支持。

樣品標記：

<ul class="nav"> 
    <li><a>Home</a></li> 
    <li> 
     <a>Our Staff</a> 
     <div class="pos-fix"> 
     <ul class="vert"> 
     <li><a>Jon Skeet</a></li> 
     <li><a>Spiderman</a></li> 
     </ul> 
     </div> 
    </li> 
    <li><a>Contact Us</a></li> 
    </ul>

樣品CSS：

body, ul, li, a { 
    margin: 0; 
    padding: 0; 
} 

a { 
    cursor: pointer; 
} 

.nav { 
    list-style: none; 
    width: 100%; 
    display: table; 
} 

.nav li { 
    display: table-cell; 
    background: red; 
} 

.nav a { 
    display: block; 
    text-align: center; 
    padding: 10px; 
} 

.pos-fix { 
    position: relative; 
} 

.nav a:before { 
    content: ''; 
    display: inline-block; 
    height: 30px; 
    width: 30px; 
    background: url(http://placehold.it/30x30); 
    float: left; 
    margin: -5px 0 0 0; 
} 

.nav a:hover { 
    background: black; 
    color: yellow; 
} 

.nav li:hover .vert { 
    display: block; 
} 

.vert { 
    display: none; 
    width: 100%; 
    position: absolute; 
} 
.vert li { 
    width: 100%; 
    display: block; 
}

來源

2014-01-25 02:12:22 m59

響應式水平菜單（表格單元格），懸停時垂直下拉

回答

相關問題