CSS/Jquery 드롭 다운 메뉴가 의도 한대로 작동하지 않습니다.

html/css/jquery로 간단한 드롭 다운 메뉴를 만드는 방법에 대한 가이드를 따르려고했지만 최종 결과가 완전히 엉망이되어 단순히 단서 이유. 거기에 몇 가지 이유가있다거나 내가 그것을 제거하는 방법 ... 도움이 많이 주시면 감사하겠습니다 이유를 모르겠어요 드롭 다운 메뉴의 왼쪽이 비어있는 공간을 CSS/Jquery 드롭 다운 메뉴가 의도 한대로 작동하지 않습니다.

HMTL :

는

<html> 
<head> 

<meta charset="UTF-8" /> 
<title></title> 
<link rel="stylesheet" type="text/css" href="test.css"> 
</head> 
<body> 



<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Links</a> 
     <ul> 
     <li><a href="#">First </a></li> 
     <li><a href="#">Second</a></li> 
     <li><a href="#">Third </a></li> 
     <li><a href="#">Fourth</a></li> 
     <li><a href="#">Fifth</a> 
      <ul> 
       <li><a href="#">First</a></li> 
       <li><a href="#">Second</a></li> 
       <li><a href="#">Third</a></li> 
       <li><a href="#">Fourth</a></li> 
       <li><a href="#">Fifth</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href="#">Examples</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 

<div class="clr"></div> 




<script src="jquery.js" type="text/javascript"></script> 
<script src="test.js" type="text/javascript"></script> 
</body> 
</html>

CSS :

.clr {clear: both:} 

ul { 
    list-style: none; 
} 
ul li { 
    float: left; 
    position: relative; 
} 
ul li a { 
    width: 118px; 
    display: block; 
    border: 1px solid #ddd; 
    height: 50px; 
    line-height: 30px; 
    text-align: center; 
    text-decoration: none; 
    color: #1787cf; 
    background: #fff; 
} 
ul li a:hover { 
    background: #1787cf; 
    color: #fff; 
} 
li ul { 
    display: none; 
} 
li ul li { 
    float: left; 
} 

li:hover > ul { 

    position: absolute; 
    top: 52px; 
    left: 0; 
    box-shadow: 0 2px 2px rgba(0,0,0,.2); 
} 
li ul li:hover > ul { 

    position: absolute; 
    top: 0; 
    left: 120px; 
    box-shadow: 0 2px 2px rgba(0,0,0,.2); 
}

JQuery와 :

는

(function(){ 


$('ul li').hover(function() { 
    $(this).children('ul').slideDown(); 
    }, function() { 
    $(this).children('ul').slideUp().css('display', 'none'); 
}); 
})();

출처

2014-10-24 Jones44

하는'설정해보십시오 패딩 왼쪽 : 0 '온 자식 목록. – Blazemonger

당신은 아마도'height : 0'과'height : auto'를 사용하여 javascript 대신 CSS3를 사용할 수 있습니다. – Popnoodles

어린이 항목의 여백과 패딩을 제거하십시오. 이 시도 : 여기

ul li ul, ul li ul li{ 
     margin: 0; 
     padding: 0; 
    }

아래에, 당신을위한 업데이트 바이올린처럼

이

ul li ul, 
ul li ul li { 
    margin: 0; 
    padding: 0; 
}

출처

2014-10-24 14:54:15

고맙습니다. – Jones44

UL 및 LI는 제거하지 않은 default margin and padding 있습니다. 나는 당신이 부모 나 아이들에게 그것을 원하지 않는다고 가정하고 있습니다.

ul, li{ 
    margin: 0; 
    padding: 0; 
}

출처

2014-10-24 14:53:01 Popnoodles

감사합니다. – Jones44

시도 ...

http://jsfiddle.net/5Z2QV/23/

출처

2014-10-24 14:59:44 SDK

감사합니다. – Jones44

CSS/Jquery 드롭 다운 메뉴가 의도 한대로 작동하지 않습니다.

답변

관련 문제