在下拉菜單中更改CSS下拉菜單

我幾乎可以肯定這個問題已經以某種形式得到解答。應用我在這裏和其他地方找到的更改似乎沒有讓我更進一步。在下拉菜單中更改CSS下拉菜單

我正在嘗試將css菜單從crisislab.nl從下拉菜單更改爲下拉菜單。（正如你可以在網站上看到我目前正在處理它。）

我遇到的當前問題是菜單似乎工作正常，期望菜單文本向下顯示以及而菜單正在向上移動（如果這聽起來不合邏輯，請查看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; 



          }

來源

2012-06-08 Nathan Quite

請解決您遇到的問題 – iddo

修復時我會這樣做。目前正在開展工作，並希望在十分鐘左右完成。 –

和你的菜單有多遠？你能把這些變化應用到例子小提琴嗎？ – Christoph

從下拉到dropup的基本區別是孩子ul偏移使其工作：http://jsfiddle.net/fJSVz/

基本上我改變了以下規則：

#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 */ 
}

來源

2012-06-08 08:59:06 Christoph

謝謝！我會看看我能否修復它。我是一個新手，基本上糾正某人失誤，但我應該到達那裏:-)。 –

@NathanQuite如果你還有其他問題，請嘗試一下，稍微玩一下 - 只要問一下;） – Christoph

在這一點上，當我試圖將你的修改應用到網站時，我似乎被卡住了某處（參見crisislab.nl）。我已經能夠把菜單放在正確的位置，但現在文字apears再次下降而不是up。任何額外的幫助將不勝感激！ –

在下拉菜單中更改CSS下拉菜單

回答

相關問題