Question

我试图通过使用两个div进行下拉，将一个标记为绝对并显示：none我想要每当用户将鼠标悬停在li上时div应该出现但它不工作我使用flexbox，我认为这是问题。请帮忙

p.s我正在使用刀片模板

这是我的代码：

＆＃13;

.row {
  display: flex;
  flex-wrap: wrap;
  /* border: 11px solid green; */
}

.layer {
  flex: 20%;
  /* background-color: #f1f1f1; */
  padding: 10px;
  display: flex;
}

.logo {
  padding-left: 50px;
}

.logo p {
  text-shadow: 2px 2px yellow, 4px 4px yellow, 6px 6px blue;
  font-family: 'Lobster', cursive;
  font-size: 50px;
  color: red;
  margin: 0;
}

.navbar {
  flex: 70%;
  display: flex;
  /* background-color: red; */
  flex-wrap: wrap;
  padding: 20px;
}

.navbar a {
  /* color: white; */
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color: #333; */
  /* font-family: 'Montserrat', sans-serif; */
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
}

li a:hover {
  background-color: #ddd;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: block;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
  border: 1px solid black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<body>
  <div class="main-container" style="position: relative">
    <div class="row">
      <div class="layer">
        <div class="logo">
          <p>Layers</p>
        </div>
      </div>
      <div class="navbar">
        <ul>
          <li><a href="{{url('/')}}">Home</a></li>
          <li>
            <div class="categories dropdown">
              <a>Categories</a>
              <div class="dropdown-content">
                <p>Birthday</p>
                <p>Wedding</p>
                <p>Party</p>
                <p>All</p>
              </div>
            </div>
          </li>
          <li><a href="{{url('/about')}}">About</a></li>
          <li><a href="/cart">My Cart</a></li>
          <li>
            @if($name=="default")
            <a href="{{ url('/sign-in') }}">SIGN IN</a> @else
            <div class="dropdown">
              <a>{{ $name }}</a>
              <div class="dropdown-content">
                <a href="{{ url('/logout') }}">sign-out</a>
              </div>
            </div>
            @endif
          </li>
        </ul>
      </div>
    </div>

＆＃13;

flexbox中的下拉列表无法正常工作

0 个答案: