내 드롭 다운 메뉴로 꿈을 혼란스럽게하는 의심

Question

나는 드롭 다운 메뉴를 만들려고했지만 많은 질문이 있는데 나는 완전히 잘못하고있는 것 같습니다. 내 꿈을 교란하고있는 주요 문제 중 일부는 다음과 같습니다

• 나는 적 UL 또는 LI들 (또는 둘 다)에 list-style:none;를 사용해야합니까?
• background-color 및 border을 As 또는 LI에 넣는 것이 더 좋습니까?
• 절대 부동 UL 내에있는 LI는 float:left; 또는 position:relative;이어야합니까?

코드는 작동하는 것처럼 보이지만 가장 큰 두려움은 불필요한 줄이나 불량 코딩을 작성하고 있다는 것입니다.

도와주세요.

내가 사용 CSS :

*{ 
padding:0; 
margin:0; 
} 

#menu{ 
margin:0 auto; 
width:800px; 
background:#999; 
border:1px solid #777; 
} 

#menu ul{ 
list-style:none; 
border-right:1px solid #aeaeae; 
/*Not sure about this V*/ 
position:relative; 
float:left; 
} 

#menu li ul{ 
font-weight:normal; 
display:none; 
position:absolute; 
border:1px solid #777; 
width:200px; 
/*Not sure about this V*/ 
float:none; 
margin-left:-2px; 
} 

#menu li{ 
display:block; 
position:relative; 
float:left; 
background:#999; 
border-right:1px solid #777; 
border-left:1px solid #aeaeae; 
} 

#menu li li{ 
float:none; 
background:#eaeaea; 
border:0; 
border-top:1px solid #666; 
} 

#menu li:hover{ 
background:#a6a6a6; 
} 

#menu li li:hover{ 
background:#f5f5f5; 
} 

#menu a{ 
display:block; 
text-decoration:none; 
color:#fff; 
padding:5px 15px; 
} 

#menu li ul a{ 
color:#333; 
} 

#menu a:hover{ 
color:#fff; 
} 

#menu li ul a:hover{ 
color:red; 
} 

#menu li li:first-child{ 
border-top:0; 
} 

.clear{ 
clear:both; 
font-size:0; 
line-height:0; 
} 

HTML 구조는 다음과 같습니다

: 나는/보여 JQuery을 사용하고

<div id="menu"> 
    <ul> 
     <li><a href="">Home</a></li> 
     <li><a href="">About Us</a></li> 
     <li><a href="">Products</a> 
     <li><a href="">Drop Down</a> 
      <ul> 
      <li><a href="">DD Item</a></li> 
      <li><a href="">Another One</a></li> 
      <li><a href="">Last DD Item</a></li> 
      </ul><div class="clear"></div> 
     </li> 
    </ul><div class="clear"></div> 
</div> 

과 함께 메뉴를 숨기기

$('#menu ul li').hover(function(){$('ul',this).slideDown(100);}, function(){$('ul',this).slideUp(100);}); 

내가 사용하는 코드는 강력하게 수정,하지만 here

Answer 1

에서 가져온 것입니다 당신의 꿈은 아마도 안전합니다. 즉, CSS는 전반적으로 상당히 좋아 보인다. 트위터 부트 스트랩을 사용하여 당신이하고있는 일 (굉장한 드롭 다운)을 고려해 볼 수는 있지만 확실히 자신 만의 롤업을 할 수는 있습니다.

귀하의 질문에 대답하려면 :

---

나는 적 UL 또는 LI들 (또는 둘 다)에list-style:none;를 사용해야합니까?

그냥 ul입니다.

---

는 더 나은background-color하고 또는 LI들에border을 넣을 수 있나요?

요소를 li 요소에 넣습니다.

---

절대 부동 UL 내부에있는 LI 필드는float:left;또는position:relative;을해야합니까?

완전히 다른 것들을 수행합니다. 왼쪽 플로팅으로 충분해야하지만 둘 다 할 수도 있습니다.이 도움이 경우

$("#menu ul li").hover(
    function() { 
    $(this).children("ul").slideDown(100); 
    }, 
    function() { 
    $(this).children("ul").slideUp(100); 
    } 
);