نشان ندادن زیر منو در زمان hover کردن

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام وقت بخیر

وقتی که روی قسمت مورد نظر hover میکنم زیر منو نمایش داده نمیشه

ممنون میشم راهنمایی کنید اشکال کجاست

درود

باتوجه به دو تصویری که فرستادید نباید مشکلی باشه. امکانش هست پروژه رو در کدپن آپلود کرده یا به صورت زیپ پیوست کنید تا بتونیم بررسی کنیم؟

جواد رحمانیان ۲۵ تیر ۱۴۰۱، ۲۱:۱۶

html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>جلسه دهمtitle>
<link rel="stylesheet" href="style.css">
head>
<body>
            <nav class="nav">
        <ul class="test">
    <li><a class="m" href="">خانهa>li>
    <li class="has-sub-menu"><a class="m" href="">دوره‌های آموزشیa>
        <ul class="sub-menu">
        <li><a href="">طراحی وبa>li>
        <li><a href="">برنامه نویسیa>li>
        <li><a href="">گرافیکa>li>
    ul>li>
    <li><a class="m" href="">درباره ماa>li>
    <li><a class="m" href="">تماس با ماa>li>
    <li><a class="m" href="">پشتیبانیa>li>
    ul>
    nav>
body>

@font-face{
    font-family: vazir-medium;
    src: url(../font/Vazir-Medium.eot) format("et"),
    url(../font/Vazir-Medium.woff) format("woff"),
    url(../font/Vazir-Medium.woff2) format("woff2");
    font-weight: medium;
    font-style: normal;
}
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: vazir-medium
}
ul,ol,li{
    list-style: none;
}
.test li a.m{
list-style: none;
text-decoration: none;
list-style: none;
}
.test li{
    margin: 0 10px;
    display: inline;
}
.nav{
    padding: 10px;
    font-size: 16px;
}
.test li a:hover{
color: red;
background-color: black;
}
.test li a:active{
    color: black;
    background-color: aliceblue;
}
.test li a:visited{
 color: blue;
}
.sub-menu li{
display: block;
text-decoration: none;
}
.has-sub-menu{
    position: relative;
}
.sub-menu{
    position: absolute;
    background-color: aquamarine;
    top: 30px;
    right: -5px;
    white-space: nowrap
}
.sub-menu li a{
    text-decoration: none;
    display: none;
}
li.has-sub-menu:hover ul.sub-menu{
    display: block;
}

رازان قانعی ۲۶ تیر ۱۴۰۱، ۰۸:۵۰

نشد :)

این مدل که میفرستید کلا تگها رو جابجا میکنه و نمیبنده و قابل اجرا نیست.

کل پروژه تون رو زیپ کرده و اینجا پیوست کنید.

جواد رحمانیان ۲۶ تیر ۱۴۰۱، ۰۹:۲۰

متاسفانه فایل زیپ آپلود نمیشه

رازان قانعی ۲۶ تیر ۱۴۰۱، ۱۰:۱۳

چه خطایی میده؟ از دکمه پیوست استفاده کردید؟

جواد رحمانیان ۲۷ تیر ۱۴۰۱، ۰۶:۳۹

بله از پیوست استفاده کردم ولی خب موقع ارسال روی حالت loading میمونه و ارسال نمیشه

رازان قانعی ۲۷ تیر ۱۴۰۱، ۱۱:۰۹

مشکلی نیست در تعطیلات کدتون رو بررسی و اصلاح کردم. منتها از دفعات بعدی کد رو در یک کدپن آپلود کنید و لینکش رو قرار بدید تا بتونیم زودتر بررسی کنیم.

شما در بخش استایل و کلاسهای مربوط به sub menu دچار بی دقتی شدید. اگر کدتون رو به این صورت اصلاح کنید مشکل حل میشه:

این بخش رو کلا حذف کنید:

.sub-menu li a{
    text-decoration: none;
    display: none;
}

و این کلاسها رو به صورت زیر اصلاح فرمایید:

.sub-menu li {
  display: block;
}
.sub-menu {
 min-width: 200px;
 /* min-height: 100px; */
 white-space: nowrap;
  top: 44px;
  right: 13px;
  position: absolute;
  background-color: #efefef;
display: none;
box-shadow: 0 0 4px 0px #c3c3c3;;
}

بهترین پاسخ

جواد رحمانیان ۲۸ تیر ۱۴۰۱، ۰۴:۱۹