CODEWITHSUNDEEP
jqueryhtmlcss
rp7
rp7

Reputation: 137

Positioning drop down menu

The functionality of my dropdown is working fine. However, I am having trouble positioning items that get dropped down. I had positioned the dropped down items but then when I viewed this on a bigger screen, the items were positioned as if still on the smaller screen.

http://jsfiddle.net/sArTd/1/

The drop down works fine in jsFiddle however if you uncomment out the 'tests' in the HTML section and try again you will see what my problem is. If the parent item from the dropped down item moves left or right, the dropped down item does not follow!

As you can see I had used: left:.. to position the dropped down items so I think this may be the problem and I am not sure how to position it correctly!

Upvotes: 0

Views: 124

Answers (3)

Flo Edelmann
Flo Edelmann

Reputation: 2613

The best way positioning the menu is with jQuery because you can dynamically react to UI changes like window resizing etc.

I recommend something like the following:

$opener.on("click", function() {
    $menu.show();
    $menu.css({
        top: $opener.position().top + $opener.outerHeight() + 'px',
        left: $opener.position().left + 'px'
    });
});

Then the menu has to be position: absolute and the container of both position: relative.

Upvotes: 0

Daniel Ursu
Daniel Ursu

Reputation: 459

you should rewrite your structure, with 

<ul>
<li><a />
 <ul>
   <li><a /></li>
 </ul>
</li>
</ul>

this way you'll be able to add position:relative on the li and left:0 will put it in the right place

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Wrap your menu link and menu list with ul list. (If I am not wrong in understanding your question)

HTML

<ul class="main">
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' >Test </a></li>
    <li><a href ='#' id="Notification">Notifcations</a>
        <ul id="popOut1">
            <li><a href='#'>Dropped</a>
            </li>
        </ul> 
    </li>
    <li><a href='#' id="Settings">\/</a>
        <ul id="popOut2">
            <li><a href="#">Settings</a>
            </li>
            <li><a href="#">Logout</a>
            </li>
        </ul>
       </li>
</ul>

CSS

ul.main, li{
        list-style: none;
    margin: 0;
    padding: 0; display:inline-block;
    background:red;
    position:relative
}

DEMO

Upvotes: 1

Related Questions