html - 让div延伸超过 parent 的填充范围？

我正在尝试制作一个菜单，其中每个链接的左侧都有线条，将鼠标悬停在链接上时，线条会向左延伸超过父容器的宽度并延伸至视口的边缘，而不是像现在一样，将链接的文本强制显示在右侧。

我怎样才能做到这一点？

Codepen：http://codepen.io/anon/pen/zZdwLb。

HTML：

<nav>

    <ul id="menu">

        <li>

            <a>Menu</a>

             <div id="dropdown">

            <ul>

                <li class="navLink active"><a><div class="navLine"></div>Home</a></li>

                <li class="navLink"><a><div class="navLine"></div>About</a></li>

                <li class="navLink"><a><div class="navLine"></div>Skills</a></li>

                <li class="navLink"><a><div class="navLine"></div>Work</a></li>

                <li class="navLink"><a><div class="navLine"></div>Contact</a></li>

            </ul>

            </div>

        </li>

    </ul>

    </nav>

CSS：

nav
{
position: fixed;
top: 30px;
left: 30px;
z-index: 99;
}

nav ul
{
display: table;
list-style-type: none;
padding: 0;
}

nav ul > li > a
{
font-family: 'Open Sans', sans-serif;
color: #fff;
font-weight: 700;
font-size: 14px;
cursor: pointer;
}

nav > ul > li > a:first-of-type
{
cursor: default;
text-decoration: none;
}

.navLink > a:hover,
.navLink.active > a
{
color: #1957ef;
text-decoration: none;
}

nav ul > li:first-of-type:hover #dropdown
{
height: auto;
visibility: visible;
opacity: 1;
}

nav > ul > li:first-of-type:hover > a
{
opacity: 0;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}

#dropdown
{
position: absolute;
top: 0;
visibility: hidden;
height: 1px;
opacity: 0;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}

.navLink > a
{
width: 100%;
height: 100%;
display: flex;
align-items: center;
}

.navLink .navLine
{
height: 2px;
width: 30px;
background: #fff;
margin-right: 10px;
transition: all linear 0.1s;
-webkit-transition: all linear 0.1s;
-moz-transition: all linear 0.1s;
}

.navLink.active > a > .navLine,
.navLink:hover > a > .navLine
{
width: 50px;
background: #1957ef;
}

.sectionContent
{
height: 100%;
width: 100%;
padding: 30px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: flex;
align-items: center;
}

最佳答案

您的意思是这样的codepen

我只是将其添加到悬停中

.navLink.active > a > .navLine,
.navLink:hover > a > .navLine
{
  width: 57px;
  background: #1957ef;
  margin-left: -28px;
}

关于html - 让div延伸超过 parent 的填充范围？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42790702/