How to get a full-width (of screen) dropdown-menu

Question

Trying to get a full-width dropdown-menu, but now it takes the entire width of the parent element. Which is in this case the list item.

Could someone help me to fix that. The most important thing is that this dropdown-menu should also be responsive as well. No JavaScript and other JavaScript framework please, only in pure CSS.

https://codepen.io/anon/pen/dWoMoJ

html, 
body {
	width: 100%;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	font-size: 16px;
	color: #666;
	background: transparent;
}

.navbar-links {
		max-width: 700px;
		text-align: center;
		margin: 0 auto;
	}

.links-to li {
		display: inline-block;
		min-width: 150px;
		text-align: center;
    position: relative;
		margin-left: -5px;
		color: #828282;
		margin-top: -16px;
	}
	.links-to li .main-links {
		display: block;
		padding-top: 20px;
		padding-bottom: 20px;
		border: 1px solid green;
		overflow: hidden;
	}
	.links-to li a:hover {
		color: #eb0028;
		cursor: pointer;
	}

#navbar-dropdown-toggle{
    position: absolute;
}

.dropdown-label-navbar {
	  height: 100%;
	  width: 100%;
	  display: block;
	  position: absolute;
	  background: red;
    top: 0;
    left: 0;
}

	.entire-block {
		width: 500px;
		height: 150px;
		position: relative;
		display: block;
		margin: 0 auto;
		padding: 0;
		margin-top: 10px;
	}

	.dropdown-menu {
		width: 100%;
		opacity: 0;
		background: white;
		position: absolute;
		margin: 0;
		padding: 0;
		left: 0;
		right: 0;
		border: 1px solid red;
		max-height: 20px;
    box-sizing: border-box;
		overflow: hidden;
	}

	.navbar-dropdown:checked ~ .dropdown-menu {
		display: block;
		transition: max-height 1s;
		max-height: 300px;
		opacity: 1.0;
	}

<div class="navbar-links" id="menu">
            <ul class="links-to">
                <li class="main-nav">
                    <a href="#99" class="main-links">Home</a>
                </li>

                <li class="main-nav">
                    <a href="#99" class="main-links">Shoes</a>
                </li>

                <li class="main-nav">
                    <input id="navbar-dropdown-toggle" type="checkbox" class="navbar-dropdown"/>
                    <label class="dropdown-label-navbar" id="checkboxNavbar" for="navbar-dropdown-toggle"></label>

                    <a href="#99" class="main-links">Store</a>
                    <ul class="dropdown-menu" id="checkboxDropdown">
                        <div class="entire-block">
                            <div class="dropdown-image-block">
                            </div>
                            <li class="list-of-dropdown">
                                <div class="dropdown-list"><a href="#99">Apple</a></div>
                                <div class="dropdown-list"><a href="#99">Banana</a></div>
                                <div class="dropdown-list"><a href="#99">Christus</a></div>
                            </li>
                        </div>
                    </ul>
                </li>
            </ul>
        </div>

Answer 1

Full Width drop down menu !

Try this

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
  background: #212121;
  font-size: 22px;
  line-height: 32px;
  color: #ffffff;
  word-wrap: break-word !important;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-size: 60px;
  text-align: center;
  color: #FFF;
}

h3 {
  font-size: 30px;
  text-align: center;
  color: #FFF;
}

h3 a {
  color: #FFF;
}

a {
  color: #FFF;
}

h1 {
  margin-top: 100px;
  text-align: center;
  font-size: 60px;
  font-family: 'Bree Serif', 'serif';
}

#container {
  margin: 0 auto;
}

p {
  text-align: center;
}

nav {
  margin: 50px 0;
  background-color: gray;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  display: inline-block;
  background-color: gray;
}

nav a {
  display: block;
  padding: 0 10px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}

nav a:hover {
  background-color: #000000;
}


/* Hide Dropdowns by Default */

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
  /* the height of the main nav */
}


/* Display Dropdowns on Hover */

nav ul li:hover>ul {
  display: inherit;
}


/* Fisrt Tier Dropdown */

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}


/* Second, Third and more Tiers	*/

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}


