Question

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

以上是导航栏代码的一部分。 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
------------

提前致谢

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

所以现在我已经设法让它发挥作用，但是当它出现时它会移动内容......

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

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

更新代码

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

提前致谢。

--------稍后更新几分钟＆gt;。＆lt; -------

我最终把它全部放在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所做的更改

Answer 1

我知道您的弹出式菜单有问题，如果有的话，这是解决方案之一 DEMO

Answer 2

我认为如果你向ul元素添加顶部位置会有所帮助。

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

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

Answer 3

设置

时

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

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

所以将其改为

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

仅定位直接li儿童

并为您的子菜单ul提供一个班级mySubmenu并将其位置设置为绝对值：

.mySubmenu
{
    position:absolute;
}

CSS下拉菜单不属于父菜单

3 个答案: