メニューバーにカーソルを合わせると下にずれてしまう

現在CSSを用いてwebサイト作りの練習をしているのですが、
横並びのメニューの文字にカーソルを合わせると少しだけ下にずれてしまうという現象が起きました。
このずれを無くしたいです。

分かりにくくて申し訳ないです。。。

html
1<!DOCTYPE html>
2<html lang = "ja">
3<head>
4<meta charaset = "utf-8">
5<title>Bar milion</title>
6<link rel = "stylesheet" href = "stylesheet.css">
7</head>
8
9<body>
10
11<div class = "one">
12
13<span id = "Top">
14<h1>Bar milion</h1>
15</span>
16
17</div>
18
19<nav>
20<ul>
21<li><a href="#Top">Home</a></li>
22<li><a href="#Top">Top</a></li>
23<li><a href="#About">About</a></li>
24<li><a href="#info">info</a></li>
25<li><a href="#access">access</a></li>
26</ul>
27</nav>
28
29<img src = "bar.jpg" class = "first">
30
31
32<div class = "two">
33
34<p>「本物」のおもてなしをあなたに...</p>
35
36</div>
37
38<div class = "three">
39
40<h2 id = "About">～当店のこだわり～</h2>
41
42</div>
43
44<div class = "four">
45
46<p>種類豊富な名酒</p>
47
48<img src = "bar5.jpg" class = "second">
49
50<p>色鮮やかなお料理</p>
51
52<img src = "bar4.jpg" class = "third">
53
54<p>抜群のロケーション</p>
55
56<img src = "bar2.jpg" class = "forth">
57
58
59</div>
60
61<p></p>
62
63
64</body>
65
66<footer>
67
682021(C) Bar milion
69
70</footer>
71
72</html>

CSS
1
2body{
3    background-color: black;
4    font-family: Georgia, 'Times New Roman', Times, serif;
5}
6
7a{
8    text-decoration: none;
9    color: azure;
10}
11
12.one{
13    font-size: 4vw;
14    color: #ED514E;
15    text-align: center;
16    line-height: 0px;
17}
18
19.two{
20   font-size: 2vw;
21   color: azure;
22   text-align: center;
23}
24
25.three{
26    font-size: medium;
27    color: azure;
28    text-align: center;
29}
30
31.four{
32    font-size: 2vw;
33    color: azure;
34    text-align: center;
35}
36
37.first{
38    width: 50%;
39    display: block;
40    margin: auto;
41}
42
43.second{
44    display: flex;
45    width: 50%;
46    flex: 1;
47}
48
49.third{
50    display: flex;
51    width: 50%;
52    flex: 1;
53}
54
55.forth{
56    display: flex;
57    width: 50%;
58    flex: 1;
59}
60
61footer
62{
63    color: azure;
64    text-align: center;
65}
66
67nav{
68    border-bottom: 5px solid #ccc;
69    position: relative;
70    font-size: 1.5vw;
71    margin-top: 5%;
72    margin-bottom: 4%;
73    }
74    nav ul{
75    position: absolute;
76    left:10%;
77    display: table;
78    margin: 0 auto;
79    padding: 0;
80    width: 80%;
81    text-align: center;
82    }
83    nav ul li{
84    display: table-cell;
85    min-width: 50px;
86    }
87    nav ul li a{
88    display: block;
89    width: 100%;
90    height: 100%;
91    padding: 10px 0;
92    text-decoration: none;
93    color: #aaa;
94    }
95    nav ul li a:hover{
96    color: azure;
97    background-color: black;
98    }
99    nav ul li:hover{
100    border-top: 5px solid #555;
101    }
102
103
104
105

一番下の nav ul li:hover　の部分を削除したら治ったのですが、今度はカーソルを合わせても何も起きなくなってしまいました。

分かりにくい説明になってしまい大変申し訳ありません。
どなたかご教授お願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

これでいいんじゃないかと思います。
どうしてなのかは時間のあるときにでも考えてみてください。

CSS
1    nav ul li{
2    border-top: 5px solid #ccc;
3    }
4    nav ul li:hover{
5    border-top: 5px solid #555;
6    }

投稿2021/05/01 01:55

itagagaki

総合スコア8402

punbeginner

2021/05/01 03:24

解決しました！！！本当にありがとうございます！助かりました！！

行動規範の内容に同意します

カーソルを合わせたときに本当はどうしたいのかわかりませんが、nav ul li:hoverでborder-top: 5pxのせいで5ピクセル動くんだと思いますので、動かないようにするにはとりあえず0pxに変えて試してみてください。

投稿2021/05/01 01:28

itagagaki

総合スコア8402

punbeginner

2021/05/01 01:42

ご回答して頂き本当にありがとうございます。記述不足で申し訳ございませんでした。最終的には文字にカーソルを合わせたときに、文字の上に表示されている白いボーダーを薄い色に変わるようにしたいのですが、それをしようとすると文字が下にずれてしまいレイアウトが崩れてしまいます。。。 itagaki様が教えて下さったようにやってみたら文字が下にずれることは無くなりました！しかし今度はカーソルを合わせた時に文字の上にある白いボーダーが消えてしまいました。。。

行動規範の内容に同意します

あなたの回答