0

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.

1
Contributor
2
Replies
25
Views
3 Years
Discussion Span
Last Post by HoverportMedia
0

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.

0

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?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.