当子导航下降时,如何防止链路向下移动?

时间:2022-01-11 20:28:57

I'm trying to create a drop down navigation bar in HTML and CSS, but I'm having issues with it. At first, I couldn't get the submenus to be the same width as the buttons they dropped down from, so I set them to width:100% and the unordered list to be position: relative. That worked, but now when the submenus drop down, all of the links from the bar drop down also. I'm not sure if I'm explaining it right, but here's the fiddle https://jsfiddle.net/WW3bh/21605/ (Hover over Chapter or Tech Ed to see the problem) Whenever I fix one problem, the other returns. What am I missing?

我正在尝试在HTML和CSS中创建一个下拉导航栏,但我遇到了问题。起初,我无法使子菜单的宽度与它们从下拉的按钮的宽度相同,所以我将它们设置为宽度: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%;
}

1 个解决方案

#1


You're nearly there.

你快到了。

Make the .sub dropdown list position:absolute; and it will stop moving everything around. Add and play with top:0; and left:0px values on .sub also, this will position it relative to the parent <li> and give the dropdown effect you're looking for.

使.sub下拉列表位置:绝对;它将停止移动一切。添加和播放顶部:0;并且左:在.sub上也是0px值,这将相对于父

  • 定位它并给出你正在寻找的下拉效果。

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

    ^ Ive added position:relative; to the parent <li> and position:absolute;top:20px;left:0; to the dropdown <ul>.

    ^我添加了位置:相对;到父

  • 和位置:绝对;顶部:20px;左:0;到下拉列表

  • #1


    You're nearly there.

    你快到了。

    Make the .sub dropdown list position:absolute; and it will stop moving everything around. Add and play with top:0; and left:0px values on .sub also, this will position it relative to the parent <li> and give the dropdown effect you're looking for.

    使.sub下拉列表位置:绝对;它将停止移动一切。添加和播放顶部:0;并且左:在.sub上也是0px值,这将相对于父

  • 定位它并给出你正在寻找的下拉效果。

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

    ^ Ive added position:relative; to the parent <li> and position:absolute;top:20px;left:0; to the dropdown <ul>.

    ^我添加了位置:相对;到父

  • 和位置:绝对;顶部:20px;左:0;到下拉列表