메뉴 테두리를 아래로 내림

Question

간단한 드롭 다운 메뉴를 만들려고합니다. 내가 현재 가지고있는 것은 다음과 같습니다 : http://jsfiddle.net/Wt9UC/

이제 내가 목표로하는 것은 Fiverr의 라인에서 더 많은 것이 있습니다.

내가 공중 선회하고 온 호버 나타납니다 하위 항목의 전체 상자 주위에 메뉴 항목 주위에 (위, 왼쪽, 오른쪽) 국경을 얻기 위해 시도하고있어, 명확합니다. 내 말씨가 명확하지 않은 경우 다음 이미지가 도움이 될 수 있습니다.

나는 (예를 들어 적용되는 경계선의 희망 전면에 하위 항목을 가져 오는) 그러나 그것은 매우 잘 작동하지 않았다 층으로 주위를 연주했습니다.

내 HTML :

<ul id="menu"> 
    <li><a href="#">Test</a> 
     <ul> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
      <li><a href="#">5</a></li> 
     </ul> 
    </li> 
</ul> 

내 CSS : 당신의 시간을

#menu a { 
    color: black; 
} 

#menu { 
    padding: 0; 
    margin: 0; 
    list-style-type: none; 
    height: 30px; 
} 

#menu li { 
    float: left; 
} 

#menu li a { 
    padding: 9px 20px; 
    display: block; 
    text-decoration: none; 
    font-size: 12px; 
} 

#menu a:hover { 
    color: #c5cbc9; 
    border-radius: 3px; 
    border-left: 1px solid; 
    border-top: 1px solid; 
    border-right: 1px solid; 
} 

/* Submenu */ 
#menu ul { 
    border-radius: 3px; 
    border: 1px solid; 
    position: absolute; 
    left: -9999px; 
    top: -9999px; 
    list-style-type: none; 
} 

#menu li:hover { /*had bg*/ 
    position: relative; 
} 

#menu li:hover ul { /*had bg*/ 
    left: 0px; 
    top: 30px; 
    padding: 0px; 
} 

#menu li:hover ul li a { 
    padding: 5px; 
    display: block; 
    width: 168px; 
    text-indent: 15px; /*had bg*/ 
} 

#menu li:hover ul li a:hover { 
    text-decoration: underline; 
} 

감사합니다!

Answer 1

다음은 메가 메뉴 제작을위한 완벽한 자습서입니다. 희망이 도움이됩니다.

http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

데모 링크 :

는 "국경 바닥을 추가 :"4 열 "에 http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.html

호버은 /는 u는 다음을 수행 할 필요가 정확한의 requirment/

Answer 2

그게 전부 : 1px solid # FFF "를"#menu li a {} "에 추가 한 다음 드롭 다운을 1px 위로 이동하십시오.

link to fiddle http://jsfiddle.net/cL2x7/