Question

我正在尝试创建一个菜单，其中的链接在每个链接的左侧有一条线，在链接上悬停时，该行向左延伸过去父容器的宽度和视口的边缘而不是像目前那样强制链接的文本到右边。

我该怎么做？

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

HTML：

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

CSS：

#include <iostream>
#include <math.h>

using namespace std;

double vec( double x, double y, double z)

{
   double v[3];
   v[0] = x;
   v[1] = y;
   v[2] = z;

 return v[2];
}

int main()
{
double a, b,c;

 double p;
 a =2; b = 3; c = 2;
 p = vec(a,b,c);
 cout << "vx =" <<p<<endl;
 return 0;
 }

Answer 1

你的意思是codepen

我只是将其添加到悬停

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

使div延伸超过父级的填充？

1 个答案: