드롭 다운 메뉴에서 CSS 드롭 다운 메뉴 변경

Question

거의 확실하게이 질문에 대한 답변이 한 가지 형태로 제공됩니다. 여기에서 발견 한 변경 사항을 적용하면 더 이상 나를 얻지 못하는 것 같습니다.

드롭 다운 메뉴에서 crisislab.nl의 CSS 메뉴를 드롭 다운 메뉴로 변경하려고합니다. (사이트에서 볼 수 있듯이 현재 현재 작업 중입니다.)

현재 발생하는 문제는 메뉴가 제대로 작동하고있는 것처럼 보이며 메뉴 텍스트가 아래쪽으로 표시된다는 사실입니다. 메뉴가 위로 이동하는 동안 (논리적으로 들리지 않으면 crisislab.nl을보십시오)

현재 진행 상황은 아래 코드를 참조하십시오. 도움을 줄 수있는 사람은 누구입니까?

미리 감사드립니다.

드롭 다운이 top:<x>px;을 가지고 당신이 dropup을 원한다면 그냥 말 :

bottom:<x>px; 내가 코드를 수정

   #navigation { 
       width: 980px; 
       height: 38px; 



     } 
      #navigation li { 
       float: left; 
       position: relative; 

           top: 220px; 
      } #navigation li:hover { background: transparent url(gfx/navigation_hover.png) repeat; } 
       #navigation li a { 
        text-transform: uppercase; 
        color: white; 
        padding: 13px 33px; 
        line-height: 38px; 
        font-size: 11px; 
       } 
        #navigation li a:hover { text-decoration: none;} 
        #navigation li ul { 

         position: absolute; 
         background: transparent url(gfx/navigation_hover.png) left top repeat; 
         z-index: 1000; 
         min-width: 100%; 
               display:none; 
               left:-1px; 
        } 
        #navigation li:hover ul { 


                 display:block; 

        } 
         #navigation li ul li { 
          background: none; 
          width: 100%; 
        } 
          #navigation li ul li:hover { 
            background: none; 
           background-color: #2a51b5; 



          } 
          #navigation li ul li a { 
           text-transform: uppercase; 
           color: white; 
           padding-left: 8px 10px; 
           line-height: 28px; 
           width: 100%; 
           display:block; 



          } 

Answer 1

dropup에 드롭 다운 메뉴에서 기본적인 차이는 아이 ul의 오프셋 그것을 작동하도록 :

:

http://jsfiddle.net/fJSVz/는 기본적으로 나는 다음과 같은 규칙을 변경3210

#navigation li ul { 
    top: -9999px;  /* <- removed */ 
    display:none;  /* <- this will trigger the hide/show */ 
} 
#navigation li:hover ul { 
    bottom:20px;   /* <- this is the trick to push the ul up */ 
    display:block;  /* <- show the ul on hover */ 
}