Jquery Slidedown moves other div down

Question

I am trying to position div absolute with css. I have 2 divs where I am using jquery slide down and slide up. If one div slides down, other div is also disturbed with this code here.

Could soe one suggest me aproach to stop second div sliding when mouse over on first div and vice versa.

Answer 1

check out this link here is http://jsfiddle.net/sarfarazdesigner/K2ndZ/5/ for this you have to change some code of your this is css

.combobox {cursor:pointer;display:inline-block; position:relative;}
.combobox .selector {position:relative; float:left; }
.combobox .selector p{border:1px solid #cccccc;padding: 2px 5px;}
.combobox ul {padding:0;margin:0;display:inline-block;border:1px solid #eeeeee;background-color:#cccccc;}
.combobox li {padding: 2px 5px}

this is html

<div class="combobox">
    <div class="selector">
        <p>Please select</p>
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
    </div>


    <div class="selector">
        <p>Please select</p>
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
    </div>
</div>

and this is jQuery part

$(document).ready(function(){
    $('.combobox ul').hide();
    $('.combobox p').hover(
        function(){
            console.log(this);
            $(this).next('ul').stop().slideDown();
        },
        function(){
            $(this).next('ul').stop().slideUp();
        }
    );
    $('.combobox li').click(function(){
        $(this).parents('.combobox').find('.selector').text($(this).text());
    });
});

updated link according to you

http://jsfiddle.net/sarfarazdesigner/K2ndZ/7/

Answer 2

Please have a look at http://jsfiddle.net/K2ndZ/3/

I did changes only in .combobox {cursor:pointer;float:left; margin-left:10px;}