how to create full width submenu in css

Question

Image Screen shot - need to adjust width and height of the sub menu I want to create a submenu which will have the full width of the screen from left to right. But below CSS is not working for me, instead it is starting from Home. I tried by putting width as 100 %, display as block etc, but still, it is not working for me. HTML

    .mtmegamenu .menu-items {
    	opacity: 0;
    	transform-origin: 0 0 0;
    	transition: all 0.8s ease 0s;
    	left: 0 !important;
    	-ms-transform: scaleY(0);
    	-webkit-transform: scaleY(0);
    	-moz-transform: scaleY(0);
    	-o-transform: scaleY(0);
    	transform: scaleY(0);
    }
    .mtmegamenu li:hover .menu-items {
    	opacity: 1;
    	-ms-transform: scaleY(1);
    	-webkit-transform: scaleY(1);
    	-moz-transform: scaleY(1);
    	-o-transform: scaleY(1);
    	transform: scaleY(1);
    }
    .mtmegamenu {
    	position: relative;
    	margin: auto 0px auto 30px;
    	font-family: 'Poppins', sans-serif;
    	height: 40px;
    }
    .mtmegamenu a:focus {
    	outline: 0
    }
    .mtmegamenu>ul {
    	display: inline-block;
    	clear: both;
    	margin: 0
    }
    .mtmegamenu>ul {
    	height: 28px;
    	padding: 0;
    	text-align: left
    }
    .mtmegamenu>ul>li {
    	display: inline-block;
    	font-size: 15px;
    	text-transform: uppercase;
    	margin-right: 1px;
    	background: none !important;
    	margin-right: 30px;
    }

  <div class="container">
      <div class="row">

          <div class="col-md-10 col-sm-11">
              <div class="mtmegamenu">
                  <ul class="hidden-xs">
                      <li class="mt-root demo_custom_link_cms">
                          <div class="mt-root-item">
                              <a href="index.html">
                                  <div class="title title_font"><span class="title-text">Home</span></div>
                              </a>
                          </div>
                      </li>
                      <li class="mt-root">
                          <div class="mt-root-item">
                              <a href="#">
                                  <div class="title title_font"><span class="title-text">Mens</span></div>
                              </a>
                          </div>
                          <ul class="menu-items col-lg-12">
                              <li class="menu-item depth-1 menucol-1-6 ">
                                  <div class="title title_font"> <a href="#">Fashion</a></div>
                                  <ul class="submenu">
                                      <li class="menu-item">
                                          <div class="title"> <a href="shop_grid.html">Women</a></div>
                                      </li>
                                      <li class="menu-item">
                                          <div class="title"> <a href="shop_grid.html">Men</a></div>
                                      </li>

                                  </ul>
                              </li>

                          </ul>
                      </li>

                  </ul>

              </div>
          </div>
      </div>
  </div>

Same as we see in myntra or flipkart any ecommerce website

Answer 1

Are you looking for something like this?

.mtmegamenu .menu-items {
    opacity: 0;
    transform-origin: 0 0 0;
    transition: all 0.8s ease 0s;
    left: 0 !important;
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
}
.mtmegamenu li:hover .menu-items {
    opacity: 1;
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
}
.mtmegamenu {
    position: relative;
    margin: auto 0px auto 30px;
    font-family: 'Poppins', sans-serif;
    height: 40px;
}
.mtmegamenu a:focus {
    outline: 0
}
.mtmegamenu>ul {
    display: inline-block;
    clear: both;
    margin: 0
}
.mtmegamenu>ul {
    height: 28px;
    padding: 0;
    text-align: left
}
.mtmegamenu>ul>li {
    display: inline; /* inline */
    font-size: 15px;
    text-transform: uppercase;
    margin-right: 1px;
    background: none !important;
    margin-right: 30px;
    float: left; /*added*/
}

<div class="container">
    <div class="row">

        <div class="col-md-10 col-sm-11">
            <div class="mtmegamenu">
                <ul class="hidden-xs">
                    <li class="mt-root demo_custom_link_cms">
                        <div class="mt-root-item">
                            <a href="index.html">
                                <div class="title title_font"><span class="title-text">Home</span></div>
                            </a>
                        </div>
                    </li>
                    <li class="mt-root">
                        <div class="mt-root-item">
                            <a href="#">
                                <div class="title title_font"><span class="title-text">Mens</span></div>
                            </a>
                        </div>
                        <ul class="menu-items col-lg-12">
                            <li class="menu-item depth-1 menucol-1-6 ">
                                <div class="title title_font"> <a href="#">Fashion</a></div>
                                <ul class="submenu">
                                    <li class="menu-item">
                                        <div class="title"> <a href="shop_grid.html">Women</a></div>
                                    </li>
                                    <li class="menu-item">
                                        <div class="title"> <a href="shop_grid.html">Men</a></div>
                                    </li>

                                </ul>
                            </li>

                        </ul>
                    </li>

                </ul>

            </div>
        </div>
    </div>
</div>

Answer 2

You should use 'vw' attr to fill all screen width:

#wide-div {
  width: 100vw;
}