存在我没有制造的痣

Question

我留下一个问题，因为我在编码时看到了一个奇怪的文字（痣）。

在为导航菜单和子菜单编写代码时出现上述问题。 如果你看导航菜单的店铺部分，有一颗痣，想请你帮我看看是哪部分代码造成了痣。

而且由于子菜单的矩形位置偏右，应该修改哪部分代码使上菜单和中间对齐，如下图所示？

谢谢你，提前！

$(window).load(function() {
  $(document).ready(function() {
    var a = 3;
    $('.random').draggable({
      start: function(event, ui) {
        $(this).css("z-index", a++);
      }
    });
    $('body div').click(function() {
      $(this).addClass('top').removeClass('bottom');
      $(this).siblings().removeClass('top').addClass('bottom');
      $(this).css("z-index", a++);

    });
  });
});

const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");

btn.addEventListener("click", () => {
  Array.from(boxes).forEach(box => {
    const top = Math.floor(Math.random() * (height - 30) + 1) + "px";
    const right = Math.floor(Math.random() * (width - 30) + 1) + "px";

    box.style.top = top;
    box.style.right = right;
  })
});

function showhide() {
  var x = document.querySelectorAll(".random");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}

//draggable

function mouseDown(downEvent) {
  var box = downEvent.srcElement;
  var offX = box.getBoundingClientRect().left - downEvent.x;
  var offY = box.getBoundingClientRect().top - downEvent.y;
  document.onmousemove = e => {
    box.style.top = Math.min(Math.max(e.y + offY, 0), height) + "px";
    box.style.left = Math.min(Math.max(e.x + offX, 0), width) + "px";
  }
  document.onmouseup = e => {
    document.onmousemove = document.onmouseup = null;
  }
  return false;
}

Array.from(boxes).forEach(box => {
  box.onmousedown = mouseDown;
})


//호버 혹은 클릭 시, div 컬러 변화

$(".music").hover(
  function() {
    $(this).addClass("hover");
  },
  function() {
    $(this).removeClass("hover");
  }
);

$(".music").click(function() {
  $('#result').load('album_list_index.php');
  $(".music").removeClass("active");
  $(this).removeClass("hover").addClass("active");
});

body {
  margin: 0px;
}

button {
  position: relative;
  width: 30px;
  height: 30px;
  background: #edd6bc;
  border: none;
}

.random {
  position: absolute;
  width: 30px;
  height: 30px;
  cursor: move;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

header {
  display: grid;
  grid-template-columns: 1fr 7fr;
  grid-template-rows: 1fr 1.2fr;
  grid-template-areas: "logo nav" "logo notice";
}

.logo {
  border: 1px solid black;
  grid-area: logo;
}

nav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-area: nav;
}

.notice {
  grid-area: notice;
  border: 1px solid black;
  padding: 10px;
  margin-top: -1px;
  margin-left: -1px;
}

nav a {
  padding: 37px;
  text-align: center;
}

nav a:nth-child(n+2) {
  margin-left: -1px;
}

li {
  margin-bottom: ;
  padding: 37px;
  text-align: center;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
  transition: all 0.2s;
}

nav li>ul {
  display: none;
  background-color: #bbb;
}

nav li>ul li {
  display: block;
}

nav li>ul li a {
  color: #111;
  display: block;
  line-height: 2em;
  padding: 0.5em 2em;
  text-decoration: none;
}

nav li:hover {
  background-color: ;
}

nav li:hover>ul {
  position: absolute;
  display: block;
}

