下拉菜单太大

Question

您好，我正在尝试通过单击按钮来执行下拉菜单，但它的元素太大了，我做错了什么？我真的很想发疯，你能帮我学习这门编码艺术吗？它没有任何问题只是它丑陋编辑：我已经更新并发布了完整的 css 代码，看看你们是否可以帮助我

         html {
        background: #e6e9e9;
        background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
        -webkit-font-smoothing: antialiased;
    }

    body {
        background: #fff;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
        color: #545454;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 7.5;
        margin: 0 auto;
        padding: 2em 2em 4em;
    }

    .button {
      background-color: #4a7bb5;
      border: none;
      color: white;
      padding: 5px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-family: cute;
      font-size: 32px;
    }
    .button:hover{
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
     background-color: #4a7bb5;
      border: none;
      color: white;
      padding: 5px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-family: cute;
      font-size: 32px;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #ddd;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown:hover .dropbtn {background-color: #3e8e41;}






    p {
        font-size: 20px;
        font-weight: 500;
        color: #52d6ff;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #237543;
        font-weight: 600;
        line-height: 0;
        font-size: 50px;

    }
    hr { display: block; height: 1px;
        border: 1; border-top: 1px solid #ccc;
        margin: 1em 0; padding: 0; }

    h2 {
        margin-top: 1.3em;
    }

    a {
        color: #0083e8;
    }

    b, strong {
        font-weight: 600;
    }

    samp {
        display: none;
    }

    img {

        background: transparent;

    }

    @keyframes colorize {
        0% {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        100% {
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
        }
    }
    @font-face {
      font-family:cute;
      src: url(cute.ttf);
    }
    @font-face {
      font-family:opensans;
      src: url(opensans.ttf);
    }

 <HR size=2 style="color: aqua"></HR>
    <button class="button" onclick="mainpage();">Main Page</button>
    <div class="dropdown">
    <button class="button">Art</button>
    <div class="dropdown-content">
    <a href="#">Acrilic</a>
    <a href="#">Carvão</a>
    <a href="#">Paint</a>
    </div>
    </div>

Answer 1

您的 <body> 具有 line-height: 7.5 样式，该样式将被下拉菜单的锚标记继承。

要么删除此样式，要么在 <body> 和 .dropdown-content a 元素之间的某个位置重新设置它。例如：

.dropdown {
    ...
    line-height: normal;
}

html {
        background: #e6e9e9;
        background-image: linear-gradient(270deg, rgb(230, 233, 233) 0%, rgb(216, 221, 221) 100%);
        -webkit-font-smoothing: antialiased;
    }

    body {
        background: #fff;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
        color: #545454;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 7.5;
        margin: 0 auto;
        padding: 2em 2em 4em;
    }

    .button {
      background-color: #4a7bb5;
      border: none;
      color: white;
      padding: 5px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-family: cute;
      font-size: 32px;
    }
    .button:hover{
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
     background-color: #4a7bb5;
      border: none;
      color: white;
      padding: 5px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-family: cute;
      font-size: 32px;
    }
    .dropdown {
      position: relative;
      display: inline-block;
      line-height: normal;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #ddd;}

    .dropdown:hover .dropdown-content {display: block;}

    .dropdown:hover .dropbtn {background-color: #3e8e41;}






    p {
        font-size: 20px;
        font-weight: 500;
        color: #52d6ff;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #237543;
        font-weight: 600;
        line-height: 0;
        font-size: 50px;

    }
    hr { display: block; height: 1px;
        border: 1; border-top: 1px solid #ccc;
        margin: 1em 0; padding: 0; }

    h2 {
        margin-top: 1.3em;
    }

    a {
        color: #0083e8;
    }

    b, strong {
        font-weight: 600;
    }

    samp {
        display: none;
    }

    img {

        background: transparent;

    }

    @keyframes colorize {
        0% {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        100% {
            -webkit-filter: grayscale(0%);
            filter: grayscale(0%);
        }
    }
    @font-face {
      font-family:cute;
      src: url(cute.ttf);
    }
    @font-face {
      font-family:opensans;
      src: url(opensans.ttf);
    }

<HR size=2 style="color: aqua"></HR>
    <button class="button" onclick="mainpage();">Main Page</button>
    <div class="dropdown">
    <button class="button">Art</button>
    <div class="dropdown-content">
    <a href="#">Acrilic</a>
    <a href="#">Carvão</a>
    <a href="#">Paint</a>
    </div>
    </div>

下拉菜单太大

Dropdown menu is to big

html

css

dropdown