Dropdown Menu in CSS

[gilbert.jacob1]

Hi Guys,

I have a problem with regard to creating a dropdown main menu in CSS. I have already tried to change/add my code and checked other resources but it still doesn't work. I hope you guys will be able to help me. Many thanks.

Jacob

Here is my HTML code:

<nav>
                        <ul class="menu">
                            <li><a class="active" href="home.html">Home Page</a></li>
                            <li><a href="KB.html">Knowledgebase</a></li>
                                <ul>
                                    <li><a href="#">POS</a></li>
                                    <li><a href="#">Backoffice</a></li>
                                    <li><a href="#">Simulator</a></li>
                                </ul>
                            <li><a href="CS.html">Case Scrub</a></li>
                            <li><a href="Team%20View.html">Team View</a></li>
                            <li><a href="News.html">News and Updates</a></li>
                            <li class="last-item"><a href="Forums.html">Forums</a></li>
                        </ul>
                    </nav>

Here is my CSS code:

/* main menu */
.menu {
    width: 100%;
}
.menu li {
    float: left;
    position: relative;
    margin-right: 1px;
}
.menu li.last-item {
    margin: 0;
}
.menu li a {
    display: inline-block;
    width: 160px;
    font-size: 17px;
    line-height: 1.22em;
    padding: 18px 0 36px;
    margin-top: 10px;
    color: #fff;
    background: #000;
    text-align: center;
    border-radius: 18px 18px 0 0;
    -moz-border-radius: 18px 18px 0 0;
    -webkit-border-radius: 18px 18px 0 0;
}
.menu li a:hover {
    color: #0f0f0f;
    background: #fff;
    padding: 28px 0 36px;
    margin: 0;
}
.menu li a.active {
    color: #0f0f0f;
    background: #fff;
    padding: 28px 0 36px;
    margin: 0;
}

[TonyG_cyprus]

This from w3 schools

The <nav> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

So if you're on -IE8 it won't work.
also it appears from my reading that some browsers mis-render if there is whitespace between the <li> tags. See here

[TonyG_cyprus]

Check this one out, it's your css at fault, some selectors missing.
Link

[JorgeM]

The <nav> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

This element will simply be ignored by earlier versions of IE. The ony other issue with IE is that you wont be able to style these uknown elements without using the HTML5Shiv.

In any event, one problem I see above is that you are tyring to add a second level of items incorrectly.

For example...

<li><a href="KB.html">Knowledgebase</a></li>
 <ul>
   <li><a href="#">POS</a></li>
   <li><a href="#">Backoffice</a></li>
   <li><a href="#">Simulator</a></li>
 </ul>

 Should be....


 <li><a href="KB.html">Knowledgebase</a>
  <ul>
   <li><a href="#">POS</a></li>
   <li><a href="#">Backoffice</a></li>
   <li><a href="#">Simulator</a></li>
  </ul>
 </li>

I have a guide on how to create a Multi-level Navigational Menu Using CSS that you can use, adapt, etc... as you see fit, if you find it useful.

.
.

[gilbert.jacob1]

Tnx for your help guys! Appreciate it!