下拉菜單的定位

我正在嘗試創建3個輪胎的下拉菜單。我將第三級子菜單定位在父菜單的左側，但頂部位置沒有正確對齊。下拉菜單的定位

屏幕下方是我得到的結果。

CSS代碼：

/* the menu_new_new is the list, you don't need a wrapping div */ 
#menu_new{ 
    Text-Align: Left; 
    /*width:100%;*/ 
    background:#194eb1; 
    /* height:30px;*/ 
} 

/* only mainmenu_new listitems */ 
#menu_new > li{ 
    display:inline-block; 
    position:relative; 
    line-height:35px; 
} 

/* links in mainmenu_new and both submenu_news */ 
#menu_new a{ 
    display:block; 
    text-decoration:none; 
    padding:0px 10px; 
    color:#fff; 
    text-align:Left; 
} 

/* submenu_news of both levels */ 
#menu_new li ul{ 
    position: absolute; 
    top: 35px; 
    left:0; 
    min-width:150px; 
    background: #194eb1; 
    Text-Align: Left; 


} 
/* submenu text */ 
#menu_new li ul li{ 

    Text-Align: Left; 
    line-height:20px; 
    List-style-type:none; 
    border: 1px solid white; 
} 
/* move the second level submenu_new to the right to don't overlap the parent submenu_new */ 
#menu_new ul ul{ 
    position: absolute; 
    top:auto; 
    left:150px; 
    Z-index: 10; 

} 

/* hover effect for submenu_new links */ 
#menu_new li li a:hover{ 
    background:rgba(255,255,255,0.5); 
} 

/* hide all submenu_news for default */ 
#menu_new li ul{ 
    display: none; 
} 

/* show a submenu_new if the direct parent listitem is hovered */ 
#menu_new li:hover > ul{ 
    display:block; 
}

如何準確地對準頂部位置父菜單的位置？

請參考以下示例代碼：http://jsfiddle.net/asovbLqd/？

Result screen

來源

2014-09-02 Sandeep Reddy K.

您可以使用http://jsfiddle.net/創建代碼演示並共享嗎？這將會更有幫助！ – UID 2014-09-02 14:34:45

我已經在小提琴中創建了代碼。 http://jsfiddle.net/asovbLqd/請參閱此並幫助我。 – 2014-09-02 14:39:14

找到我的答案並在 – UID 2014-09-02 14:57:33

請清潔香港URL enter link description here

#menu_new ul ul{ 
    top:0px; 
} 
#menu_new li ul li{ 
    position:relative; 
}

來源

2014-09-02 14:52:28

立即工作。謝謝。 – 2014-09-02 15:01:03

@SandeepReddyK。 WC – 2014-09-02 15:04:42

編輯：還需要添加position: relative到#menu_new li ul li。

對於#menu_new ul ul，而不是top: auto，請使用top: 0。

來源

2014-09-02 14:50:56 flowstoneknight

以下工作提琴然後所有的子菜單都定位在主菜單的頂部。看到這個： – 2014-09-02 14:54:26

@SandeepReddyK。我想我忽略了它，因爲小提琴只有第一層2條目的第3層菜單。我的錯。 – flowstoneknight 2014-09-02 15:10:20

要解決的上衣全部子菜單，您需要提供「postion:relative到它的父元素」

並修復你需要的是左額外的空間從「<ul>」標籤

這裏刪除默認填充是這兩個問題的解決菲德爾「頂部位置，左側POSI重刑「：

http://jsfiddle.net/asovbLqd/14/

我剛換了如下：

新增position: relative;到子菜單<ul>

#menu_new li ul li { 
    Text-Align: Left; 
    line-height:20px; 
    List-style-type:none; 
    border: 1px solid white; 
    position: relative; 
}

的父元素，並從<ul>移除填充和保證金標籤 #menu_new ul ul { position：absol尤特; top：0; left：150px; z-index：10; 填充：0; margin：0; }

#menu_new li ul { 
    display: none; 
    margin: 0; 
    padding: 0; 
}

希望這會有所幫助！

來源

2014-09-02 14:56:26 UID

然後，所有子菜單都位於主菜單的頂部。看到這個：http：//jsfiddle.net/asovbLqd/12/ – 2014-09-02 15:00:38

感謝您更新與實際要求的小提琴！ – UID 2014-09-02 15:03:18

下拉菜單的定位

回答

相關問題