Dropdown Menu - Make the <Ul> Submenu 100% Width

Dropdown menu ul 100% width, inline sub menu items

In that example, the max width of the sub menu items is limited by the container's width. You can make them to stay inline as below:

.nav > ul > li > ul {
    ...
    white-space: nowrap;
}
.nav > ul > li > ul > li {
    ...
    display: inline-block;
}

Updated jsFiddle

/* not very relevant styling */h1         { font-size: 20px; padding-top: 20px; }.container { position: relative; margin: 20px auto 0 auto; width: 75%; }.header    { background: #eee; }.nav       { background: #ccc; }

/* relevant styling */
body { overflow-x: hidden; } /* trick from css-tricks comments */
/* FIRST LEVEL */
.nav > ul > li {     display: inline-block;     position: relative;     padding: 3px 10px 3px 0;    z-index: 100;}
/* SECOND LEVEL */
.nav > ul > li > ul {    position: absolute;    left: 0;    top: 100%;    padding: 0 1000em; /* trick from css-tricks comments */    margin: 0 -1000em; /* trick from css-tricks comments */    z-index: 101;    visibility: hidden;    opacity: 0;    background: rgba(255, 240, 240, 0.8);    white-space: nowrap; /*new*/}
.nav > ul > li:hover > ul {    visibility: visible;    opacity: 1;}
.nav > ul > li > ul > li {    padding: 3px 0;    display: inline-block; /*new*/}

<div class="header">        <div class="container">        <h1>Hank's Big Leauge Widgets</h1>        <span>You want a widget? we got 'em!</span>    </div>        <!-- NAVIGATION -->        <div class="nav">        <ul class="container">            <li>                <a href="#">Products</a>                <ul>                    <li><a href="#">Widget A</a></li>                    <li><a href="#">Widget B</a></li>                    <li><a href="#">Widget C</a></li>                </ul>            </li>            <li>                <a href="#">Locations</a>                <ul>                    <li><a href="#">Location A</a></li>                    <li><a href="#">Location B</a></li>                    <li><a href="#">Location C</a></li>                </ul>            </li>            <li>                <a href="#">Staff</a>                <ul>                    <li><a href="#">President</a></li>                    <li><a href="#">VP</a></li>                    <li><a href="#">Manager</a></li>                </ul>            </li>        </ul>    </div>    </div>
<div class="content container">    <p>All sorts of content</p>    <p>All sorts of content</p>    <p>All sorts of content</p>    <p>All sorts of content</p>    <p>All sorts of content</p>    <p>All sorts of content</p></div>

Bootstrap horizontal 100% width dropdown-submenu in 100% width horizontal dropdown menu?

The point is to disable dropdown's position: relative and place it on a parent that has the desired width:

#navbar {
  position: relative;
}
#navbar .dropdown.has-container {
  position: static;
}
#navbar .dropdown.has-container .dropdown-menu.container {
  margin: 0 -15px;
}

<!-- ... -->
  <li class="dropdown has-container">
     <a href="#" class="dropdown-toggle" 
        data-toggle="dropdown" role="button" 
        aria-haspopup="true" aria-expanded="false">Menu2</a>
     <ul class="dropdown-menu container">
        <li><a href="#">SubMenu1</a></li>
        <li class="dropdown-submenu"><a href="#">SubMenu2</a>
<!-- ... -->

Proof of concept:
jsFiddle.

how to set width to 100 percent in dropdown menu

Change CSS

li ul {
    display: none;
    background-color: #CC0;
    width:100%;
    position: absolute;
    left: 0;
}

body ul li ul li {
    background-color: #F90;
    margin: 0px;
    padding: 0px;
    display: block;
    float: left;
}

