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

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

    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>

Answer 2

这是一个示例菜单

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