نشان ندادن زیر منو در زمان 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;;
}

بهترین پاسخ

نازنین کریمی مقدم ۲۸ تیر ۱۴۰۱، ۰۴:۱۹