1
我试图从Youtube Video尝试添加一个悬停效果要我的导航栏
我尝试了一个小时增加一个悬停效果，改变了我的代码的两倍;在我的原代码是这样的：
* {
font-family: 'Montserrat', sans-serif;
color: white;
margin: 0;
padding: 0;
}
.header {
width: 100%;
background-color: #2C2F33;
border-bottom: 5px #FF9F00 solid;
font-size: 15px;
display: flex;
align-items: center
}
#logo img {
float: left;
margin: 0;
padding: 20px;
width: 187.5px;
height: 63.75px;
background-color: #2C2F33;
}
.navbar {
display: flex;
justify-content: space-between;
margin-left: auto;
}
li {
display: inline;
padding: 0 22.5px 0 22.5px;
}
.navbar,
li,
a {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
background-color: #2C2F33;
position: relative;
}
.navbar,
li,
a:hover {
color: #FF9F00;
text-decoration: none;
list-style-type: none;
}
#userbalance {
background-color: #23272A;
padding: 10px;
border: 3px #FF9F00 solid;
}
#userbalance {
background-color: #23272A;
}
#balance,
#dsh {
color: #FF9F00;
}
#dosh {
color: #FFFFFF;
}
.body {
background-color: #23272A;
}
footer {
background-color: #23272A;
position: absolute;
text-align: center;
clear: both;
width: 100%;
bottom: 18px;
font-size: 12.5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./css/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Arszilla">
<title>Website</title>
</head>
<body>
<div class="header">
<div id="logo">
<img src="./img/logo.png"></img>
</div>
<div class="navbar">
<div id="leftnavbar">
<ul>
<li id="userbalance"><span id="balance">Balance:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
</ul>
</div>
<div id="rightnavbar">
<ul>
<li><a href="index.html">Button 1</a></li>
<li><a href="index.html">Button 2</a></li>
<li><a href="index.html">Button 3</a></li>
<li><a href="index.html">Button 4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>我删除了<div class="header">等，并使其所有<header>等（基本上摆脱的div）
我跟着视频，直到14这一分钟没问题，我明白他在做什么。之后，东西走下坡路。
我添加了这些给我的代码：
.navbar,
li
{
position: absolute;
display: inline-block;
}
和
.navbar,
li
a::before
{
content: '';
display: block;
height: 5px;
width: 100%;
background-color: red;
position: absolute;
}
，并得到了这个结果：
我不知道我该如何解决这是因为我没那么有经验。有人会帮助我吗？我不知道我是否应该从头开始重新制作网站，并只使用<header>，<nav>等，而不是使用的div和标签“类似”类他们（class="header"等）
：悬停{边框底部：2px的纯黑色;}'到CSS你有效果。 https://codepen.io/hansfranz/pen/MvbEpj在这里查看。 – hansTheFranz
@hansTheFranz最好谢谢你！但是，我怎样才能让它像视频一样，在顶部，并且不会通过单词的长度。就像黑线翻过了'ul li a'的文字（看这里：http://imgur.com/a/xUEv） – Arszilla
'li：hover {padding-top：8px; border-top：4px solid＃ ff0000;}'使它到顶部使用这个（或者检查我更新它的codepen）老实说，我不知道如何限制宽度，CSS中有'border-top-width'属性，但它的for边界的厚度。 – hansTheFranz