巨型菜單走出去的窗口

我想這個菜單在我的項目整合，但它涉及到我有兩個問題。

-子菜單走出去的窗口，當我有這個scenario- http://jsfiddle.net/vxaAE/

-我試着給子的寬度設置爲自動，因爲它會根據子菜單的長度。

我如何得到這個工作？

CSS-

.mega-wrapper { 
      width: 100%; 
      margin: 0 auto; 
     } 

     .mega-nav { 
      position: relative; 
      width: auto; 
      height: 59px; 
      background: #252428; 
     } 


      .mega-nav ul .mega-ul { 
       display: block; 
       margin: 0; 
       padding: 0; 
       list-style: 0; 
      } 

      .mega-nav .mega-ul li { 
       position: relative; 
       display: inline-block; 
      } 

       .mega-nav .mega-ul li a { 
        display: block; 
        font-size: 1em; 
        color: #fff; 
        text-decoration: none; 
        padding: 0 15px; 
       } 

        .mega-nav .mega-ul li a:hover, .mega-nav .mega-ul li:hover > a { 
         background: #333; 
        } 

       .mega-nav .mega-ul li:hover > .mega-div { 
        display: block; 
       } 

     .mega-div { 
      position: absolute; 
      top: 100%; 
      left: 0; 
      width: 450px; 
      height: auto; 
      padding: 20px 30px; 
      background: #333; 
      display: none; 
      z-index:1000; 
     } 

     .mega-ul li ul { 
      float: left; 
      width: 23%; 
      margin: 0 2% 15px 0; 
      padding: 0; 
      list-style: none; 
     } 

      .mega-ul li ul li { 
       display: block; 
      } 

       .mega-ul li ul li a { 
        float: left; 
        display: block; 
        width: 100%; 
        height: auto; 
        line-height: 1.3em; 
        color: #888; 
        text-decoration: none; 
        padding: 1px 0; 
       } 

       .mega-ul li ul li:first-child a { 
        font-size: 1.2em; 
        color: #8dc63f; 
       } 

       .mega-ul li ul li a:hover { 
        color: #fff; 
        background: none; 
       } 

     .mega-ul ul li:first-child a:hover { 
      color: #fff; 
     } 

     /* clearfix */ 
     .mega-nav .mega-ul:after { 
      content: "."; 
      display: block; 
      clear: both; 
      visibility: hidden; 
      line-height: 0; 
      height: 0; 
     } 

     .mega-nav .mega-ul { 
      display: inline-block; 
     } 

     .header-title { 
      line-height: 59px; 
     }

任何幫助將是馬麗娟讚賞。

來源

2014-04-04 user3163213

如果子菜單中的元素是動態的，而您不知道.mega-fiv的大小，該怎麼辦？這可能會給你一些工作要做，但看看這個：http://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Gogutz

Fiddle

你可以這樣做：

.mega-nav .mega-ul li:nth-child(1n+6):hover .mega-div{ 
    right:0; 
    left:auto; 
}

該W唉，從第6個.mega-nav .mega-ul li:nth-child(1n+6):hover .mega-div開始，它將與right:0;相反。

這要感謝nth-child(1n+6)，這意味着從第6個元素開始，每個元素都有這個屬性。

這不是最漂亮的替代，但你可以浪費時間，使其left:-50%，或right:50%。

如果你知道你有多少，並且永遠是這樣，你知道一個什麼工作在哪裏，你可以使用:nth-child(n)和風格的方式。（n是該元素出現的數量）。

來源

2014-04-04 13:45:48 Albzi

相對取出位置從li標籤

.mega-ul li { 
     display: inline-block; 
     position: relative; // remove it 
    }

http://jsfiddle.net/vxaAE/1/

來源

2014-04-04 13:39:27 ShibinRagh

這是沒用的，如果你在最後一個標籤你將無法從子菜單中選擇一個項目 – Gogutz

@ Gogutz我知道，我有他的快速解決方案兄弟.. – ShibinRagh

巨型菜單走出去的窗口

回答

相關問題