0

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;
}
3
Contributors
4
Replies
24
Views
4 Years
Discussion Span
Last Post by gilbert.jacob1
0

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

0

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.

.
.

2ef04f2be15fdfbd8bd9b9b037263206

Edited by JorgeM

This question has already been answered. 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.