下拉子菜单和要点 alignment

Question

I am trying to create a sub menu option for my website but do not how to.我正在尝试为我的网站创建一个子菜单选项，但不知道如何创建。 From the references I found online I was able to create a horizontal menu but I want to create a sub menu option for the side menu.根据我在网上找到的参考资料，我能够创建一个水平菜单，但我想为侧边菜单创建一个子菜单选项。

https://www.w3schools.com/howto/howto_css_subnav.asp https://www.w3schools.com/howto/howto_css_subnav.asp

I am also having problems with the custom bullet list alignment. The arrow is not in the middle of my text.我也有自定义项目符号列表 alignment 的问题。箭头不在我的文本中间。

My code link:我的代码链接：

https://codepen.io/arielkoh/details/QWxPREr https://codepen.io/arielkoh/details/QWxPREr

Bullet Code子弹代码

 ul li {
      color: rgb(12, 179, 220);
      position: relative;
      top: 0px;
    }

    ul li:before {
      content: "\21B3";
      position: absolute;
      top: 0px;
    }

    ul {
      list-style: none;
    }

What I tried to do for my sub menu but I am unsure if I doing the right thing.我试图为我的子菜单做些什么，但我不确定我做的是否正确。

Navigation Code导航代码

<!-- Top Navigation Menu -->
    <div class="topnav">
      <a href="#home" class="active">Ubiquitous Nuisance</a>

      <div id="myLinks">
        <a href="#">07 Prototyping</a>

        <a href="#">06 Experiments</a>

        <a href="#">05 Soundwalks</a>

        <a href="#">04 Class Sessions</a>

        <a href="#">03 Case Studies</a>

        <a href="#">02 Research Topic</a>
        <ul>
          <li><a href="service-grid.html">Old Research Topic</a></li>
          <li><a href="service-list.html">Ubiquitous Nuisance</a></li>
        </ul>

        <a href="#about">01 Readers</a>
      </div>

Full Code完整代码

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    .topnav {
      overflow: hidden;
      position: relative;
    }

    .topnav #myLinks {
      display: none;
      background-color: rgba(212, 219, 206, 50);
      max-width: 500px;
      margin-left: 200px;
    }

    .topnav a {
      color: coral;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
      display: block;
    }

    .topnav a.icon {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
    }

    .topnav a:hover {
      color: black;
    }

    ul li {
      color: rgb(12, 179, 220);
      position: relative;
      top: 0px;
    }

    ul li:before {
      content: "\21B3";
      position: absolute;
      top: 0px;
    }

    ul {
      list-style: none;
    }
  </style>
</head>

<body>

  <!-- Simulate a smartphone / tablet -->
  <div class="mobile-container">

    <!-- Top Navigation Menu -->
    <div class="topnav">
      <a href="#home" class="active">Ubiquitous Nuisance</a>

      <div id="myLinks">
        <a href="#">07 Prototyping</a>

        <a href="#">06 Experiments</a>

        <a href="#">05 Soundwalks</a>

        <a href="#">04 Class Sessions</a>

        <a href="#">03 Case Studies</a>

        <a href="#">02 Research Topic</a>
        <ul>
          <li><a href="service-grid.html">Old Research Topic</a></li>
          <li><a href="service-list.html">Ubiquitous Nuisance</a></li>
        </ul>

        <a href="#about">01 Readers</a>
      </div>

      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </div>
    <!-- End smartphone / tablet look -->
  </div>

  <script>
    function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
  </script>

</body>

</html>

Answer 1

Replace this part更换这部分

ul li {
color: rgb(12, 179, 220);
position: relative;
/* top: 0px; */
padding: 20px 0;
box-sizing: border-box;
}

ul li::before {
    content: "\21B3";
    position: absolute;
    /* top: 0px; */
}

li a {
  padding: 0 15px;
}

下拉子菜单和要点 alignment

问题描述

1 个解决方案

解决方案1
0 2022-12-11 09:54:02

下拉子菜单和要点 alignment

问题描述

1 个解决方案

解决方案1 0 2022-12-11 09:54:02

解决方案1
0 2022-12-11 09:54:02