CODEWITHSUNDEEP
cssdrop-down-menusubmenu
indy
indy

Reputation: 129

Horizontal sub menu issue

I am facing a problem regarding horizontal submenu that needs to push down body content. But I am not getting it. I have tried out few things with different css. And I want to be done using CSS since it would be a responsive menu with 100% div. So I can't give any pixel width in sub ul. I have almost done it but main menu got push down when I hover on it. I know there might be a solution for this using CSS code and it would be great if someone can help me out on this. And if its can't be done with CSS then I would like to know if there is any jquery solution for it or not. Here I am sharing my CSS along with HTML.

""There are 3 menus in the given css and html and also you can see it in jsfiddle link as well that Menu 1 and Menu 2 submenu along with Body Content got push down but Menu 3 is working fine. I want to fix the Menu 1 and Menu 2 just like the Menu 3.""

Any help would be appreciated.

Thanks, Roy

HTML

<div id="menu">

    <ul id="nav">
    <li><a href="#">Menu 1</a>
    <ul>
    <li><a href="#">fdesfc</a></li>
    <li><a href="#">drgdrg</a></li>
    <li><a href="#">dgvdvg</a></li>
    </ul>
    </li>

    <li><a href="#">Menu 2</a>
    <ul>
    <li><a href="#">iuoluiouo</a></li>
    <li><a href="#">abcde</a></li>
    <li><a href="#">bhnhbnh</a></li>
    </ul>
    </li>

    <li><a href="#">Menu 3</a>
    <ul>
    <li><a href="#">Menu 3 Submenu item 1</a></li>
    <li><a href="#">Menu 3 Submenu item 2</a></li>
    <li><a href="#">Menu 3 Submenu item 3</a></li>
    </ul>
    </li>
    </ul>

</div>
<div class="clear"></div>
<div class="contArea">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

CSS

#menu{
width: 100%;
height: 40px;
clear: both;
}

ul#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #dc0000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}

ul#nav li {display: inline;}

ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #dc0000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}

ul#nav ul {
display: none;
position: absolute;
}

ul#nav li:hover > ul {
position: relative;
display: block;
height: 45px;
margin: 40px 0 0 0;
background: #aa0000;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}

ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #aa0000;
}

ul#nav li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}

.clear {
clear: both;
}

.contArea {
    background: #ccc;
padding: 12px;
}

(on JSFiddle: http://jsfiddle.net/indy12/QG9L5/1/)

Upvotes: 0

Views: 768

Answers (1)

Abel D
Abel D

Reputation: 1080

I assumed this is what u expect http://jsfiddle.net/QG9L5/6/

add appropriate width and float to main(li) list item and sub lists (ul). 

    #menu {
    width: 100%;
    height: 40px;
    clear: both;
}
ul#nav {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #dc0000;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
}
ul#nav li {
    display: inline;
}
ul#nav li.main{
    float:left; width:150px;
}
ul#nav li a {
    float: left;
    font: bold 1.1em arial, verdana, tahoma, sans-serif;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #880000;
    margin: 0;
    padding: 0 30px;
    background: #dc0000;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
}
ul#nav ul {
    display: none;
    position: absolute;
    width:500px;
}
ul#nav li:hover > ul {
    position: relative;
    display: block;
    height: 45px;
    margin: 40px 0 0 0;
    background: #aa0000;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
    float: left;
    font: bold 1.1em arial, verdana, tahoma, sans-serif;
    line-height: 45px;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #110000;
    margin: 0;
    padding: 0 30px 0 0;
    background: #aa0000;
}
ul#nav li:hover > ul li a:hover {
    color: #120000;
    text-decoration: none;
    text-shadow: none;
}
.clear {
    clear: both;
}
.contArea {
    background: #ccc;
    padding: 12px;
}

Upvotes: 1

Related Questions