全寬子菜單與相關鏈接

我想知道如何實現全寬子菜單。我做到了，但內容下拉總是從開始離開，而不是相對全寬子菜單與相關鏈接

這是我的小提琴 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

全寬子菜單與相關鏈接

回答

相關問題