Having trouble with CSS drop down menu

Question

Having big trouble trying to resolve this issue, I'm trying to create a drop-down menu but it isn't displaying it correctly where not only are the position of the listed items off (they are somehow displayed under the 'contact' section rather than the portfolio) and I only see one item (the last item: website design) from the menu when hovered. This is the code I've written so far and I'm not sure exactly what to fix (tried many times but failed). So please please take a look and tell me if I missed something or made a mistake in certain areas.

Thanks in advance!

HTML Code:

     <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 Code:

      .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

Here's the fix: Demo

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

Changes:

Edited:

 ul.special {
    text-align:center;
 }

Added:

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

Answer 2

Just add two lines in 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

You can do it with minimum of CSS

Try this :

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

I removed the class from ul and added a class to main div.

This is working fiddle