CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SuicideSheep
SuicideSheep

Reputation: 5550

CSS Margin and padding issue

I'm facing a difficulty to make the drop down list looks good as it has messed up with CSS

DEMO.HTML:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="demo.css">
<style>
li{
    display: block;
}
</style>
</head>

<body>
    <div id='wrap'>
        <div id="clickable_div">MENU</div>
            <div id="nav_menu">
                <ul class="dropDown">
                    <li id="li_1"><img src="images/ori_12.png"></li>
                    <li id="li_2"><img src="images/ori_14.png"></li>
                    <li id="li_3"><img src="images/ori_15.png"></li>
                    <li id="li_4"><img src="images/ori_16.png"></li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script>

        $('#wrap').mouseover( function(){
            $('#nav_menu').slideDown();
        });
        $('#wrap').mouseleave( function(){
            $('#nav_menu').slideUp();
        });
        $('#nav_menu li img')
        .mouseover(function () {
            this.src = this.src.replace('/ori_', '/hover_');
        })
        .mouseout(function () {
            this.src = this.src.replace('/hover_', '/ori_');
        });

    </script>
</html>

DEMO.CSS:

#clickable_div {
    width: 166px; 
    background-color: #9c9c9c;
    display: block;
}
#nav_menu {
    width: 166px; 
    height: auto; 
    background-color: #CCC; 
    display: none
}
//*{padding:0;margin:0} This will achieve what I want but eventually all my other elements on the same page will have no padding and margin
#wrap { 
    width: 166px;
}

By copying the code, you will see the drop down menu has messed up. It can be fix by using *{padding:0;margin:0} but all the other elements on the same page will have no padding and margin which is definitely not the desired output. I've tried set padding and margin to 0 for each and every element such as #wrap, #nav_menu but none of them works.

Upvotes: 0

Views: 195

Answers (2)

HighHopes
HighHopes

Reputation: 2102

When you use the asterisk (*) as as selector in CSS, you are selecting every element on the page! That is a lot to select. Fortunately, CSS provides a way to select specific elements only.

for example, all you want to select is the <ul> on the page, right? Follow this pattern for a selector: parent child{margin:0px;} To make this what you want you can do this: #nav_menu ul.dropDown{margin: 0px;}.

That should fix your problem!

Upvotes: 1

PSL
PSL

Reputation: 123739

Your issue is with the ul which by default takes some margin. You can reset it independently.

try add this

ul.dropDown{
    margin:0px;
}

Fiddle

Plus the transition issue on your menu while hovered in and out quickily can be resolved using stop() and also note that pair event for mouseleave is mouseenter not mouseover So try

   $('#wrap').mouseenter( function(){
        $('#nav_menu').stop(true, true).slideDown();
    }).mouseleave( function(){
        $('#nav_menu').stop(true, true).slideUp();
    });

or just

     $('#wrap').on( 'mouseenter mouseleave', function(){
        $('#nav_menu').stop(true, true).slideToggle();
    });

Fiddle

Upvotes: 1

Related Questions