Home/ Questions/Q 7703085
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T23:22:42+00:00

I am trying to create a multi level navigation menu with css. I guess

  • 0

I am trying to create a multi level navigation menu with css. I guess it is quite simple but I cant figure out where I am having problem. Below is my CSS. 

/********** General Styles **********/

body{
font-family:Arial, Tahoma, sans-serif;
font-size:14px;
color:#444549;
}

/********** Structure Styles **********/

div.center-container{
    width:980px;
    margin:0 auto;
    overflow:hidden;
    position: relative;
    background: #cbcbcb;
}

.empty-div{
height: 400px;
}
/********** Navigation **********/

#menu-container{
margin-top:100px;
background:url(../img/nav_bg.png) 0 0 repeat-y;
height:42px;
}

#nav{
float:left;
margin:0;
padding:0;
margin-left: 48px;
}

#nav li{
list-style:none;
position:relative;
}

#nav li a, #nav li{
    float: left;
}

#nav li a{
    text-decoration: none;
    padding: 1em 1em;
    color: #fff;
    text-transform:capitalize;
    border-bottom: 1px solid #cbcbcb;
}

#nav li a:hover{
    background:white;
    color: #00c6ff;

    /*
     -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    */

}

/********** Sub-menu **********/
#nav li ul{
display:block;
position: absolute;
left:0;
top:100%;
padding:0; margin:0;
}

And this is my HTML

<body>
<div id="header-container"><!--  --></div>

<!-- Navigation -->
<div id="nav-container">
    <div class="center-container">
        <div id="menu-container">
            <ul id="nav">
                <li><a href="#">about us</a></li>
                <li><a href="#">solutions area</a>
                    <ul>
                        <li><a href="#">sub menu example 1</a></li>
                        <li><a href="#">sub menu example 2</a></li>
                        <li><a href="#">sub menu example 3</a></li>
                        <li><a href="#">sub menu example 4</a>
                            <ul>
                                <li><a href="#">sub menu example 1</a></li>
                                <li><a href="#">sub menu example 2</a></li>
                                <li><a href="#">sub menu example 3</a></li>
                                <li><a href="#">sub menu example 4</a></li>
                                <li><a href="#">sub menu example with an extra long title 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">sub menu example with an extra long title 5</a></li>
                    </ul>
                </li>
                <li><a href="#">service and support</a></li>
                <li><a href="#">industries</a></li>
                <li><a href="#">products</a></li>
                <li><a href="#">news &and; media</a></li>
                <li><a href="#">contact &and; support</a></li>
            </ul>
        </div> <!-- end menu-container -->
    </div> <!-- end center-container -->
</div> <!-- end nav-container -->

<div id="banner-container">
    <div class="center-container">
        <div class="empty-div"></div>
    </div> <!-- end center-container -->
</div> <!-- end banner-container -->

<div id="footer-container"><!--  --></div>

I also have a reset.css that reset all browser css. The problem is that the submenu doesn’t appear but when I check in developer tools its exactly where it should be (is invisible).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Give background color to your body instead of div.center-container because define .center-container two time in HTML markup so, the second overlap that first & remove overflow:hidden also.

    Write like this:

    body{
 background: #cbcbcb;
}
    • 0