html - navigation bar with drop down navigation is not taking full browser width -


hi creating drop down menu using unordered list , want make navigation width full without affecting dropdown menu.

when try parent div(.menu) overflow problem occurs. want menu take entire width in browser text of navigation center align. in advance.

.menu ul {    list-style: none;  }  .menu ul li {    width: 220px;    height: 35px;    float: left;    text-align: center;    background-color: red;    position: relative;    list-style-type: none;    line-height: 35px;  }  .menu ul li {    text-decoration: none;    color: white;    display: block;  }  .menu ul li a:hover {    background-color: green;  }  .menu ul ul {    position: absolute;    display: none;  }  .menu ul li:hover > ul {    display: block;  }  .menu ul ul ul {    margin-left: 220px;    top: 0px;  }
<div class="menu">    <ul>      <li><a href="#">home</a>        <ul>          <li><a href="#">sub1</a>          </li>          <li><a href="#">sub2</a>          </li>          <li><a href="#">sub3</a>          </li>        </ul>        </li>      <li><a href="#">booking</a>      </li>      <li><a href="#">history</a>        <ul>          <li><a href="#">sub1</a>          </li>          <li><a href="#">sub2</a>          </li>          <li><a href="#">sub3</a>            <ul>              <li><a href="#">sub1</a>              </li>              <li><a href="#">sub2</a>              </li>              <li><a href="#">sub3</a>              </li>            </ul>          </li>        </ul>      </li>      <li><a href="#">wrestlers</a>      </li>      <li><a href="#">events</a>       </li>    </ul>    </div>

image attached

try css. set width of each of menu options 220px instead of 20%.

.menu ul {  list-style: none;  padding-left:0px; } .menu ul li {   width: 20%;   height: 35px;   float: left;   text-align: center;   background-color: red;   position: relative;   list-style-type: none;   line-height: 35px; } .menu ul li {  text-decoration: none;  color: white;  display: block; } .menu ul li a:hover {   background-color: green; } .menu ul ul {   position: absolute;   display: none; } .menu ul li:hover > ul {   display: block; } .menu ul ul ul {   margin-left:100%;   top: 0px; }  .menu > ul > li > ul {   width:100%; } .menu > ul > li > ul> li {  display: block;  width:100%; } .menu > ul > li > ul> li > ul {   width:100%; } .menu > ul > li > ul> li > ul > li{  display: block;  width:100%; } 

hope helps :)


Comments

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

matplotlib support failed in PyCharm on OSX -

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -