與Firefox正常工作，但谷歌瀏覽器和瀏覽器調整大小有一些問題？

Question

我已經創建了菜單。這在firefox中工作得很好，但在谷歌瀏覽器中，懸停不顯示。另外，當我調整我的瀏覽器部分菜單隱藏並且不可滾動時，我嘗試使用MENU width:100%;，但是當我這樣做並調整瀏覽器大小時，類佈局失真並顯示出菜單行，菜單變形。無論如何要解決這個問題： 所以我強制定義菜單的寬度爲1366px，以避免菜單失真。請幫忙。

#mainmenu { 
    width:1366px; 
    height:50px; 
    /*position:relative;*/ 
    position:fixed; 
    top:18px; 
    padding-left:200px; 
    line-height:50px; 
    background:#0b2c3d; 
    z-index:10;  
    box-shadow:5px 0px 15px #7e7a7a; 
} 
#mainmenu, #dd_home, #dd_profile, #dd_achv, #dd_contact,#dd_login { 
    cursor:pointer; 
} 
#mainmenu ul { 
    list-style-type:none; 
    margin:0px; 
    padding:0px;   
} 
#mainmenu ul li { 
    text-decoration:none; 
    float:left; 
    /*border-right-style:dotted;*/ 
} 
#mainmenu ul li a { 
    text-decoration:none; 
    display:block; 
    width:150px; 
    text-align:center; 
    text-transform:uppercase;   
    color:white; 
} 
#mainmenu ul li.home { 
    width:150px; 
    text-align:center; 
    margin-top:-5px; 
    border-bottom:5px solid #0a68fb; 
} 
#mainmenu ul li.home:hover { 
    display:block; 
    background-color:#0a68fb; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
} 
#mainmenu ul li.profile { 
    margin-top:-5px; 
    border-bottom:5px solid #ed4901; 
} 
#mainmenu ul li.profile:hover { 
    display:block; 
    background-color:#ed4901; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
} 
#mainmenu ul li.achv { 
    margin-top:-5px; 
    border-bottom:5px solid #27fb06; 
} 
#mainmenu ul li.achv:hover { 
    display:block; 
    background-color: #27fb06; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
} 
#mainmenu ul li.contact { 
    margin-top:-5px; 
    border-bottom:5px solid #b70bfb; 
} 
#mainmenu ul li.contact:hover { 
    display:block; 
    background-color:#b70bfb; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
} 
#mainmenu ul li.contact:checked { 
    margin-top:-5px; 
    border-bottom:10px solid #b70bfb; 
} 
#mainmenu ul li.login { 
    margin-top:-5px; 
    border-bottom:5px solid #36b096; 
} 
#mainmenu ul li.login:hover { 
    display:block; 
    background-color:#36b096; 
    border-top-left-radius:5px; 
    border-top-right-radius:5px; 
} 
#mainmenu ul li.nepal { 
    margin-top:-5px; 
    border-bottom:5px solid #f8d605; 
    overflow:hidden; 
} 

HTML

<div id="mainmenu"> 
    <ul> 
     <li class="home"><a href="about.aspx"> Home</a> 
     <li class="profile"><a href="profile.aspx" >Profile</a> 
     <li class="achv"><a href="achv.aspx">achievements</a> 
     <li class="contact"><a href="Contact.aspx">Contact</a> 
     <li class="login"><a href="login.aspx">Log in</a> 
     <li class="nepal"><a href="#">jaya nepal</a></li> 
    </ul> 
</div> 

的jsfiddle：jsfiddle.net/gzeLS

Answer 1

如果你把這個小的變化，例如在家鄉鏈路上：

#mainmenu ul li.home:hover 

TO

#mainmenu ul li.home a:hover 

然後你會注意到你的懸浮屬性在Chrome和Firefox中正確顯示。

JSFiddle for this fix

UPDATE

And here's a fix for your second problem.

你需要設置你的主人div來center的text-align以便在容器內居中ul。典型的margin: 0 auto;將不起作用。我還添加了一個white-space:nowrap;以防止在屏幕小於水平對齊的菜單項時發生斷裂。

希望這會有所幫助。

Answer 2

取出display:block從:hover風格：

jsfiddle.net/gzeLS/1

或者，添加display:block到非hover樣式：

jsfiddle.net/gzeLS/2

我不知道爲什麼沒有按鉻」那樣。我會說這是一個Chrome錯誤。

要使菜單調整大小，請使用max-width和min-width做一些工作。在文本開始重疊之前，您只能獲得大約600px的寬度。通過給菜單min-width防止重疊。

jsfiddle.net/gzeLS/3

但後來，因爲你已經發現，在菜單的一部分時，窗口太小被隱藏。即使您在身上設置了min-width以使滾動條出現，您仍然無法滾動菜單，因爲您正在使用position: fixed。如果窗口低於某個寬度，最好的辦法是使用媒體查詢來縮小字體大小。

jsfiddle.net/gzeLS/4

編輯：這裏是我提出去哪裏the third jsFiddle中心工作，無論窗口大小的變化的故障。

• 爲了讓菜單以填充頁面，而不是指定width，指定left和right。
• 在中心位置的菜單項：
  • 使用text-align: center菜單，不padding上。這將考慮到不同的窗口大小。
  • 在ul上設置display: inline-block使其成爲中心。
  • 在ul上設置width和max-width。使用width允許我們按百分比調整li元素的大小，如果窗口太小，可以讓它們縮小。而max-width讓我們讓我們居中對齊菜單項，當窗口爲的寬度足以滿足菜單寬度時，在左側和右側留出邊距。
• 爲防止菜單項在屏幕太小時打包，請在ul上設置white-space: nowrap。
• 當窗口太小而不適合整個菜單時，爲防止菜單項的文本重疊：
  • 設置菜單上的min-width。
  • 設置overflow: hidden的菜單項。
• 爲了簡單起見，我也將類別列表中的冗餘樣式合併到li選擇器中。

下面是我在the fourth jsFiddle所做的更改拿到菜單，以適應較小的窗口，並保持可見：

• 從菜單中刪除min-width，使其能夠縮小以適合窗口。
• 添加媒體查詢樣式逐漸減小字體大小窗口大小減小：

@media all and (max-width: 640px) { #mainmenu { font-size: 90%; } } 
@media all and (max-width: 590px) { #mainmenu { font-size: 80%; } } 
@media all and (max-width: 530px) { #mainmenu { font-size: 70%; } } 
@media all and (max-width: 468px) { #mainmenu { font-size: 60%; } }