full width submenu with relative links

Question

I wanted to know how to achieve full width submenu. I did it but the content drop down always starts from left and not relative

this is my fiddle 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;
}

the problem is all content starts from left I want them to start relatively as per the item list keeping the submenu width 100%

Please see the screenshot. The menu when hover on about should start relative and not from the left having the full width submenu enter image description here

Please let me know

Thanks

score 0 · Answer 1 · answered Oct 04 '13 at 17:03

Here is a sample menu

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

Then before downvoting be more specific in posting questions. — Arun Aravind, Oct 05 '13 at 11:09
"start relatively as per the item list". You mean you don't want to move your parent menu items, but the content should be placed above the parent menu ?? — Arun Aravind, Oct 05 '13 at 11:16
If that be the case set "position: absolute and z-index: 99" on your content. "position: relative" is not what you want — Arun Aravind, Oct 05 '13 at 11:17
@San Be more specific about your problem, before down voting someone post — super, Oct 05 '13 at 11:46

score 0 · Answer 2 · answered Oct 05 '13 at 11:36

    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>

full width submenu with relative links

2 Answers2