CSS下拉菜單出現問題

Question

在嘗試解決此問題時遇到了很大的麻煩，我正在嘗試創建一個下拉菜單，但它無法正確顯示該菜單，不僅列出位置的位置不正確（它們以某種方式顯示在“聯系”部分下而不是投資組合），當我將鼠標懸停在菜單上時，我只會看到其中一項（最后一項：網站設計）。 這是我到目前為止編寫的代碼，我不確定到底要解決什么（嘗試了多次但失敗了）。 因此，請看看我是否在某些方面錯過了東西或犯了錯誤。

提前致謝！

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;
}

Answer 1

解決方法： 演示

 .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:0;
     list-style: none;
    text-align:center;
 }
 ul.special > li ul {
     position: absolute;
    text-align:left;
 }
ul.special > li ul li{
    display:block;
}
 ul.special li {
     display: block;
     position: relative;
     display:inline-block;
 }
 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;
 }
 li:hover li {
     float: none;
     font-size: 11px;
 }
 li:hover a {
     background: #3b3b3b;
 }
 li:hover li a:hover {
     background: #1e7c9a;
 }

變化：

編輯：

 ul.special {
    text-align:center;
 }

添加：

 ul.special > li ul {
     position: absolute;
    text-align:left;
 }
ul.special > li ul li{
    display:block;
}

Answer 2

只需在CSS中添加兩行：

 li:hover ul.special {
           display: block;
           position: fixed;
           padding: 0px;  /* first one */
 }
 li:hover li{
           float: none;
           font-size: 11px;
           position:relative; /* second */
 }

Answer 3

您可以用最少的CSS做到

嘗試這個 ：

<div class="nav">
    <ul>
        <li><a href="#">Home</a></li>  
        <li><a href="#">About</a></li>  
        <li><a href="#">Portfolio</a>
            <ul>
                <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>
</div>

CSS：

.nav {
   background: #333333;
   text-align: center;    
}

.nav ul ul {
    display: none;
}

.nav ul li:hover > ul {
    display: block;
}

.nav ul {
    padding: 0 20px;
    list-style: none;
    position: relative;
    display: inline-table;
    font-family: Arial, Verdana;
    font-size: 14px;
}

.nav ul li {
    float: left;
    margin: 0 3px 0 0;
}

.nav ul li a {
    display: block; 
    padding: 5px 20px;
    color: #fff; 
    text-decoration: none;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #333333;
}

.nav ul ul {
    padding: 0;
    position: absolute; 
    top: 100%;
}

.nav ul ul li {
    float: none; 
    position: relative;
}

 li:hover li a:hover {
     background: #1e7c9a;
 }

我從ul刪除了該類，並向main div添加了一個類。

這是工作的小提琴