当子导航下降时，如何防止链接向下移动？

Question

我正在尝试在HTML和CSS中创建一个下拉导航栏，但是我遇到了问题。 刚开始，我无法使子菜单的宽度与它们放下的按钮的宽度相同，因此我将其设置为width：100％，并将无序列表设置为position：relative。 那行得通，但是现在子菜单下拉时，栏上的所有链接也会下拉。 我不确定我的解释是否正确，但这是小提琴https://jsfiddle.net/WW3bh/21605/ （将鼠标悬停在章节或Tech Ed上以查看问题）每当我解决一个问题时，另一个都会返回。 我想念什么？

HTML：

<body>
<div id="wrapper">
<div id="headercont">

<div id="navmain">
    <ul>
        <li class="link_nav"> <a class="title_nav" href="">Home</a></li>
        <li class="link_nav"> <span class="title_nav">Chapter</span> 
            <ul class="sub">
                <li> <a href="">About</a></li>
                <li> <a href="">Officers</a></li>
                <li> <a href="">Advisor</a></li>
                <li> <a href="">News</a></li>
            </ul> </li>
        <li class="link_nav"> <span class="title_nav">Tech Ed</span>
            <ul class="sub">
                <li> <a href="">Classes</a></li>
                <li> <a href="">Teachers</a></li>
            </ul> </li>
        <li class="link_nav"> <a href="">Design Brief</a></li>
        <li class="link_nav"> <a href="">About</a></li>
    </ul>      
</div>
</div>
</div>
</body>

CSS：

#wrapper {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    position: relative;
}

#header #mainnav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#mainnav ul .nav_link {
    float: right;
    width: 10%;
    list-style-type: none;
}
#wrapper #mainnav {
    color: #2B3A42;
}
#wrapper #headercont {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    float: left;
}
#navmain ul .link_nav {
    list-style-type: none;
    display: inline-block;
}
#wrapper #headercont #navmain {
    height: 30px;
    width: 900px;
    background-color: #151C23;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    float: left;
    margin-top: auto;
    margin-bottom: auto;
}
#headercont #navmain ul {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 0px;
}
ul .link_nav a {
    text-decoration: none;
    color: #D9E5E8;
    font-size: 22px;
    padding-left: 30px;
    padding-right: 30px;
}
.title_nav {
    text-decoration: none;
    color: #D9E5E8;
    font-size: 22px;
    padding-left: 40px;
    padding-right: 40px;
    width: 100px;
    position: relative;
}

.sub {
    display: none;
    list-style-type: none;
    position: relative;
}

ul .link_nav:hover {
    background-color: #D9E5E8;
}

ul .link_nav:hover .title_nav {
    color: #151C23;
} 

ul .link_nav:hover .sub{
    display: block;
    background-color: #5C6E90; 
}

.sub li:hover {
    background-color: #D9E5E8;
}

.sub li:hover a{
        color: #151C23;
}

.sub li {
    width: 100%;
}

Answer 1

你快到了

使.sub下拉列表position:absolute; 它将停止移动一切。 添加并与top:0;一起玩top:0; 并且在.sub还left:0px值，这会将其相对于父<li>并提供您想要的下拉效果。

https://jsfiddle.net/JohnDevelops/WW3bh/21609/

^ Ive增加了position:relative; 到父<li>并position:absolute;top:20px;left:0; 到下拉菜单<ul> 。

当子导航下降时，如何防止链接向下移动？

问题描述

1 个解决方案

解决方案1
0 2015-05-09 22:31:05

当子导航下降时，如何防止链接向下移动？

问题描述

1 个解决方案

解决方案1 0 2015-05-09 22:31:05

解决方案1
0 2015-05-09 22:31:05