CODEWITHSUNDEEP
javascripthtmlcssfirefox
John Snow
John Snow

Reputation: 87

html drop down menus not working in firefox and everything is wrong in older versions of IE

Good evening everybody I am having trouble with my drop down menu's in firefox and IE.

I mistakenly developed this page and tested everything on chrome but when a buddy was checking it for me he used firefox and said he was not able to use my navigation. Could somebody please point me in the right direction Thanks.

And if anybody could point me in the right direction on getting my page to look good on IE that would be great

here is the code

<nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#"html">Register/login</a>
        <ul>
            <li><a href="register.php">Register</a></li>
            <li><a href="login.php">Login</a></li>
            <li><a href="#">Forgot Password</a>
                <ul>
                    <li><a href="#">Email Password</a></li>
                    <li><a href="#">Answer Security Questions</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a>
        <ul>
            <li><a href="#">Email</a></li>
            <li><a href="#">Forum</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a>
        <ul>
            <li><a href="#">Email</a></li>
            <li><a href="#">Forum</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a>
        <ul>
            <li><a href="#">Email</a></li>
            <li><a href="#">Forum</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a>
        <ul>
            <li><a href="#">Email</a></li>
            <li><a href="#">Forum</a></li>
        </ul>
    </li>
</ul>
</nav>

here is the css

nav {
    height:80px;
    width:1024px;
    }
ul {
    padding:0;
    margin:0;
    list-style:none;
    }
nav ul ul {
    display: none;
    }
nav ul li:hover > ul {
    display: block;
    }
nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 75px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
    z-index:100;
    }
nav ul:after {
    content: ""; clear: both; display: block;
    }
li {
    float: left;
    }
nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
nav ul li:hover a {
    color: #fff;
    }
nav ul li a {
    display: block; padding: 25px 40px;
    color: #757575; text-decoration: none;
    }
nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    }
nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
    }
nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
    }   
nav ul ul li a:hover {
    background: #4b545f;}
}
nav ul ul ul {
    position: absolute; left: 100%; top:0;
    }
li ul {
    display: none;
    position: absolute; 
    top: 1em;
    left: 0;
    }
li > ul {
    top: auto;
    left: auto;
    }
li:hover ul, li.over ul{ display: block; }

#article{
    height:500px;
    width:1024px;
    background:#FFFFFF;
    }
#article>h1 {
    text-align:center;
    }
#legaljibjab {
    height:30px;
    width:1024px;
    border:black solid thin;
    background:#FFFFFF;
    }

Upvotes: 3

Views: 2521

Answers (3)

We Get It You Code
We Get It You Code

Reputation: 72

Older browsers do not support the new styles of HTML5 certain things may be out of order because of the older support for the html try IE 10 or Chrome then see what happens.

Your html and css looks right but to be sure download a newer browser. Also try taking out the <nav> element.

Upvotes: 2

camchang
camchang

Reputation: 11

I see that your second <li> tag has a random html tag in there which probably isn't helping. Running your code through an html validator will work wonders for you. A quick Google search will provide you with many different options.

The <nav> tag is an html5 tag and is not supported by IE8 and older. I'm guessing your friend was probably using an older version of IE. When developing for cross browser compatability you need to keep in mind that some tags & techniques differ in compatability. There are many sites out there that you can use to check this. In school, I often used - Caniuse.com

As for Firefox not working, I can't really say. Firefox is compatible with the <nav> tag so that should be working. Are you getting any errors in your browser's error console?

Upvotes: 1

Kim T
Kim T

Reputation: 6436

Could it be the invalid html of this line?

<a href="#"html">Register/login</a>

Upvotes: 1

Related Questions