html - CSSドロップダウンメニューに問題がある

Question

この問題を解決しようとして大きな問題が発生したため、ドロップダウン メニューを作成しようとしていますが、リストされたアイテムの位置がずれているだけでなく、正しく表示されません (「連絡先」セクションの下に何らかの形で表示されます)。ポートフォリオではなく)、ホバーしたときにメニューから 1 つの項目 (最後の項目: ウェブサイトのデザイン) しか表示されません。これは私がこれまでに書いたコードであり、何を修正すればよいか正確にはわかりません (何度も試みましたが失敗しました)。ですから、私が何かを見逃したり、特定の分野で間違いを犯したりした場合は、見てください。

前もって感謝します！

HTML コード:

     <div class="nav2">
<ul class="special">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Portfolio</a>

        <ul class="special">
            <li><a href="#">Cinematography</a>
            </li>
            <li><a href="#">Sound Design</a>
            </li>
            <li><a href="#">Photoshop Design</a>
            </li>
            <li><a href="#">Website Design</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Services</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
</ul>

CSS コード:

      .nav2 {
    height: 30px;
    background-color: #333333;
    color: #DBDBDB;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    padding-top: 5px;
    font-size: 14px;
    padding-bottom: 5px;
    list-style: none;
}
ul.special {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0px 0px 0px 300px;
    list-style: none;
}
ul.special li {
    display: block;
    position: inherit;
    float: left;
}
li ul.special {
    display: none;
}
ul.special li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #333333;
    margin-left: 1px;
    white-space: nowrap;
}
ul.special li a:hover {
    background: #333333;
}
li:hover ul.special {
    display: block;
    position: fixed;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a {
    background: #3b3b3b;
}
li:hover li a:hover {
    background: #1e7c9a;
}