HTML と CSS は初めてで、1 週間ほど前に始めましたが、Web サイトで生成したこのナビゲーション バーを移動するのに苦労しています。margin-bottomまたはを使用しようとするとmargin-top、ナビゲーション バー全体が完全に伸びますが、移動しません。使っposition: absoluteてみて、そのように位置を設定しようとしましたが、完全に崩壊しますが、動いているようです。
HTML
<div class="mainmenu">
<ul>
<li><a class=current href="/index.html"> Home</a></li>
<li><a href="/lesmiserbales.html">Les Miserables</a></li>
<li><a href="/chicago.html">Chicago</a></li>
<li><a href="/shrek.html">Shrek</a></li>
<li><a href="/phtanomoftheopera.html">Phantom Of The Opera</a></li>
<li><a href="/wicked.html">Wicked</a></li>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="/htfs.html">How To Find Us</a></li>
<li><a href="/contactus.html">Contact Us</a></li>
</ul>
CSS
.mainmenu a {
color: #ffffff;
border: 0px solid;
background-color: #302E2E;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 4px;
font: 12px Arial;
font-weight: normal;
text-decoration: none;
border-color: #000000;
display: block;
margin: 0px;
width: 100px;
text-align: left;
z-index:2;
position: absolute;
top: 50px;
}
.mainmenu a:visited { color: #ffffff; }
.mainmenu a:hover {
border: 0px solid;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 4px;
background-color: #333030;
border-color: #000000;
color: #000000;
font: 12px Arial;
font-weight: normal;
text-decoration: none;
text-align: left;
display: block;
width: 100px;
}
.mainmenu ul {
list-style:none;
margin: 0;
padding: 0;
}
.mainmenu li {
margin: 0;
padding-top: 1px;
padding-bottom: 1px;
}
何か助けていただければ幸いです。初歩的なミスや何かをした場合は申し訳ありません