Navigation Issues

[HoverportMedia]

I can't believe I'm asking for this, but it seems whatever I try my code is failing on me. Let me give you the rundown:

`<nav>
    <ul>
            <li><a href="#">Home</a></li>
            <li class="Drop"><a href="services.php">Services</a>
                <div class="dropdownContain">
                    <div class="dropOut">
                        <div class="triangle"></div>
                        <ul>
                            <li><a href="videconferencing.php">Video Conferencing</a></li>
                            <li><a href="videocam.php">VideoCam</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li><a href="scheduling.php">Scheduling</a></li>
            <li><a href="http://www.witnesswarehouse.com/vcr">Repository</a></li>
            <li><a href="aboutus.php">About Us</a></li>
            <li><a href="search.php">Search</a></li>
            <li><a href="contatcus.php">Contact Us</a></li>
            </ul>
            </nav>`

And then we have the CSS:

`nav {
    width: 100%;
    height: 80px;
    display: inline-block;
}

ul {
    text-align: center;
}

ul li {
    font: 12px Verdana, 'Lucida Grande';
    cursor: pointer;
    -webkit-transition: padding .05s linear;
    -moz-transition: padding .05s linear;
    -ms-transition: padding .05s linear;
    -o-transition: padding .05s linear;
    transition: padding .05s linear;
}
ul li.drop {
    position: relative;
}
ul > li {
    display: inline-block;
}
ul li a {
    line-height: 64px;
    padding: 0 10px;
    height: 80px;
    color: #000000;
    text-decoration: none;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

ul li ul li a{
    color: white;
    text-decoration: none;
}

ul li a:hover {
    color: #eee;
}

.dropOut .triangle {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #0066FF;
    top: -8px;
    left: 10%;
    margin-left: -8px;
}
.dropdownContain {
    width: 160px;
    position: absolute;
    z-index: 2;
    top: -400px;
}
.dropOut {
    width: 220px;
    background-color: #0066FF;
    float: left;
    position: relative;
    margin-top: 0px;
    opacity: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

.dropOut ul {
    float: left;
    padding: 10px 0;
}

.dropOut ul li {
    text-align: left;
    float: left;
    width: 185px;
    padding: 12px 0 10px 15px;
    margin: 0px 10px;
    color: white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background .1s ease-out;
    -moz-transition: background .1s ease-out;
    -ms-transition: background .1s ease-out;
    -o-transition: background .1s ease-out;
    transition: background .1s ease-out;
}

.dropOut ul li:hover {
    background-color: #0033FF;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }`

So my question is, I'm trying to modify the dropdown windows for a hyperlink. I would modify them as ul li a or ul li ul li a, but it seems those attempts have failed. I'm trying to alternatively color the link as well as modify their padding. Alternatively, the main wrapper div has the code:

`.wrapper a{
color: black;
text-decoration: none;
}`

The code above helps to prevent the dissapearing of the logo from black to white, when I ultimately change the color to white in the a css.

[HoverportMedia]

Fixed the problem guys, but I am suffering from one problem in the HTML code. Look at this page in an older version of IE (If you have it or compatability view) http://www.vcrooms.com/index.php

The nav is actually is in a list element vertically and it will not go horizontally. I have the HTML5 Shiv fix from Google installed onto the page.

[HoverportMedia]

Another edit, sorry everyone, but it works horizontally thanks to the inline-block fix and now when viewed in compatability mode on IE or for older broswers, the positioning of the dropdown is incorrect, can anyone help?