سلام امیدوارم حالتون خوب باشه من میخوام یه منو درست کنم و برای یکی از اون گذینه های منو میخوام زیر منو بزنم و قصد دارم وقتی روی اون گذینه hover شد زیر منو هاش به درستی نمایش داده بشه
مثلا یکی از گذینه های منوی من محصولات هست که میخوام وقتی روش hover شد سه تا زیر منوی موتور سیکلت وسایل صنعتی و خودرو رو بهم نشون بده اگه میشه کمک کنید ممنون
سلام
فرض کنید این منوی شما باشه:
<nav>
<div class="dropdown">
<span>فروشگاه</span>
<ul id="dropdown-content">
<li>خودرو</li>
<li>موتور سیکلت</li>
</ul>
</div>
</nav>
ابتدا یک nav گذاشتیم که قراره کل منوی ما و آیتمهای دیگری که شما میخواهید داخل منویتان قرار بگیرد آنجا باشد.
بعد از آن یکی از آیتمهای آن که فرمودید فروشگاه هستش رو به حالتی که اول یک div اصلی باشد و بعد داخل span متن «فروشگاه» قرار بیگرد. داخل همان div و بعد از span یک تگ ul تعریف میکنیم تا به قول شما زیر منوهایمان را آنجا قرار بدهیم.
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
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;
}
.dropdown:hover .dropdown-content {
display: block;
}
این هم کد css. طبیعتا در ابتدا باید به dropdown استایل مد نظر خودمون رو بدیم. در ادامه dropdown-content استایل بهش میدیم و display اش هم برابر none میکنیم. حالا قراره هر وقت کاربر روی dropdown ما موسش رو آورد display عنصر dropdown-content رو باید برابر block کنیم تا نمایش داده بشه
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