Full Width Left-Aligned Dropdown Menu

Question

I am trying to create a full width left-aligned dropdown menu (using Semantic UI)

Right now, the menu is inheriting the exact same width and placement as its parent div. I would like to have the "child" menu span full-width and always be aligned to the left. I prepared a JS fiddle that shows the current behavior which shows the child menu aligning with the parent div, instead of being full-width.

HTML:

<html>
    <head>

      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.css" />

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.6/semantic.min.js"></script>

    </head>

    <body>        
          <div id="nav_items"> 
            <div class="ui top center pointing dropdown">
              <div class="title">Dropdown 1</div>
              <ul class="menu">
                <li>Item One 1</li>
                <li>Item Two 1</li>
                <li>Item Three 1</li>
                <li>Item Four 1</li>
              </ul>
            </div>
            <div class="ui top center pointing dropdown">
              <div class="title">Dropdown 2</div>
              <ul class="menu">
                <li>Item One 2</li>
                <li>Item Two 2</li>
                <li>Item Three 2</li>
                <li>Item Four 2</li>
              </ul>
            </div>
            <div class="ui top center pointing dropdown">
              <div class="title">Dropdown 3</div>
              <ul class="menu">
                <li>Item One 3</li>
                <li>Item Two 3</li>
                <li>Item Three 3</li>
                <li>Item Four 3</li>
              </ul>
            </div>
          </div>

    </body>
</html>

CSS:

body {
  background: #f6f5f4; 
  font-family: 'Open Sans', sans-serif;
  box-sizing: inherit;
}

/*------------ NAV-ITEMS STYLE ------------*/  
#nav_items {
  position: relative;
  width: 100%;
  display: block;
  float: left;
  list-style-type: none;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.1); 
}

#nav_items .ui.dropdown {
  width: 33.33%;
  float: left;
  position: relative;
  text-align: center;
  line-height: 60px;
  height: 60px;
  border-right: 1px solid rgba(0,0,0,0.1);
}

#nav_items .ui.dropdown .title {
  color: #000;
  font-size: 16px;
  background: #fff;
  cursor: pointer;
}


/*------------ NAV-ITEMS MENU STYLE ------------*/
#nav_items .ui.dropdown .menu {
  position: absolute;
  top: 60px;
  margin: 0;
  padding: 0;
  outline: 0;
  background: #fff;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-radius: 0px;
  min-width: 100% !important;  
}

#nav_items .ui.dropdown .menu li {
   list-style-type: none;
  text-align:left; 
  float: left;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer;
  min-width: 100% !important; 
  text-indent: 20px;
}

#nav_items .ui.pointing.dropdown .menu:after {
  display: none;
}

JS:

$(document).ready(function(){

  $('#nav_items .dropdown')
    .dropdown({
  });

});

JS Fiddle Link:

https://jsfiddle.net/svansoeren/ja4uy405/13/

Thank You!

like this? jsfiddle.net/ja4uy405/9 added display: block; width: 100%; to #nav_items .ui.dropdown{} — Liquidchrome
^ I guess Steven wants the submenu to be full width instead of 33% — m4n0
Yes, "menu" items should stay 33.33% & "sub-menu" items should become "100%" — user4820806
I think you will have to rearrange your menu item elements so that they are parallel to the parent dropdown level. As long as they are child elements of a parent dropdown, they will stay within the bounds of the parents' width. — Liquidchrome
Thank you Liquidchrome jsfiddle.net/svansoeren/b7xzLyyp works perfectly. — user4820806

Barbara Laird Barbara Laird · Accepted Answer · 2015-07-06T19:04:44

https://jsfiddle.net/blaird/ja4uy405/10/

How about making the dropdown fixed to take it out of the flow:

#nav_items .ui.dropdown .menu {
  position: fixed;
  top: 60px;
  left: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  background: #fff;
  border: none;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-radius: 0px;
  min-width: 100% !important;  
}

Full Width Left-Aligned Dropdown Menu

1 Answers