CSS dropdown menu display problems

Question

I am working on a project and I am assigned to show a nested menu, I mean Drop down menu but I dont know what am I doing wrong here. Can anyone help me out ?

HTML

<div id="nav">
            <ul>
                <li><a href="#">Menu Num 1</a></li>
                <li><a href="#">Menu Num 2</a>
                    <ul>
                        <li><a href="#">Sub Menu 2.1</a></li>
                        <li><a href="#">Sub Menu 2.2</a></li>
                        <li><a href="#">Sub Menu 2.3</a>
                            <ul>
                                <li><a href="#">Sub Sub Menu 2.3.1</a></li>
                                <li><a href="#">Sub Sub Menu 2.3.2</a></li>
                                <li><a href="#">Sub Sub Menu 2.3.3</a></li>
                                <li><a href="#">Sub Sub Menu 2.3.4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Menu 2.4</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu Num 3</a></li>
                <li><a href="#">Menu Num 4</a></li>
            </ul>
        </div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
#nav ul {
    list-style-type: none;
    font-size: 0px;
}
#nav ul li {
    display: inline-block;
    position: relative;
}
#nav ul li a {
    padding: 10px;
    display: block;
    font-size: 12px;
    text-decoration: none;
    font-family: sans-serif;
    border: 1px solid #008080;
    margin: 5px;
}
#nav ul li a:hover {
    background: #a1a1a1;
}
#nav ul ul {
    display: none;
}
#nav ul li:hover > ul {
    position: absolute;
    display: block;
    width: 100%;
}

My only problem is the li items are not shown properly under each parent li. I need a solution and for further code inspection I have a jsFiddle link.

manjinder rooprai · Accepted Answer · 2015-02-08 08:09:08Z

1

I have a solution of your problem .you have to do some changes in your css sheet .I add a new block on content in css sheet which helps you to solve your problem.

* {
margin: 0px;
padding: 0px;}
#nav ul {
list-style-type: none;
font-size: 0px;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
padding: 10px;
display: block;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
border: 1px solid #008080;
margin: 5px;
}
#nav ul li a:hover {
background: #a1a1a1;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul{
position: absolute;
display: block;
width: 100%;
}
#nav ul ul li:hover > ul{
position: absolute;
margin-left:100px;
top:0px;
display: block;
width: 100%;)/* CSS Document */

answered Feb 8, 2015 at 8:09

manjinder rooprai

614 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Naveen Over a year ago

Okay that helped me pretty much but have a look at this issue now when I remove the margin in aand try to give it a width of 100% -> jsfiddle.net/60L57ofg/1 can you help me ?

manjinder rooprai Over a year ago

You can't specify 100% witdh to anchor tag .....it will work according to you browser ....you have to specify the same width and height as that you specify to Li

mindparse · Accepted Answer · 2015-02-08 08:19:47Z

1

Trying adding display:block; to your top level hover class

#nav ul li a:hover {
    background: #a1a1a1;
    display:block;
}

I came across this which may be useful for you http://htmldog.com/techniques/dropdowns/

edited Feb 8, 2015 at 8:19

answered Feb 8, 2015 at 8:08

mindparse

7,59529 gold badges105 silver badges217 bronze badges

1 Comment

Naveen Over a year ago

yeah I did it but now the issue is something more have a look jsfiddle.net/60L57ofg/1 !!

Collectives™ on Stack Overflow

CSS dropdown menu display problems

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related