با سلام خدمت استاد گرامی و دوستان عزیز
در حین ساخت منو به یک مشکل برخورد کردم که هرکاری میکنم رفع نمیشه!
با اینکه 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;
}