CSS下拉菜单不属于父菜单

I was just having a small problem and I'm not sure how to fix it. I'm still new to HTML and CSS and I was trying to get the drop down menu to work, but after looking at various tutorials I can only get it so when I hover over the parent folder the sub menu falls either to the left or right and not underneath the parent.

我只是遇到一个小问题而且我不确定如何修复它。我仍然是HTML和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>

Above is the portion of the code for my nav bar. html have files to them

以上是导航栏代码的一部分。 html有文件给他们

This is my CSS:

这是我的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;
}

Currently the code works in that it shows the submenu to the right of the parent menu. I'm not sure how to get it to fall directly below the parent menu, any help would be greatly appreciated. Or any tips if my code looks a little odd this is my first semester in HTML, CSS and programming in general. Shows up like this (just showing the one menu

目前代码的工作原理是它显示父菜单右侧的子菜单。我不知道如何让它直接落在父菜单下面,任何帮助将不胜感激。或者任何提示,如果我的代码看起来有点奇怪,这是我在HTML,CSS和编程中的第一个学期。像这样显示(只显示一个菜单

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

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

Thanks in advance

提前致谢

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

------------------------------更新5/9/2014 -------------- -

So now I've managed to get it to work, but when it shows up it moves the content....

所以现在我已经设法让它工作,但是当它出现时它会移动内容....

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

i'm thinking it might have to do with the float:left and where I've cleared the float or the positioning. When I add a position: absolute it just moves the sub menu over the parent menu though.

我想它可能与浮子有关:左边和我已经清除浮子或定位的地方。当我添加一个位置:绝对它只是将子菜单移动到父菜单上。

Updated Code

/*
 * 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;
 }

Thanks in advance.

提前致谢。

--------Update few mins later >.< -------

--------稍后更新几分钟。<-------

I ended up putting it all in a div and formatting the div now it works.

我最终将它全部放在一个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;
}

changes made to html just enclosed in

对封装的html所做的更改

3 个解决方案

#1

I understand that you have difficulty with your pop-up menu, if so, here's one of the solutions DEMO

我知道您的弹出式菜单有困难,如果是这样,这是DEMO解决方案之一

#2

I think it will help if you add top position to ul element.

我认为如果你将最高位置添加到ul元素会有所帮助。

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

Here display: block; will be more apropriate, I think.

这里显示:block;我认为会更合适。

#3

when you set

当你设置

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

it applies it to all of the li elements including the submenu, which means all the li align horizontally including the submenu, because of the display: inline;

它将它应用于所有li元素,包括子菜单,这意味着所有的li水平对齐包括子菜单,因为显示:inline;

so change it to

所以改成它

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

to target only direct li children

目标只针对李儿童

and give your submenu ul a class mySubmenu and set its position to absolute:

并给你的子菜单ul一个mySubmenu类,并将其位置设置为绝对:

.mySubmenu
{
    position:absolute;
}

#1