main {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

main>div {
  padding: 10px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
}

.active {
  background: #edd6bc
}

.hover {
  background: #edd6bc
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<div class="container">
  <header>

    <div class="logo" style="display: flex;">
      <img style="width: 70%; margin: auto;" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg">
    </div>

    <nav>

      <a href="#" style="margin-left: -1px; border: 1px solid black;" class="music">About</a>

      <a href="#" style="border: 1px solid black;" class="music">Exibition</a>

      <li style="border: 1px solid black; margin-left: -1px;" class="music">
        <a href="#">Shop</a>
        <ul>
          <li a href="#">리플랫</li>
          <li a href="#">작품</li>
          <li a href="#">MD</li>
        </ul>
      </li>


      <a></a>

      <a></a>

      <div style="display: flex; border: 1px solid black;">
        <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button"></button></div>

      <a href="#" style="border: 1px solid black;" class="music">En</a>

    </nav>

    <div class="notice">( Current Exhibition | 2021.06.11-07.03 ) 젤다 킨
      <미끈한 반쪽> 전</div>

  </header>


  <div style="display: none; background: #6d97b4;" class="random"></div>

  <div style="display: none; background: #c9656f;" class="random"></div>

  <div style="display: none; background: #f1eb40;" class="random"></div>

  <div style="display: none; background: #00825c;" class="random"></div>

  <div style="display: none; background: #009ce0;" class="random"></div>

  <div style="display: none; background: #cee4a6;" class="random"></div>



</div>

Answer 1

如果您想从商店链接中删除点，您可以定义list-style: none，或者您可以省略外部<li>，这样会更好，因为它周围没有像<ul> 这样的列表：

li.music {
  list-style: none;
}

工作示例：

$(window).load(function() {
  $(document).ready(function() {
    var a = 3;
    $('.random').draggable({
      start: function(event, ui) {
        $(this).css("z-index", a++);
      }
    });
    $('body div').click(function() {
      $(this).addClass('top').removeClass('bottom');
      $(this).siblings().removeClass('top').addClass('bottom');
      $(this).css("z-index", a++);

    });
  });
});

const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const boxes = document.querySelectorAll(".random");

btn.addEventListener("click", () => {
  Array.from(boxes).forEach(box => {
    const top = Math.floor(Math.random() * (height - 30) + 1) + "px";
    const right = Math.floor(Math.random() * (width - 30) + 1) + "px";

    box.style.top = top;
    box.style.right = right;
  })
});

function showhide() {
  var x = document.querySelectorAll(".random");
  var i;
  for (i = 0; i < x.length; i++) {
    if (x[i].style.display === "block") {
      x[i].style.display = "none";
    } else {
      x[i].style.display =
        "block";
    }
  }
}

//draggable

function mouseDown(downEvent) {
  var box = downEvent.srcElement;
  var offX = box.getBoundingClientRect().left - downEvent.x;
  var offY = box.getBoundingClientRect().top - downEvent.y;
  document.onmousemove = e => {
    box.style.top = Math.min(Math.max(e.y + offY, 0), height) + "px";
    box.style.left = Math.min(Math.max(e.x + offX, 0), width) + "px";
  }
  document.onmouseup = e => {
    document.onmousemove = document.onmouseup = null;
  }
  return false;
}

Array.from(boxes).forEach(box => {
  box.onmousedown = mouseDown;
})


//호버 혹은 클릭 시, div 컬러 변화

$(".music").hover(
  function() {
    $(this).addClass("hover");
  },
  function() {
    $(this).removeClass("hover");
  }
);

$(".music").click(function() {
  $('#result').load('album_list_index.php');
  $(".music").removeClass("active");
  $(this).removeClass("hover").addClass("active");
});

body {
  margin: 0px;
}

button {
  position: relative;
  width: 30px;
  height: 30px;
  background: #edd6bc;
  border: none;
}

.random {
  position: absolute;
  width: 30px;
  height: 30px;
  cursor: move;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

header {
  display: grid;
  grid-template-columns: 1fr 7fr;
  grid-template-rows: 1fr 1.2fr;
  grid-template-areas: "logo nav" "logo notice";
}

.logo {
  border: 1px solid black;
  grid-area: logo;
}

nav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-area: nav;
}

.notice {
  grid-area: notice;
  border: 1px solid black;
  padding: 10px;
  margin-top: -1px;
  margin-left: -1px;
}

nav a {
  padding: 37px;
  text-align: center;
}

nav a:nth-child(n+2) {
  margin-left: -1px;
}

li {
  margin-bottom: ;
  padding: 37px;
  text-align: center;
}

li.music, 
nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  list-style-type: none;
  transition: all 0.2s;
}

nav li>ul {
  display: none;
  background-color: #bbb;
}

nav li>ul li {
  display: block;
}

nav li>ul li a {
  color: #111;
  display: block;
  line-height: 2em;
  padding: 0.5em 2em;
  text-decoration: none;
}

nav li:hover {
  background-color: ;
}

nav li:hover>ul {
  position: absolute;
  display: block;
}

main {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

main>div {
  padding: 10px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
}

.active {
  background: #edd6bc
}

.hover {
  background: #edd6bc
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<div class="container">
  <header>

    <div class="logo" style="display: flex;">
      <img style="width: 70%; margin: auto;" src="https://cdn.imweb.me/upload/S202106158a019d8d01cb9/2b23eb2d2e178.jpg">
    </div>

    <nav>

      <a href="#" style="margin-left: -1px; border: 1px solid black;" class="music">About</a>

      <a href="#" style="border: 1px solid black;" class="music">Exibition</a>

      <li style="border: 1px solid black; margin-left: -1px;" class="music">
        <a href="#">Shop</a>
        <ul>
          <li a href="#">리플랫</li>
          <li a href="#">작품</li>
          <li a href="#">MD</li>
        </ul>
      </li>


      <a></a>

      <a></a>

      <div style="display: flex; border: 1px solid black;">
        <button style="margin: auto;" onclick="showhide()" value="Zeige Features" id="button"></button></div>

      <a href="#" style="border: 1px solid black;" class="music">En</a>

    </nav>

    <div class="notice">( Current Exhibition | 2021.06.11-07.03 ) 젤다 킨
      <미끈한 반쪽> 전</div>

  </header>


  <div style="display: none; background: #6d97b4;" class="random"></div>

  <div style="display: none; background: #c9656f;" class="random"></div>

  <div style="display: none; background: #f1eb40;" class="random"></div>

  <div style="display: none; background: #00825c;" class="random"></div>

  <div style="display: none; background: #009ce0;" class="random"></div>

  <div style="display: none; background: #cee4a6;" class="random"></div>



</div>