body,ul,li {    margin: 0px;    padding: 0px;    background-color: #0CF;}
li {    font-family: verdana;    font-size: 12px;    color: #333;    line-height: 40px;    list-style-type: none;    /* [disabled]list-style-image: url(../images/li.png); */    background-color: #990;    width: 100px;    float: right;    text-align: center;    height: 40px;    margin-left: 2px;    display: block;}
li ul {    display: none;    background-color: #CC0;    width:100%;    position: absolute;    left: 0;}
body ul li ul li {    background-color: #F90;    margin: 0px;    padding: 0px;    display: block;    float: left;}
li:hover {    background-color: #CC0;    cursor: pointer;}
li:hover>ul {    display: block;}

<ul>        <li>Item 1</li>        <li>Item 2            <ul>                <li>Sub Item1</li>                <li>Sub Item1</li>                <li>Sub Item1</li>            </ul>        </li>        <li>Item 3</li>        <li>Item 4            <ul>                <li>Sub Item1</li>                <li>Sub Item1</li>                <li>Sub Item1</li>            </ul>        </li>        <li>Item 5</li>        <li>Item 6</li>    </ul>

Align dropdown menu to center with 100% width of contianer

You need to contain all your menu in a wrapper that has the desired width of the "mega-menu". This container has to have position:relative. You also need to make sure no other ancestor between the actual mega-menus and the menu container has position:relative.

Here's a fixed version of your fiddle. I only took care of the positioning, not the rest of your CSS problems.

Relevant CSS:

nav {  
  position: relative;
  min-width: 640px;
}
nav>ul.nav, nav>ul.nav>li {
  position: static;
}
nav>ul.nav>li>.dropdown {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
}

My personal opinion is you need to better understand positioning in CSS. Here's a tutorial that will get you up to speed fast on the subject.

Dropdown Menu that takes full width inside a Max Width Container

Remove position: relative from nav.

If the parent's position is set to relative, a child element with position: absolute assumes an absolute position relative to its parent.

.max{ max-width:500px;   margin: 0 auto;}nav {  text-align:center;  width: 100%;  background: #bebebe;  padding: 0;  margin: 0;  height: 60px;}
nav ul {  background: #bebebe;  list-style:none;  padding:0 20px;  margin: 0;  height: 60px;
}

nav ul li {  display: inline-block;}

nav ul li a {  color:#333333;  display:block;  padding:0px 40px;  text-decoration:none;  float: left;  height: 60px;   line-height: 60px;}
nav ul li:hover {  background: #333333;}

nav ul li:hover > a{    color:#FFFFFF;}
nav ul li:hover > ul {  display:block;}
nav ul ul {  background: red;  padding:0;  text-align: center;  display:none;   width: 100vw;  position: absolute;  top: 60px;  left:-0px;  right:0px;    }

<div class="max">  <nav>    <ul>      <li><a href="#">Home</a></li>      <li><a href="#">Tutorials</a>        <ul>          <li><a href="#">Photoshop</a>             </li>          <li><a href="#">Illustrator</a>           </li>        </ul>      </li>      <li><a href="#">User Experience</a></li>    </ul>  </nav>

How do I make the dropdown menu width the same as the tab size?

Ok. Here a workout. There might better solution exists.

First you need to give a fixed height to div#menu. Also I dont think you need a float there. Remove overflow hidden and position relative.

 #menu {
    width:100%;
    background-color:#f23918;
    height: 38px;
 }

Then for submenu add following

li ul {
    display: none;
    min-width: 100%;
    white-space: nowrap;
}

Last solution actually credited to https://stackoverflow.com/a/13775531/2120162

Here you can find how it looks. https://jsfiddle.net/theprog/3h8wpx97/1/

Update: Fixed moving part. Thanks @dowomenfart

li ul {
    display: none;
    min-width: 100%;
    white-space: nowrap;
    position:absolute !important;
    z-index: 100;
}

Javascript 100% width drop down menu

I've got the sub-menu thing in this fiddle

the structure you want can be achieved through JS, all you needed to do is grab the submenu's nested within the .menu-item's and insert them after their parent which is .menu-item by using insertAfter

There is however another issue which is out of the context of the question, which you can always add to the question ofcourse ;) - the menu animation is overlapping the next one rather than first animating one out before the other is animated in.

Furthermore for UX I would recommend you increase the speed of the menu animation, 350ms isn't exactly fast, it's 50ms faster than jQueries default animation speed.

I would increase this to be about 150ms max - but that's just advice ;)

EDIT

After reading @2pha's comments to your question, this is also something to note.

You could have used jQueries hovered.children('.sub-menu'), or hovered.find('.sub-menu') to get the right element. Ofcourse this only works if you don't have overflow: hidden within the main menu's li's.

(on a sidenote - jQueries .find() is the faster method until you start nesting deeply.)

Then there's also the caching of variables which you could take into account.

jQuery is a library that turns a DOM node into a jQuery collection (array of jQuery objects) that all have loaded functions. each time you call $(selector) you're creating a fresh new object. This isn't that heavy but if you do this alot your website could easily lag on a mobile platform.

If you're going to use something more than once or maybe twice, put the selector in a variable as @2pha noted: var hovered = $(hovered).

Then simply use hovered.someJQmethod() - this uses the cached object instead of a fresh instance, which saves alot of resources esp for phones ;).

I want to state that this answer got a whole lot bigger thanks to @2pha's input in the comments. Give him credit if you're giving me credit ;)

Good luck and hope this helps ;)

---

Related Topics