Why does a black dot appear next to each item in the navigation menu?

January 31, 2022

The following code generates a dropdown list in a horizontal menu with scrolling. In functional terms it is perfect, however there is a dot that appears next to each element and I have not been able to identify why it appears.

I’m not very familiar with html or css, just the basics so I’m not sure where the error could be.

I would appreciate any advice or guidance to solve the problem.

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('li.parent').on('mouseover', function() {
    var $menuItem = $(this),
      $submenuWrapper = $('> .wrapper', $menuItem);

    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();

    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      bottom: menuItemPos.bottom,
      left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0),
    });
  });
});

.wrapper {
  position: relative;
}

.principal {
  display: flex;
  overflow-x: auto;
  background-color: white;
}

.dropdown__content {
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
}

.dropdown__content a {
  color: black;
  text-decoration: none;
  display: block;
}

.botones {
  background-color: white;
  border: none;
  color: #0b2971;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 15px;
  width: 200px;
}

li {
  position: static;
}

li .wrapper {
  position: absolute;
  z-index: 10;
  display: none;
}

.botones:hover {
  background-color: #0b2971;
  color: white;
  border-radius: 12px;
}

li:hover>.wrapper {
  display: block;
}

.dropbtn {
  background-color: white;
  color: #0b2971;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  height: 50px;
}

a:hover {
  font-weight: bolder;
}


/* width */

::-webkit-scrollbar {
  height: 6px;
}


/* Track */

::-webkit-scrollbar-track {
  background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
  background: #888;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <!--div class="wrapper"-->
  <ul class="principal">

    <div style="float:left;">
      <a href="https://www.elespectador.com/">
        <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fpurepng.com%2Fpublic%2Fuploads%2Flarge%2Fpurepng.com-ibm-logologobrand-logoiconslogos-251519939176ka7y8.png&f=1&nofb=1" height="40">
      </a>
    </div>

    <li class="parent">
      <button class="botones">Dropdown 1</button>
      <div class="wrapper">
        <ul class="dropdown__content">
          <a href="https://www.elespectador.com/">Link 1</a>
          <a href="https://www.economist.com/">Link 2</a>
          <a href="https://www.nytimes.com/">Link 3</a>
        </ul>
      </div>
    </li>

    <li class="parent">
      <button class="botones">Dropdown 2</button>
      <div class="wrapper">
        <ul class="dropdown__content">
          <a href="https://www.elespectador.com/">Link 1</a>
          <a href="https://www.economist.com/">Link 2</a>
          <a href="https://www.nytimes.com/">Link 3</a>
        </ul>
      </div>
    </li>

    <li class="parent">
      <button class="botones">Dropdown 3</button>
      <div class="wrapper">
        <ul class="dropdown__content">
          <a href="https://www.elespectador.com/">Link 1</a>
          <a href="https://www.economist.com/">Link 2</a>
          <a href="https://www.nytimes.com/">Link 3</a>
        </ul>
      </div>
    </li>

    <li class="parent">
      <button class="botones">Dropdown 4</button>
      <div class="wrapper">
        <ul class="dropdown__content">
          <a href="https://www.elespectador.com/">Link 1</a>
          <a href="https://www.economist.com/">Link 2</a>
          <a href="https://www.nytimes.com/">Link 3</a>
        </ul>
      </div>
    </li>

    <li class="parent">
      <button class="botones">Dropdown 5</button>
      <div class="wrapper">
        <ul class="dropdown__content">
          <a href="https://www.elespectador.com/">Link 1</a>
          <a href="https://www.economist.com/">Link 2</a>
          <a href="https://www.nytimes.com/">Link 3</a>
        </ul>
      </div>
    </li>

    <li class="parent">
      <button class="botones">Dropdown 6</button>
      <div class="wrapper">
        <ul class="dropdown__content">
          <a href="https://www.elespectador.com/">Link 1</a>
          <a href="https://www.economist.com/">Link 2</a>
          <a href="https://www.nytimes.com/">Link 3</a>
        </ul>
      </div>
    </li>

    <button class="dropbtn" style="float:right;">
          <a href="#"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
        </button>
  </ul>
</body>