عمل نکردن text-decoration: none

Question

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

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

با اینکه 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;
}

طراحی وب

سپهر صحرائیان

20 خرداد 99

Answer 1

حذف شده

سلام سپهر جان

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

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

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

*{
list-style-type : none;
}

/* ya be element morede nazar in style ro bede */

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

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

توسط

علی قربان زاده

20 خرداد 99

حذف شده

سلام خیلی متشکرم، دقیقا همینطوره که فرمودید. property مورد نظر جز در مطالبی که استاد تدریس کرده بودند هم وجود داشته که من بی دقتی کردم :/

سپهر صحرائیان

20 خرداد 99

عمل نکردن text-decoration: none

سوالات مرتبط