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