Я пытаюсь сделать раскрывающийся список, используя два элемента div, помечая один как абсолютный и отображая: ничего, что я хочу, когда пользователь наводит курсор мыши на элемент li, который должен отображаться
но это не работает, я использую flexbox, и я думаю, что это проблема.
пожалуйста помогите
p.s Я использую шаблоны лезвий
Вот мой фрагмент:
.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;
}
<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>