How to make li dropdown take full-width of viewport?

Question

I want to build a nav with a list. The last list item will have an ul inside it. I want that ul to be hidden by default and it should be visible only when it's parent li is hovered. I want to make my-dropdown-content take the full-width of the viewport, not just the width of it's parent. I can't seem to do it.

The attached image shows how my nav looks like.. I want that messed up dropdown list to take the full-width when hovered on "More.."

https://i.sstatic.net/mHZzL.jpg

I have a code like this:

.my-dropdown{
  position: relative;
  display: inline-block;
}

.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    min-width: 1400px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.my-dropdown-content li {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.my-dropdown:hover .my-dropdown-content {
    display: block;
}

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li class="my-dropdown"><a href="#">More. . .</a>
    <ul class="my-dropdown-content">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4"><li><a href="#"></a></li></div>
          <div class="col-md-4"><li><a href="#"></a></li></div>
          <div class="col-md-4"><li><a href="#"></a></li></div>
        </div>  
      </div>
    </ul>
  </li>
</ul>

I have used min-width to make it take the full-width, but everything's ruined once I resize the window. There must be a solution. Please, I'll be very grateful if you can help me with it.

Answer 1

Depending on browser support you want to achieve, you can use the vw unit (viewport width) and set it to 100vw.

.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    width: 100vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

---

Full working example

/* vv for demonstration purposes only*/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body{padding-top:60px;}
.menu{list-style:none;padding:0;}
.menu>li{float:left;width:20%;}
.menu>li>a{display:block;border:1px solid black;padding:1em}
/* ^^ for demonstration purposes only*/

.my-dropdown{
  position: relative;
  display: inline-block;
}
.my-dropdown-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    width: 100vw;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.my-dropdown-content li {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.my-dropdown:hover .my-dropdown-content {
    display: block;
}

<ul class="menu">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li class="my-dropdown"><a href="#">More. . .</a>
    <ul class="my-dropdown-content">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4"><li><a href="#">sub-1</a></li></div>
          <div class="col-md-4"><li><a href="#">sub-1</a></li></div>
          <div class="col-md-4"><li><a href="#">sub-1</a></li></div>
        </div>  
      </div>
    </ul>
  </li>
</ul>

Answer 2

You don't need to over complicate.... instead of "min-width: 1400px" use "with: 100%"

.my-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #0A141A;
    /* min-width: 1400px; */
    width:100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
} 

Answer 3

Since you can solve the problem by setting the min-width of .my-dropdown-content, it is a good starting point. The problem is with window resize. So you need to define a window resize event:

document.getElementsByTagName("body")[0].addEventListener("resize", function() {
    var dropDownContents = document.getElementsByClassName("my-dropdown-content");
    for (var index in dropDownContents) {
        dropDownContents[index].style["min-width"] = getDesiredSize(dropDownContents[index]);
    }
});

Where getDesiredSize will be a function which you need to implement which will take an item and return its desired min-width. If all the min-width values will be equivalent to each-other regardless of the value of size, then you can calculate it once per resize event.

Answer 4

You could do that using position as fixed on hover as below,

.my-dropdown {
  position: relative;
  display: inline-block;
}

.my-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #0A141A;
  min-width: 1400px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.my-dropdown-content li {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.my-dropdown:hover .my-dropdown-content {
  display: block;
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
}
.my-dropdown-content a{
  text-decoration:none;
  color:#fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul>
  <li>
    <a href="#"></a>
  </li>
  <li>
    <a href="#"></a>
  </li>
  <li>
    <a href="#"></a>
  </li>
  <li>
    <a href="#"></a>
  </li>
  <li class="my-dropdown"><a href="#">More. . .</a>
    <ul class="my-dropdown-content">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-4">
            <li><a href="#">one</a></li>
          </div>
          <div class="col-md-4">
            <li><a href="#">two</a></li>
          </div>
          <div class="col-md-4">
            <li><a href="#">three</a></li>
          </div>
        </div>
      </div>
    </ul>
  </li>
</ul>