مشکل فاصله بین ایتم‌های منو - مشکل background-color هنگام اعمال کردن border-radius به منو

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

با سلام اشتباه من در این بخش چیه ؟ یکی فاصله بین ایتم‌های منو ( چسبیده به هم نیستن و فاصله بین شون هست و ایکه مثلا بخش دوره‌های آموزشی چسبیده نیست به اول منو) و یکی دیگه مشکل بک گراند کالر موقع اضافه کردن border-radius.
با تشکر

سلام. وقتتون بخیر

لطفا کدهای پروژتون رو بفرستید

سحر پاشائی ۱۶ اردیبهشت ۱۴۰۴، ۰۳:۱۰

<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Vazir;
        font-size: 18px;
      }
      .nav {
        background-color: #ccdfe7;
        padding: 14px 16px;
        margin: 5px;
        border-radius: 10px;
      }
      .nav ul {
        padding: 0;
        margin: 0;
      }
      .nav ul li {
        display: inline;
      }
      li a {
        text-decoration: none;
        color: #000;
        padding: 14px 16px;
      }
      li a:hover {
        color: #64acf3;
      }
      .sign-up {
        float: left;
      }
      .sign-up a {
        background-color: #0984e3;
      }
      .dropdown {
        position: relative;
      }
      .dropdown-content {
        position: absolute;
        background-color: #fcfcfc;
        min-width: 200px;
        white-space: nowrap;
        height: auto;
        left: -23px;
        top: 41px;
        display: none;
        box-shadow: 0px 1px 2px 0px;
      }
      .dropdown-content li a {
        display: block;
      }
      li.dropdown:hover ul.dropdown-content {
        display: block;
      }
    </style>
  </head>
  <body>
    <nav class="nav">
      <ul>
        <li class="dropdown">
          <a href="#">دوره‌های آموزشی</a>
          <ul class="dropdown-content">
            <li><a href="#">آموزش طراحی وب</a></li>
            <li><a href="#">آموزش جاوا اسکریپت</a></li>
            <li><a href="#">آموزش پایتون</a></li>
            <li><a href="#">آموزش فلاتر</a></li>
          </ul>
        </li>
        <li><a href="#">جامعه ها</a></li>
        <li><a href="#">شروع یادگیری برنامه نویسی</a></li>
        <li class="sign-up"><a href="#">ورود/عضویت</a></li>
      </ul>
    </nav>
  </body>
</html>

Hossein.7 ۱۶ اردیبهشت ۱۴۰۴، ۰۵:۳۸

overflow: hidden; کردم و padding‌ها رو حذف کردم درست شد ولی زیر منو بالا نمیاد در این صورت ، توی یه پروژه جدا از اول دوباره انجام دادم درست بود ، نمیدونم مشکل چیه دقیقا

Hossein.7 ۱۶ اردیبهشت ۱۴۰۴، ۰۸:۰۰