巨型菜单走出去的窗口

我想这个菜单在我的项目整合，但它涉及到我有两个问题。

-子菜单走出去的窗口，当我有这个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

巨型菜单走出去的窗口

回答

相关问题