CSS子菜单项 - 未正确定位

我在网上找到了一个响应式网站教程，但我想将其提供的菜单更改为子菜单下拉菜单中的特定项目。当我尝试添加一个时，它会正确显示子菜单项，但不能正确定位它们。CSS子菜单项 - 未正确定位

下面是代码：

.mainheader nav { 
 
    background-color: #666; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
} 
 
.mainheader nav ul { 
 
    list-style: none; 
 
    margin: 0 auto; 
 
} 
 
.mainheader nav ul ul { 
 
    position: absolute; 
 
    visibility: hidden; 
 
} 
 
.mainheader nav ul li:hover ul { 
 
    background-color: #666; 
 
    visibility: visible; 
 
} 
 
.mainheader nav ul li { 
 
    float: left; 
 
    display: inline; 
 
} 
 
.mainheader nav a:link, 
 
.mainheader nav a:visited { 
 
    color: #FFF; 
 
    display: inline-block; 
 
    padding: 10px 25px; 
 
    height: 20px; 
 
} 
 
.mainheader nav a:hover, 
 
.mainheader nav a:active, 
 
.mainheader nav .active a:link, 
 
.mainheader nav .active a:visited { 
 
    background-color: #CF5C3F; 
 
    text-shadow: none; 
 
} 
 
.mainheader nav ul li a { 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
}

<header class="mainheader"> 
 
    <nav> 
 
    <ul> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Services</a> 
 
     <ul> 
 
      <li><a href="#">Test</a> 
 
      </li> 
 
      <li><a href="#">Test</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

这里是JSFiddle。

我该如何得到它，这样两个测试子菜单项位于服务之下，以服务为中心，在彼此之下？

来源

2016-09-27 Morgan Klaif

[这样]（https://jsfiddle.net/wynLsuwa/2/）或[像这样]（https://jsfiddle.net/wynLsuwa/4/）？ – Pete

添加此得到<li>元素垂直堆叠：

.mainheader nav ul ul li { 
    clear: both; 
}

此外，在默认情况下，一个<ul>就被缩进。这种加入.mainheader nav ul ul固定取向：

padding: 0; 
list-style-type: none;

看到这个：https://jsfiddle.net/wynLsuwa/3/。

来源

2016-09-27 14:07:03 woz

谢谢。完美工作。我会尽快接受答案！ –

另一件事......你知道如何制作它，因此当它处于移动模式时，它会将其余的内容压下来吗？请参阅：https://jsfiddle.net/h5kead8z/ –

在StackOverflow上，通常最好针对每个问题发布一个新问题，以便为将来可能会遇到类似问题的用户提供最大的可搜索性和可读性。 – woz

添加这两个规则：

.mainheader nav ul li ul { 
    padding: 0; 
    min-width: 110px; 
} 
.mainheader nav ul li ul li { 
    float: none; 
    display: block; 
    text-align: left; 
}

小提琴：https://jsfiddle.net/c19hku1o/1/

来源

2016-09-27 14:12:30 Johannes

我假设下面你想达到什么样的？

注：

.mainheader nav ul ul { 
    left: 0; 
    width: 100%; 
}

和：

.mainheader nav ul li { 
    position: relative; 
}

.mainheader nav { 
 
    background-color: #666; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
} 
 
.mainheader nav ul { 
 
    list-style: none; 
 
    margin: 0 auto; 
 
} 
 
.mainheader nav ul ul { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
.mainheader nav ul li:hover ul { 
 
    background-color: #666; 
 
    visibility: visible; 
 
} 
 
.mainheader nav ul li { 
 
    float: left; 
 
    display: inline; 
 
    position: relative; 
 
} 
 
.mainheader nav a:link, 
 
.mainheader nav a:visited { 
 
    color: #FFF; 
 
    display: inline-block; 
 
    padding: 10px 25px; 
 
    height: 20px; 
 
} 
 
.mainheader nav a:hover, 
 
.mainheader nav a:active, 
 
.mainheader nav .active a:link, 
 
.mainheader nav .active a:visited { 
 
    background-color: #CF5C3F; 
 
    text-shadow: none; 
 
} 
 
.mainheader nav ul li a { 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
}

<header class="mainheader"> 
 
    <nav> 
 
    <ul> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Services</a> 
 
     <ul> 
 
      <li><a href="#">Test</a> 
 
      </li> 
 
      <li><a href="#">Test</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

来源

2016-09-27 14:12:33 Tom

CSS子菜单项 - 未正确定位

回答

相关问题