0
我爲我的網站使用了內聯導航欄，但當縮放窗口時出現問題，例如，如果我縮小窗口，則鏈接填充將顯示在頁面的反面。如果我把它從窗口一路縮小，如果你將鼠標懸停在一個鏈接上，它將覆蓋在上面。當屏幕大小調整時，我的鏈接重疊
li{
\t display:inline;
}
ul{
\t list-style-type:none;
\t margin:0;
\t padding:20px 0;
\t overflow: hidden;
\t background-color:#383a3d;
}
a.list:link{
\t font-family: Arial, sans-serif;
\t color:white;
\t text-decoration:none;
\t padding:100% 10%;
}
a.list:hover{
\t background-color:black;
\t color:white;
\t text-decoration:none;
\t font-family: Arial, sans-serif;
}
h1.header{
\t font-family: Arial, sans-serif;
\t text-align:center;
}
body{
\t background-color:#f7f7f7;
}
header, footer{
\t background-color:#ffab3d;
\t padding:30px;
\t margin:0;
}
nav{
\t position:fixed;
\t overflow: hidden;
\t width:100%;
\t margin:0;
}<!Doctype html>
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <link rel="stylesheet" href="Varistyle.css">
\t </head>
\t
\t <body>
\t \t <header><h1 class="header">Varisent</h1></header>
\t \t <nav>
\t \t \t <ul>
\t \t \t \t <li><a class="list" href="#home">Home<a></li>
\t \t \t \t <li><a class="list" href="#about">About Us<a></li>
\t \t \t \t <li><a class="list" href="#service">Services<a></li>
\t \t \t \t <li><a class="list" href="#contact">Contact Us<a></li>
\t \t \t </ul>
\t \t </nav>
\t </body>
</html>