CSS邊距和填充問題

我面對困難，使下拉列表看起來不錯，因爲它已經搞砸了與CSSCSS邊距和填充問題

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; 
}

通過複製代碼，您將看到下拉菜單已混亂。它可以通過使用*{padding:0;margin:0}來修復，但同一頁面上的所有其他元素將沒有填充和邊距，這絕對不是所需的輸出。我已經嘗試設置填充和邊距爲0的每個元素，例如#wrap,#nav_menu但它們都不起作用。

來源

2013-09-26 Isaac Lem

你的問題是與ul默認需要一些保證金。您可以獨立重置它。

嘗試添加在你的菜單，而這

ul.dropDown{ 
    margin:0px; 
}

Fiddle

加上過渡問題徘徊在進出quickily可以解決使用stop()和還指出，對事件mouseleave是mouseenter不mouseover試試

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

或者只是

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

Fiddle

來源

2013-09-26 02:19:05 PSL

嗨PSL，請幫忙看看我的另一個問題@ http://stackoverflow.com/questions/19019122/weird-behaviour-of-css-dropdown-menu感謝您的幫助！ –

@IsaacLem發佈了一個答案。 – PSL

當您使用星號（*）作爲在CSS選擇器，您選擇頁面上的每一個元素！這是很多選擇。幸運的是，CSS提供了一種僅用於選擇特定元素的方法。

例如，您要選擇的全部內容是頁面上的<ul>，對不對？按照這種模式選擇器：parent child{margin:0px;}要做到這一點你想要你可以這樣做：#nav_menu ul.dropDown{margin: 0px;}。

這應該解決您的問題！

來源

2013-09-26 02:25:41 Casey

CSS邊距和填充問題

回答

相關問題