CODEWITHSUNDEEP
htmlcssdrop-down-menucss-position
Noel Heesen
Noel Heesen

Reputation: 243

Dropdown menu relative positionning leaves gap between main menu items

I've been searching all over stackoverflow but found nothing similar.

I have a vertical (normal) menu with 1 submenu I want to be to the right of the main menu without leaving a gap to the menu items that come after it.

DEMO: http://jsfiddle.net/pzyLR/

HTML

<ul class="sidemenu">
<li><a href="">Home</a></li>        
<li><a href="">History</a>
    <ul>
        <li><a href="">1st page</a></li> 
        <li><a href="">2nd page</a></li> 
        <li><a href="">3rd page</a></li> 
        <li><a href="">4th page</a></li> 
    </ul>
</li>
<li><a href="">A-Z index</a></li> 
<li><a href="">Contact</a></li> 
</ul>

CSS

ul.sidemenu {
list-style-type:none;
padding:10px 0px;
margin:0;
text-align:center;
}

ul.sidemenu li {
margin:5px 0px;
}

ul.sidemenu li a {
display:block;
line-height:20px;
padding:10px 0px;
width:200px;
background-color: rgba(28,28,28, 0.16);
font-family:arial;
font-size:1.4em;
text-transform:uppercase;
color:#1c1c1c;
text-decoration:none;
}

/*dropdown menu*/

ul.sidemenu li ul {
display:none;
list-style-type:none;
}

ul.sidemenu li:hover > ul {
display:block;
width:120px;
position:relative; left:20%; top:-45px;
}

As you can see in the demo the drop down menu does position correctly tough it still leaves a huge white space as it if is there too.

Any suggestions? I already tried absolute positioning but when I resize the browser window it will go out of its desired place.

Thanks,

Upvotes: 1

Views: 988

Answers (2)

Coder
Coder

Reputation: 7076

Add position:absolute to first UL and second UL. Then position the Elements with left, top, bottom values

UPDATED JSFIDDLE DEMO

UPDATED CSS

ul.sidemenu {
    list-style-type:none;
    padding:10px 0px;
    margin:0;
    text-align:center;
    position:absolute;
}

ul.sidemenu li {
    margin:5px 0px;
}

ul.sidemenu li a {
    display:block;
    line-height:20px;
    padding:10px 0px;
    width:200px;
    background-color: rgba(28,28,28, 0.16);
    font-family:arial;
    font-size:1.4em;
    text-transform:uppercase;
    color:#1c1c1c;
    text-decoration:none;
}

/*dropdown menu*/

ul.sidemenu li ul {
    display:none;
    list-style-type:none;
}

ul.sidemenu li:hover > ul {
    display:block;
    width:120px;
    position:absolute;
    left:82%; 
    top:27%;
}

1. Added position:absolute; to ul.sidemenu.

2. Changed position:relative; to position:absolute; in ul.sidemenu li:hover > ul and also changed values of left and top in same.

Upvotes: 1

aslawin
aslawin

Reputation: 1981

You can create two divs: in first you can put your main menu, in second your submenu. So try insert submenu <ul> element in one div, and insert your <ul> in another div. Now if you hover on main menu li element, in div on the right you can show your submenu.

Simple example:

<div>
   <ul class='mainmenu'>....</ul>
</div>
<div>
   <ul class='submenu'>....</ul>
</div>

Upvotes: 0

Related Questions