CODEWITHSUNDEEP
htmlcss
Sang Nguyen
Sang Nguyen

Reputation: 167

how to make li of ul width stretch the whole screen

I was wondering but I have been spending a lot of time trying to find a way to make my li from my ul stretch across but I seem not to be able to do it. It's very similar to the nav bar of This website and This website.I am asking if someone can help me with this. Thank you. Best I can provide is a basic nav hover bar

.dropdown-btn {
  width: 100%;
  height: 50px;
  background: white;
  line-height: 50px;
  display: none;
}

nav {
  width: 100%;
  height: 50px;
  background-color: #d60d8c;
  margin-bottom: 1px;
  position: sticky;
  top: 0;
  padding: 0px 0px;
  border: none;
}

ul {
  text-indent: 0px;
}

nav:hover {
  height: 50px;
}

.navbar-tab {
  display: block;
}

.hover-list {
  position: absolute;
}

.navbar-tab-1 {
  background: #d60d8c;
  float: left;
  border: none;
}

.navbar-tab-1+.navbar-tab-1 {
  border-bottom: none;
}

.hover-list {
  border-top: black 3px solid;
}

.navbar-tab {
  padding-left: 20px;
  display: block;
}

.navbar-tab {
  max-width: 1240px;
}

.navbar-tab-1 {
  padding-right: 68px;
  width: auto;
}

.hover-list li {
  background-color: #e2e2e2;
  border-bottom: 1px white solid;
  font-size: 15px;
  text-indent: 20px;
  height: 35px;
  line-height: 35px;
  width: 100vw;
  border-top: none;
  float: left;
}

ul li ul li {
  display: block;
}

ul li {
  font-size: 19px;
}

ul {

  

 padding: 0px;
   list-style: none;
   font-family: arial;
	margin: auto;


    }

      .navbar-tab-1:hover {
	color: black;
	transition-duration: .2s;
    }

    ul li {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    line-height: 50px;
    list-style: none;
    }


    ul li a {
    text-decoration: none;
     color: black;
    }


    ul li ul li{
     display: none;
     transition-duration: 
    }




    .hover-list li:hover{
	background-color: #f5f5f0;
	transition-duration: .2s;
}
<nav id="navbar">
  <div class="dropdown-btn">Go To...</div>
  <ul class="navbar-tab">
    <li class="navbar-tab-1 selected"><a href="#">Test1</a></li>
    <li class="navbar-tab-1 select">
      <a href="#">Test2</a>
      <ul class="hover-list select">
          <li><a href="#">Item1</a></li>
      </ul>
    </li>
  </ul>
</nav>

Upvotes: 0

Views: 1156

Answers (1)

Tan Duong
Tan Duong

Reputation: 2142

Maybe something you are looking for

body {
  margin:0;
}

.dropdown-btn {
  width: 100%;
  height: 50px;
  background: white;
  line-height: 50px;
  display: none;
}

nav {
  width: 100%;
  height: 50px;
  background-color: #d60d8c;
  margin-bottom: 1px;
  position: sticky;
  top: 0;
  padding: 0px 0px;
  border: none;
}

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

nav:hover {
  height: 50px;
}

.navbar-tab {
  display: block;
}

.hover-list {
  position: fixed;
  max-height: 0;
  transition: max-height 1s;
  padding: 0;
  width: 100vw;
  overflow: hidden;
  left: 0;
  top: 66px;
}

.hover-list > li {
  width: 100%;
}

.navbar-tab-1 {
  background: #d60d8c;
  float: left;
  border: none;
}

.navbar-tab-1+.navbar-tab-1 {
  border-bottom: none;
}

.navbar-tab {
  padding-left: 20px;
  display: block;
}

.navbar-tab {
  max-width: 1240px;
}

.navbar-tab-1 {
  padding-right: 68px;
  width: auto;
}

.hover-list li {
  background-color: #e2e2e2;
  border-bottom: 1px white solid;
  font-size: 15px;
  text-indent: 20px;
  height: 35px;
  line-height: 35px;
  border-top: none;
  float: left;
}

ul li ul li {
  display: block;
}

ul li {
  font-size: 19px;
}

ul > li:hover ul {
  max-height: 500px;
}
<nav id="navbar">
  <div class="dropdown-btn">Go To...</div>
  <ul class="navbar-tab">
    <li class="navbar-tab-1 selected">Test1</li>
    <li class="navbar-tab-1 select">Test2
      <ul class="hover-list select">
          <li><a>Item1</a></li>
      </ul>
    </li>
  </ul>
</nav>

Upvotes: 1

Related Questions