製作CSS菜單反應迅速，每個項目一定寬度

我使用這個CSS代碼的HTML菜單：製作CSS菜單反應迅速，每個項目一定寬度

#CustomerMenu { 
    margin-bottom:35px; 
} 
#CustomerMenu ul { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 15px 4px 17px 0; 
    list-style: none; 
    -webkit-box-shadow: 0 0 5px rgba(243, 111, 37, 5); 
    -moz-box-shadow: 0 0 5px rgba(243, 111, 37, 5); 
    box-shadow: 0 0 5px rgba(243, 111, 37, 5); 
} 
#CustomerMenu ul li { 
    display: inline-block; 
    position:relative; 
} 
#CustomerMenu ul li a { 
    font: bold 12px/18px Arial; 
    margin-right: -4px; 
    position: relative; 
    padding: 15px 20px; 
    background: #FFFFFF; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 
} 
#CustomerMenu ul li a:hover { 
    background: #F36F25; 
    color: #FFFFFF; 
} 
#CustomerMenu ul li:hover > a { 
    background-color: #F36F25; 
    color: #FFFFFF; 
} 
#CustomerMenu ul li ul { 
    padding: 0; 
    position: absolute; 
    z-index:999; 
    top: 34px; 
    left: 0; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
} 
#CustomerMenu ul li ul li a { 
    background: #666666; 
    display: block; 
    color: #FFFFFF; 
    width:100px; 
} 
#CustomerMenu ul li ul li a:hover { 
    background: #F35F25; 
} 
#CustomerMenu ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
}

我要讓每個<li>鏈接一定的寬度，無論是百分比或固定

另外，我可以使菜單響應，最好的做法是什麼？

http://jsfiddle.net/ko69pyLz/

來源

2014-12-04 user2710234

你知道有多少菜單項目，會是什麼？如果它是一個固定的數字，只需將數字除以100％並使用百分比值即可。 '#CustomerMenu li {width：10％;}' – fontophilic 2014-12-04 14:21:30

使用媒體查詢

我沒有添加完整的代碼，只是顯示你可以如何進行，有很多在網上提供的教程。

@media screen and (min-width:0px) and (max-width:480px), 
screen and (min-device-width:0px) and (max-device-width:480px){ 

    #CustomerMenu ul li { 
     display: block; 
    } 
    #CustomerMenu ul li a { 
     font: bold 24px/36px Arial; 
    } 
}

的jsfiddle - 調整瀏覽器來atake效果

http://jsfiddle.net/ko69pyLz/5/

來源

2014-12-04 12:32:28