今、私は本当の初心者で、始めて、物事を理解し、htmlとcssをテストして試しています。多かれ少なかれこのようなものを作りたいです（写真参照）。ブラウザと解像度を維持するアスペクト比に合わせて完全に拡大縮小したいと思います。
私のhtmlとcssのコードは以下の通りです。背景画像はきれいに拡大縮小されますが、ナビゲーションを同じように拡大縮小したいと思います。どうやってするの？何を変更しますか？また、実線の下（ナビゲーションの上）に点線を付けたいと思います。何かアドバイス？:)開始/学習/間違いを犯すだけです:)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Layout</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="navigation">
<ul>
<li> <a href="#"> HOME </a></li>
<li> <a href="#"> O MNIE </a></li>
<li> <a href="#"> PORTFOLIO </a></li>
<li> <a href="#"> OFERTA </a></li>
<li> <a href="#"> STREFA ŚLUBNA </a></li>
<li> <a href="#"> PUBLIKACJE </a></li>
<li> <a href="#"> WSPOŁPRACA </a></li>
<li> <a href="#"> BACKSTAGE </a></li>
<li> <a href="#"> KONTAKT </a></li>
</ul>
</div>
</body>
</html>
そしてcss：
html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#navigation
{
width: 100%;
height: 60px;
background-color: black;
margin-left: auto;
margin-right: auto;
padding: 0 0 0 0;
position: absolute;
bottom: 0px;
border-top-style: solid;
border-color: white;
border-width: thin;
}
#navigation ul
{
list-style-type: none;
float: right;
margin-left: auto;
margin-right: auto;
}
#navigation ul li
{
float: left;
list-style: none;
margin-left: 18px;
margin-right: 18px;
}
#navigation li a
{
color: #FFF;
text-decoration:none;
font-family: "Calibri";
text-transform:uppercase;
}
#navigation li a:hover
{
text-decoration:none;
color: #F69;
}
#navigation li a:active
{
color: #F69;
}