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添加了一个类。

这是工作的小提琴