全宽子菜单与相关链接

我想知道如何实现全宽子菜单。我做到了，但内容下拉总是从开始离开，而不是相对全宽子菜单与相关链接

这是我的小提琴 http://jsfiddle.net/cancerian73/RB9jX/1/

.megamenu { 
list-style:none; 
padding:0; 
position:relative; /* For IE7 */ 
margin:0; 
font-family:Arial, Helvetica, sans-serif; 
font-size:14px; 
line-height:1; 
}

问题是所有的内容从左边我想他们开始相对按照项目启动列表保持子菜单宽度100％

请参阅屏幕截图。当关于悬停应该具有全宽子菜单启动相对的，不是从左边的菜单 enter image description here

请让我知道

感谢

来源

2013-10-04 San

下面是一个简单的菜单

<div class="dropdown" style="background-color: white;" tabindex="1"> 
    <a>Menu</a> 
    <ul> 
     <li> 
      <a>Fruits</a> 
      <ul> 
       <li><a>Apple</a></li> 
       <li><a>Orange</a></li> 
       <li><a>Grape</a></li> 
       <li><a>Banana</a></li> 
      </ul> 
     </li> 
     <li> 
      <a>Vegetables</a> 
      <ul> 
       <li><a>Lemon</a></li> 
       <li><a>Cucumber</a></li> 
       <li><a>Melon</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

// css

.dropdown { 
      position: relative; 
      display: inline-block; 
      font-size: 110%; 
    } 

    .dropdown ul { 
     position: absolute; 
     top: -100%; 
     left: 100%; 
     display: none; 
     background-color: inherit; 
     padding: 0; 
     list-style: none; 
     border: 1px solid #ccc; 
    } 

    .dropdown ul li { 
     position: relative; 
     list-style: none; 
     margin: 5px 0; 
     background-color: inherit; 
    } 

    .dropdown ul li a { 
     display: block; 
     padding: 3px 10px; 
    } 

    .dropdown ul li a:hover { 
     background-color: #18b6f2 !important; 
    } 

    .dropdown ul li:hover > ul { 
     display: block; 
     top: 0; 
     background-color: inherit; 
    } 

    .dropdown ul li:hover > a { 
     background-color: #85ddff; 
    } 

    .dropdown:hover > ul { 
     display: block; 
    }

来源

2013-10-04 17:03:44

这不是我要找的 – San

然后在发布问题之前downvoting更具体。 –

“按照项目清单相对开始”。你的意思是你不想移动你的父菜单项，但内容应该放在父菜单上面？ –

ul.mega-dropdown { 
     list-style: none; 
     padding: 0; 
    } 
    ul.mega-dropdown li.menu-item { 
     position: relative; 
     list-style: none; 
     background-color: #5b5b5b; 
     padding: 10px 5px; 
     -moz-transition: all 0.3s ease-in; 
     -o-transition: all 0.3s ease-in; 
     -webkit-transition: all 0.3s ease-in; 
     transition: all 0.3s ease-in; 
     cursor: pointer; 
    } 
    ul.mega-dropdown li.menu-item:hover { 
     background-color: #373737; 
    } 
    ul.mega-dropdown li.menu-item:hover > .description { 
     display: block; 
    } 
    ul.mega-dropdown li.menu-item > a { 
     display: block; 
     font-size: 120%; 
     color: white; 
    } 
    ul.mega-dropdown li.menu-item .description { 
     display: none; 
     position: absolute; 
     background-color: white; 
     border: none; 
     border-bottom: 2px solid; 
     border-left: 2px solid; 
     border-right: 2px solid; 
     border-color: #373737; 
     height: 500%; 
     top: 100%; 
     left: 0; 
     right: 0; 
     z-index: 99; 
     padding: 10px; 
    } 


Is this what you want? 



<ul class="mega-dropdown"> 
     <li class="menu-item"> 
      <a>Eatables</a> 
      <div class="description"> 
       I wanted to know how to achieve full width submenu.<br /> 
       I did it but the content drop down always starts from left and not relative 
      </div> 
     </li> 
     <li class="menu-item"> 
      <a>Nothing</a> 
      <div class="description"> 
       I wanted to know how to achieve full width submenu. <br /> 
       I did it but the content drop down always starts from left and not relative 
      </div> 
     </li> 
    </ul>

来源

2013-10-05 11:36:34

全宽子菜单与相关链接

回答

相关问题