CSS下拉菜單不屬於父菜單

我只是有一個小問題，我不知道如何解決它。我還是HTML和CSS的新手，我試圖讓下拉菜單起作用，但在查看各種教程後，我只能看到它，所以當我將鼠標懸停在父文件夾上時，子菜單會落在左側或正確而不是在父母之下。CSS下拉菜單不屬於父菜單

<ul id="navigate"> 
    <li class="current"> <a href = "index.html">Home</a></li> 
    <li> <a href = ".html" >A</a> 
     <ul> 
      <li><a href = ".html">B </a></li> 
     </ul> 
    </li> 
    <li> <a href = ".html">C</a></li> 
    <li> <a href = ".html">D</a></li> 
    <li> <a href = ".html">E</a></li> 
    <li> <a href = ".html">F</a></li> 
</ul>

上面是我的導航欄的代碼部分。 HTML所擁有的文件給他們

這是我的CSS：

/* 
* Navigation Bar 
*/ 
#navigate 
{ 
    padding: 0; 
    margin-top: 5px; 
    list-style-type: none; 
    color: black; 
    float:left; 
    width: 100%; 
    background-color: #00FF00; 
} 

#navigate li 
{ 
    display: inline; 
    position: relative; 
} 

#navigate li a 
{ 
    float: left; 
    width: 7em; 
    background-color: #00FF00; 
    text-decoration: none; 
    border-right: 1px solid #FFFFFF; 
    padding-left: 1em; 
    padding-right: 1em; 
    text-align: center; 
} 

#navigate li a:hover 
{ 
    background-color: #D1E751; 
    color: #26ADEA; 
} 

#navigate li.current a 
{ 
    background:#D1E751; 
} 

/* 
* SubMenu 
*/ 
#navigate li ul 
{ 
    display: none; 
    position: absolute; 
    padding: 0; 
} 


#navigate li:hover ul 
{ 
    display: inline-block; 
}

目前的代碼工作的，因爲它顯示了子菜單的父菜單的右側。我不知道如何讓它直接落在父菜單下，任何幫助將不勝感激。或者，如果我的代碼看起來有點奇怪，這是我的第一學期HTML，CSS和編程的一般技巧。顯示像這樣（只顯示一個菜單

parent  sub 
---------------------------------- 
    A  |  B  | 
---------------------------------- 

I would like it to look like this 
------------ 
    A  | Parent 
------------ 
    B  | sub 
------------

在此先感謝

------------------------- ----- UPDATE 5/9/2014 ----------------

所以現在我已經設法讓它工作，但是當它顯示它移動內容....

------------ 
    A  | Parent 
------------ 
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
------------ 
    A  | Parent 
------------ 
    B  | sub contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
------------ 
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent

我想它可能與浮子做：左，在那裏我已經CLE浮動或定位。當我添加一個位置：絕對它只是將子菜單移動到父菜單上。

更新的代碼提前

/* 
* Navigation Bar 
*/ 
#navigate 
{ 
padding: 0; 
margin-top: 5px; 
list-style-type: none; 
color: black; 
width: 100%; 
background-color: #00FF00; 
position: relative; 
} 

#navigate li 
{ 
float: left; 
padding-right: 2px; 
} 

#navigate li a 
{ 
float: left; 
width: 7em; 
background-color: #32CD32; 
text-decoration: none; 
text-align: center; 
border-radius: 25px; 
padding: 5px; 
margin: auto; 
} 

#navigate li a:hover 
{ 
background-color: #D1E751; 
color: #26ADEA; 
} 

#navigate li.current a 
{ 
background:#D1E751; 
} 

/* 
* SubMenu 
*/ 

#navigate ul 
{ 
    display: none; 
    list-style: none; 
    padding: 0; 
} 

#navigate ul li 
{ 
    clear: left; 
    display: block; 
} 


#navigate li:hover ul 
{ 
    display: block; 
}

感謝。

--------更新幾分鐘後>。 < -------

我最終把它全部放在一個div中，現在格式化div。由

/* 
* Navigation Bar 
*/ 
#navigate 
{ 
padding: 0; 
margin-top: 5px; 
list-style-type: none; 
color: black; 
width: 100%; 
background-color: #00FF00; 
position: relative; 
} 

#navigate li 
{ 
float: left; 
padding-right: 2px; 
} 

#navigate li a 
{ 
float: left; 
width: 7em; 
background-color: #32CD32; 
text-decoration: none; 
text-align: center; 
border-radius: 25px; 
padding: 5px; 
margin: auto; 
} 

#navigate li a:hover 
{ 
background-color: #D1E751; 
color: #26ADEA; 
} 

#navigate li.current a 
{ 
background:#D1E751; 
} 

/* 
* SubMenu 
*/ 

#navigate ul 
{ 
    display: none; 
    list-style: none; 
    padding: 0; 
} 

#navigate ul li 
{ 
    clear: left; 
    display: block; 
} 


#navigate li:hover ul 
{ 
    display: block; 
} 

.nav 
{ 
    position: absolute; 
    z-index: 2; 
    margin: auto; 
}

更改HTML只是封閉在

來源

2014-05-08 user3613892

我發現使用CSS菜單製造商真的幫助創建CSS菜單。一旦你創建了一個菜單，就可以輕鬆地對其進行逆向工程。它也提供了良好的學習體驗。在這裏檢查 - http://cssmenumaker.com/ – lukeocom

我覺得如果你添加首要位置，以一個UI元素，它將幫助。

#navigate li ul 
{ 
    display: none; 
    position: absolute; 
    padding: 0; 
    top: 100%; 
    left: 0; 
} 
#navigate li:hover ul 
{ 
    display: block; 
}

這裏顯示：block;我認爲會更合適。

來源

2014-05-08 07:55:25 kmike

當你設置

#navigate li 
{ 
display: inline; 
position: relative; 
}

它，它適用於的li元素，包括子菜單，其中所有的李對齊水平指的是包括子菜單的所有因爲display: inline;

這樣的變化，它到

#navigate > li 
{ 
display: inline; 
position: relative; 
}

只能指定目標li兒童

，給你的子菜單ul類mySubmenu，並設置其位置以絕對的：

.mySubmenu 
{ 
    position:absolute; 
}

來源

2014-05-08 07:57:02 Banana

據我所知，你有你的彈出菜單中的困難，如果是這樣，這裏的解決方案之一DEMO

來源

2014-05-08 08:11:13 AlexPrinceton

CSS下拉菜單不屬於父菜單

回答

相關問題