Question

我很想知道，但是我花了很多时间试图找到一种方法让li从ul伸出来，但我似乎无法做到。它与This website和This website的nav栏非常相似。我在问是否有人可以帮助我。谢谢。我能提供的最好的是基本的导航悬停栏

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

也许你正在寻找的东西

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>

如何让ul宽度的拉伸整个屏幕

1 个答案: