CSS幫助 - 調心megamenu

我下面這個教程，我試圖把它修改我的使用：http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/ ...CSS幫助 - 調心megamenu

如果我做下拉DIV是相同的全寬度的水平菜單欄， 我如何確保它與菜單欄對齊？

我發現我可以更改以下CSS規則中的left聲明以使下拉菜單與菜單欄對齊。

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns, 
#menu li:hover .dropdown_4columns, 
#menu li:hover .dropdown_5columns { 
    left:-1px; /* <-- change this to left: -150px (or whatever value will get it to align) */ 
    top:auto; 
}

但這似乎不是最好的辦法，我這樣做，因爲不同的瀏覽器渲染菜單略有不同，因此爲了得到下拉對齊要求不同的值。

什麼是更好的方式讓下拉菜單與菜單欄對齊？或者也許有人可以指點我一個更好的教程？

我已將教程中的代碼複製到此：http://jsfiddle.net/Pnn6V/。請忽略jsfiddle的輕微問題，因爲它不是我面臨的問題/而不是我所問的問題。

來源

2012-03-20 UserIsStuck

我投資我的時間解決了問題的jsfiddle：d – Jack 2012-03-20 13:52:54

@Pankaj - 我非常感謝你和你的鼓勵。對我來說學習是一個很好的教訓。但不幸的是沒有回答我原來的問題的關鍵部分。 – UserIsStuck 2012-03-20 18:11:34

我不知道你的問題實際上是什麼，如果你想根據菜單欄下拉菜單，你需要刪除這些寬度，你可以確保這樣做... – Jack 2012-03-20 18:21:57

你從教程改變菜單的排列使一些CSS設置也需要改變，以得到想要的效果。

我希望下拉div與完全相同的全寬度菜單欄，並與菜單欄對齊。

在教程它說

爲了有一個完美的下拉容器，我們需要指定寬度爲每一個

.dropdown_1column {width: 140px;} 
.dropdown_2columns {width: 280px;} 
.dropdown_3columns {width: 420px;} 
.dropdown_4columns {width: 560px;} 
.dropdown_5columns {width: 700px;}

所以你應該根據您的需要調整所有寬度。

我在你的CSS做的是

#menu li .align_right { 
    /* Rounded Corners */ 
    /*-moz-border-radius: 5px 0px 5px 5px; 
    -webkit-border-radius: 5px 0px 5px 5px; 
    border-radius: 5px 0px 5px 5px;*/ 
} 

#menu li:hover .align_right { 
    /* left:auto; 
    right:-1px;*/ 
    top:auto; 
}

我，因爲它是具有不同定位教程刪除您1column的右邊界（這是正確的），哪些是你與此1column做的是你把這個留下來，所以right border必須被刪除。這是主要原因。

看到這個輸出

有這麼多的教程大型下拉它取決於你的需要的菜單，請他們是否滿足您的需要看一看。

Jquery and css dropdowns

，我會建議你仔細閱讀教程，並改變相應的CSS /相反，這將清除這麼多的CSS疑慮/你的概念，很快你就會輕鬆地學習CSS。這裏和一天不遠處時，你會回答問題的CSS :)

編輯：

根據您的評論我理解這一點：

我所做的是：

我相應改變寬度：

.dropdown_1column {width: 930px;} 
.dropdown_2columns {width: 931px;} 
.dropdown_3columns {width: 930px;} 
.dropdown_4columns {width: 932px;} 
.dropdown_5columns {width: 932px;}

以前留下財產被應用在所有列這是不正確的，你必須在每個應用單獨的左值按我不

#menu li:hover .dropdown_1column 
{ 
    left:-841px; 
    top:auto; 
} 
#menu li:hover .dropdown_2columns 
{ 
    left:-2px; 
    top:auto; 
} 
#menu li:hover .dropdown_3columns 
{ 
    left:-736px; 
    top:auto; 
} 
#menu li:hover .dropdown_4columns 
{ 
    left:-248px; 
    top:auto; 
} 
#menu li:hover .dropdown_5columns { 
    left:-110px; 
    top:auto; 
}

希望這是明確的......

來源

2012-03-20 12:49:10 Jack

雖然這是解決方案，但它不能幫助OP解決問題。簡短的描述會很好。 – Christoph 2012-03-20 12:54:34

現在很好，我猜 – Jack 2012-03-20 13:01:59

不錯，現在+1; =） – Christoph 2012-03-20 13:09:52

您可以嘗試在你的頁面中加入CSS復位，減少瀏覽器的不一致性 http://meyerweb.com/eric/tools/css/reset/

來源

2012-03-20 11:59:21 Luca

這reset.css是相當無用的。很多代碼，最小的影響，因爲你必須重新聲明一切。直接在需要的地方直接聲明邊距/ Paddings是更好的方法。 – Christoph 2012-03-20 12:57:11

CSS幫助 - 調心megamenu

回答

相關問題