带有相对链接的全宽子菜单

Question

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

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

请参阅截图。悬停在about上的菜单应该从相对开始，而不是从左边开始具有全宽子菜单

请告诉我

由于

Answer 1

这是一个示例菜单

    <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;
  }

Answer 2

    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>