CODEWITHSUNDEEP
htmlcssdrop-down-menu
Cato Yeung
Cato Yeung

Reputation: 701

css dropdown menu second level disappear

I am making a css only dropdown menu.
Here is an example.
http://jsfiddle.net/DEK8q/8/
Now I want to center this menu. So I add position relative like this:

#nav-container {
    position: relative;
    float: left;
    left: 50%;
}

#nav {
    ***position: relative;***
    float: left;
    left: -50%;
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

I found that if I position relative the nav, the second level of the menu can not display!
It is because there is a display bound for a relatively positioned div.
I want to make it css only and align center. How can I solve this problem?

Upvotes: 0

Views: 258

Answers (5)

AdityaSaxena
AdityaSaxena

Reputation: 2157

Here is a solution for you: http://jsfiddle.net/DEK8q/36/

Some of the crucial css styles used are:

#nav-container {
    position: relative;
    left: 50%;
}

#nav {
    position:absolute;
    left: -50%;
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
}

#nav ul{
    list-style:none;
}

#nav > ul{
    margin:0px;
    padding:0px;
}

#nav li{
    float:left;
    position:relative;
}

#nav li ul{
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    padding:0px;
    margin:0px;
}

#nav li li ul{
    left:100%;
    top:0px;
}


#nav li:hover > ul{
    display:block;
}

Upvotes: 0

crazyrohila
crazyrohila

Reputation: 616

I think you are using lots of positioning here. That is not required and position:static; is default value for position, so you don't need to define it. You just have to use relative/absolute. check this fiddle . you can reduce more positioning in this fiddle too for another ul, which is displaying when hover on second menu-item.

Check the fiddle and use below code.

#nav-container {
  float: left;
  width:100%; 
}
#nav {
float: left;
margin-left:25%;
font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
overflow: hidden;
}

Upvotes: 1

Razmig
Razmig

Reputation: 629

You can use deferent approach

#nav-container {
    position: relative;
    float: left;
    width:100%;
}

#nav {
    position: absolute;
    left:50%;
    margin-left:-160px; /* This is the width of your menu / 2       */
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

Have a look: http://jsfiddle.net/DEK8q/8/

Upvotes: 0

Kingk
Kingk

Reputation: 1021

Can try this as well

#nav {
    border: 1px solid #121314;
    font: bold 12px SimHei,Arial,Helvetica,Sans-serif;
    margin: 0 auto;
    overflow: hidden;
    width: 500px;
}

http://jsfiddle.net/DEK8q/29/

Upvotes: 0

Cato Yeung
Cato Yeung

Reputation: 701

I just found the solution, using position static and margin-left instead of left.

#nav {
    position: static;
    float: left;
    margin-left: -50%;
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

http://jsfiddle.net/LrmUS/1/

Upvotes: 0

Related Questions