💻 آخرین فرصت یادگیری برنامه‌نویسی با آفر ویژه قبل از افزایش قیمت در ۱۵ آذر ماه (🎁 به همراه یک هدیه ارزشمند )
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ سپهر صحرائیان
عمل نکردن text-decoration: none
علی قربان زاده حل شده توسط علی قربان زاده

با سلام خدمت استاد گرامی و دوستان عزیز

در حین ساخت منو به یک مشکل برخورد کردم که هرکاری میکنم رفع نمیشه!

با اینکه text-decoration رو معادل none قرار دادم ولی کنار آیتم‌های زیر منو دایره نمایش داده میشود.

کد‌های html و css رو پایین قرار میدم خیلی ممنون میشم اگر راهنمایی کنید.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>7Learn-project</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="menu">
      <ul class="list">
        <li class="list-item">
          <a href="#">Hosting<i class="material-icons">expand_more</i></a>
          <ul class="submenu-1">
            <li class="submenu-item-1">
              <a href="">
                <h3>Shared Web Hosting</h3>
                <p>For small to medium websites</p>
              </a>
            </li>
            <li class="submenu-item-1">
              <a href="">
                <h3>Cloud Hosting</h3>
                <p>For large scale project</p>
              </a>
            </li>
            <li class="submenu-item-1">
              <a href="">
                <h3>Email Hosting</h3>
                <p>Promote your business every outreach</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="list-item">
          <a href="#">VPS<i class="material-icons">expand_more</i></a>
        </li>
        <li class="list-item">
          <a href="#">Domain<i class="material-icons">expand_more</i></a>
        </li>
      </ul>
    </nav>
  </body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
* {
  font-family: "Noto Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-size: 18px;
}
.menu {
  height: 50px;
  background-color: darkgrey;
}
.list {
  height: 100%;
}
.list-item {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  margin: 11px 9px 0 9px;
  position: relative;
}
li.list-item a {
  color: rgb(34, 33, 33);
  height: 50px;
}
.material-icons {
  vertical-align: -6px;
}
.submenu-1 {
  background-color: darkolivegreen;
  position: absolute;
  width:360px;
  height: 320px;
  top: 39px;
  left: 0px;
}
.submenu-item-1{
  text-align: left;
  margin: 9px;
  text-decoration: none;
}

 

سلام سپهر جان 

منوی خفنی طراحی کردی 

با کسب اجازه از استاد و شما در حد خودم پاسخ میدم 

مشکل اینجاست که برای از بین بردن دایره‌ها نباید از text-decoration استفاده کنی و چیزی که باید جایگزینش کنی این پراپرتیه 

*{
list-style-type : none;
}
/* ya be element morede nazar in style ro bede */

خصوصیتی که استفاده کردی(text-decoration) برای متن هستش مثل لینک که یه خط زیرش میذاره(underline) 

 

امیدوارم تونسته باشم مشکلت رو حل کرده باشم , موفق باشی :)

بهترین پاسخ
علی قربان زاده ۲۰ خرداد ۱۳۹۹، ۱۹:۲۱