Hello!
I now teach layout, gain experience, and I have here that there had been a moment, a decision which I have not yet found playing with many guesses.
I have a menu. (the code probably looks scary)
<header>
<div class="content-logo"><span>Matthew Greenberg</span></div>
<nav class="content-nav">
the <ul>
the <li><a href="#">Home</a></li>
the <li><a href="#">Some stuff</a></li>
the <li><a href="#">Query lib</a></li>
the <li><a href="#">Embeds</a></li>
the <li><a href="#">Inspiration</a></li>
the <li><a href="#">contact</a></li>
the <li><a href="#">about</a></li>
</ul>
</nav>
</header>
header {
height: 70px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
overflow: hidden;
}
.content-nav {
position: relative;
z-index: 1;
}
.content-nav ul {
padding: 0;
margin:0;
color:white;
position: relative;
z-index: 10;
overflow: visible;
}
.content-nav ul li {
display: inline-block;
color: white;
line-height: 70px;
position: relative;
}
.content-nav ul li:hover {
border-bottom:2px solid black;
opacity: 1;
}
.content-nav ul li a {
position: absolute;
display: block;
padding-left: 5px;
text-decoration: none;
color: #303030;
font-family: "Lato";
/*height: 100%;*/
opacity: .5;
}
.content-nav ul li a:hover {
border-bottom:2px solid black;
opacity: 1;
}
I need to hover on the menu item appeared border-bottom exactly on the line\border have headers, but it turns out if I set line-height to the height of the block, it turns out that the line is hidden.
Maybe I'm not exactly able to convey their thoughts, then you need something similar or is the same as here on this site:
https://medium.com/ .
I would be very grateful for all the help in my endeavor and any tips and correction about my "code" is not only on this issue but in General.
and I've been playing around with positioning in the horizontal direction. How it is more practical to implement?
Thank you all!!!
I've added this code that way, but it still shows that the line is above the box-shadow headers a.
.content-nav a {
position: relative;
}
.content-nav li a:hover:before {
content: ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #000;
} - lily_Schaefer28 commented on September 19th 19 at 12:11
bottom: -2px;
ortop: 100%;
. Andheader
to removeoverflow: hidden;
- Bettie commented on September 19th 19 at 12:17