/* Change this in order to change the Dropdown symbol */

li>a:after {
  content: ' +';
}

li>a:only-child:after {
  content: '';
}

<div id="container">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">WordPress</a>
        <!-- First Tier Drop Down -->
        <ul>
          <li><a href="#">Themes</a></li>
          <li><a href="#">Plugins</a></li>
          <li><a href="#">Tutorials</a></li>
        </ul>
      </li>
      <li><a href="#">Web Design</a>
        <!-- First Tier Drop Down -->
        <ul>
          <li><a href="#">Resources</a></li>
          <li><a href="#">Links</a></li>
          <li><a href="#">Tutorials</a>
            <!-- Second Tier Drop Down -->
            <ul>
              <li><a href="#">HTML/CSS</a></li>
              <li><a href="#">jQuery</a></li>
              <li><a href="#">Other</a>
                <!-- Third Tier Drop Down -->
                <ul>
                  <li><a href="#">Stuff</a></li>
                  <li><a href="#">Things</a></li>
                  <li><a href="#">Other Stuff</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Graphic Design</a></li>
      <li><a href="#">Inspiration</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <h1>Pure CSS Drop Down Menu</h1>
  <p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
  <p>Read tutorial</p>
</div>

Answer 2

The basic problem is that your <li> are positioned relativly, therefore any absolute positioning of decendents will be relative to the parent. Would do something like this: https://codepen.io/23b/pen/VbLpZe?editors=1100

Another solution would be to put the dropdown outside the <li> container altogther.

Answer 3

I would change the style of dropdown-menu:

.navbar-links {
		max-width: 700px;
		text-align: center;
		margin: 0 auto;
	}

.links-to li {
		display: inline-block;
		min-width: 150px;
		text-align: center;
    position: relative;
		margin-left: -5px;
		color: #828282;
		margin-top: -16px;
	}
	.links-to li .main-links {
		display: block;
		padding-top: 20px;
		padding-bottom: 20px;
		border: 1px solid green;
		overflow: hidden;
	}
	.links-to li a:hover {
		color: #eb0028;
		cursor: pointer;
	}

#navbar-dropdown-toggle{
    position: absolute;
}

.dropdown-label-navbar {
	  height: 100%;
	  width: 100%;
	  display: block;
	  position: absolute;
	  background: red;
    top: 0;
    left: 0;
}

	.entire-block {
		width: 500px;
		height: 150px;
		position: relative;
		display: block;
		margin: 0 auto;
		padding: 0;
		margin-top: 10px;
	}

	.dropdown-menu {
		width: 300%;
		opacity: 0;
		background: white;
		position: absolute;
		margin: 0;
		padding: 0;
		left: 0;
		right: 0;
		border: 1px solid red;
		max-height: 20px;
    box-sizing: border-box;
		overflow: hidden;
	}

	.navbar-dropdown:checked ~ .dropdown-menu {
        margin-left: -200%;
		display: block;
		transition: max-height 1s;
		max-height: 300px;
		opacity: 1.0;
	}

<div class="navbar-links" id="menu">
            <ul class="links-to">
                <li class="main-nav">
                    <a href="#99" class="main-links">Home</a>
                </li>

                <li class="main-nav">
                    <a href="#99" class="main-links">Shoes</a>
                </li>

                <li class="main-nav">
                    <input id="navbar-dropdown-toggle" type="checkbox" class="navbar-dropdown"/>
                    <label class="dropdown-label-navbar" id="checkboxNavbar" for="navbar-dropdown-toggle"></label>

                    <a href="#99" class="main-links">Store</a>
                    <ul class="dropdown-menu" id="checkboxDropdown">
                        <div class="entire-block">
                            <div class="dropdown-image-block">
                            </div>
                            <li class="list-of-dropdown">
                                <div class="dropdown-list"><a href="#99">Apple</a></div>
                                <div class="dropdown-list"><a href="#99">Banana</a></div>
                                <div class="dropdown-list"><a href="#99">Christus</a></div>
                            </li>
                        </div>
                    </ul>
                </li>
            </ul>
        </div>