Я хотел бы создать раскрывающееся меню из раздела профиля на панели навигации. Как мне это сделать? Я пытался найти его, но я не нашел ни одного хорошего решения, которое соответствовало бы моим идеям. (Я бы хотел, чтобы это раскрывающееся меню содержало 2 элемента.)
*{
text-decoration: none;
background-color: #141424;
color: #787884;
margin: 0;
padding: 0;
}
.avatar{
vertical-align: middle;
}
ul li {
padding: 30px 40px;
font-size: 2rem;
list-style-type: none;
display: inline-block;
font-family: sans-serif;
}
ul li a{
font-family: "Magic Mushroom";
}
a:hover{
color: white;
}
ul li:hover a{
background-color: #454552;
}
ul li:hover{
background-color: #454552;
}
ul li a img{
border-radius: 50%;
}
.nav{
text-align: center;
border-bottom: 3px solid #787884;
}
.active{
color: white;
}<div class = "nav">
<ul>
<li><a href = "index.php">Main page</a></li>
<li><a href = "servers.php">Servers</a></li>
<li><a href = "rules.php">Rules</a></li>
<li><a href = "vip.php">VIP</a></li>
<li><a href = "contact.php">Contact</a></li>
<li><a href = "profile.php">Profile</a></li>
</ul>
</div>🤔 А знаете ли вы, что...
PHP поддерживает многопоточность и многозадачность.
не так уж и стильно, но как обычные, которые вы видите на других сайтах также не забудьте запустить его в своем браузере попробуй сделать его отзывчивым вы используете «px», что не является хорошей идеей для объявления мер попробуйте использовать "vh" для высоты и "vw" для ширины
*{
text-decoration: none;
background-color: #141424;
color: #787884;
margin: 0;
padding: 0;
}
.avatar{
vertical-align: middle;
}
ul li {
padding: 30px 40px;
font-size: 2rem;
list-style-type: none;
display: inline-block;
font-family: sans-serif;
}
ul li a{
font-family: "Magic Mushroom";
}
a:hover{
color: white;
}
ul li:hover a{
background-color: #454552;
}
ul li:hover{
background-color: #454552;
}
ul li a img{
border-radius: 50%;
}
.nav{
text-align: center;
border-bottom: 3px solid #787884;
}
.active{
color: white;
}
.dropdown {
position: absolute;
height: 0;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
width: 40vw;
top: 120px;
display: flex;
z-index: -1;
flex-direction: column;
right: 10%;
background-color: #454552;
}
.profile:hover .dropdown{
height: 10vh;
opacity: 1;
pointer-events: all;
top: 100px;
z-index: 1;
}<html lang = "hu">
<head>
<meta charset = "UTF-8">
<meta name = "author" content = "Farkas">
<title></title>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div class = "nav">
<ul>
<li><a href = "index.php">Main page</a></li>
<li><a href = "servers.php">Servers</a></li>
<li><a href = "rules.php">Rules</a></li>
<li><a href = "vip.php">VIP</a></li>
<li><a href = "contact.php">Contact</a></li>
<li class = "profile"><a href = "profile.php">Profile</a>
<ul class = "dropdown">
<li>item1</li>
<li>item2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>