Navigation Issues

Question

HoverportMedia 0 Posting Whiz in Training

12 Years Ago

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="">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.

html-css web-design

1 Contributor
2 Replies
200 Views
6 Days Discussion Span
Latest Post 12 Years Ago Latest Post by HoverportMedia

Dani AI

Generated 7 Months Ago

A few focused checks and tiny changes solve the IE/compatibility-mode weirdness that followed the inline-block fix. As documented, the horizontal layout was fixed, but the dropdown ended up positioned incorrectly in Compatibility View. The most common causes in this exact situation are: a selector/case mismatch so the parent <li> never gets position:relative; HTML5 elements not being treated as block-level in old IE; and quirks created by Compatibility Mode (doctype or X-UA-Compatible) or hasLayout issues in older IE.

Checklist and concrete fixes (apply where relevant):

Confirm the dropdown parent actually has the positioned class the CSS targets. A case mismatch between the class in HTML and the class selector in CSS will make the rule (position:relative) never apply, so the absolute dropdown will anchor to the wrong ancestor. Make class names and selectors identical.
Force modern rendering and HTML5 element behavior in legacy IE:
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
Also ensure the HTML5 shiv is included correctly (in the head and for IE < 9) and that HTML5 elements are declared block-level in the stylesheet if needed (nav, header, footer { display: block; }).
Inline-block fallbacks and hasLayout for old IE:
```
ul > li { display: inline-block; *display: inline; *zoom: 1; }
```
Or use float:left on the li for the most robust old-IE support.
Z-index / stacking-context: if ancestors use opacity, transform, or filters, they can create stacking contexts that break expected layering. Give the dropdown a high z-index and ensure no ancestor unintentionally creates a new stacking context.

Quick debug steps: view the page in IE’s developer tools and check Document Mode, inspect the computed styles to confirm the parent li has position:relative and the dropdown’s top/left values, and watch for missing selectors caused by casing or typos. These targeted adjustments should restore the correct dropdown positioning in compatibility/older IE modes.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

HoverportMedia 0 Posting Whiz in Training · Answer 1 · 2014-02-05T19:38:11+00:00

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)

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 0 Posting Whiz in Training · Answer 2 · 2014-02-05T21:24:53+00:00

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?