How would I remove the space between my menu options?-CodePudding

How would I go about removing the black line between my menu options when using the hover function in CSS?

https://jsfiddle.net/jameskelly/3ejsu7gx/2/

   a:hover {
     background-color: #ebebeb;
     font-color: black;
   }
   
   /* Style the navbar */
#navbar {
  overflow: hidden;
  background-color: #333;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
  }

/* Navbar links */
#navbar a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  content-align: center;    
}

#navbar current {
  color: black;
  text-align: center;
  padding: 14px;
  content-align: center;
  background-color: #ebebeb;
}

#navbar a:hover {
  color: black;
}

<div id="navbar">
  <current href="index.html">Home</current>
  <a href="about.html">About</a>
  <a href="services.html">Services</a>
</div>

CodePudding user response：

You use links in menu items and have spaces between them. Put the menu items on one line, and in general, try to use unnumbered lists as menu.

<div id="navbar">
  <current href="index.html">Home</current><a href="about.html">About</a><a href="services.html">Services</a>
</div>

CodePudding user response：

For navigation menus, using unordered lists is the easiest way to maintain styling. I changed the div to a ul with display:flex for the layout.

a:hover {
  background-color: #ebebeb;
  font-color: black;
}


/* Style the navbar */

ul {
  display: flex;
  justify-content: center;
  overflow: hidden;
  background-color: #333;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
}


/* Navbar links */

li {
  text-align: center;
  text-align: center;
  list-style-type: none;
}

a {
  color: #f2f2f2;
  text-decoration: none;
  padding: 14px;
}

#navbar current a {
  color: black;
  text-align: center;
  padding: 14px;
  content-align: center;
  background-color: #ebebeb;
}


#navbar a:hover {
  color: black;
}

<ul id="navbar">
  <li><current><a href="index.html">Home</a></current></li>
  <li><a href="about.html">About</a></li>
  <li><a href="services.html">Services</a></li>
</ul>

CodePudding user response：

You can use display flex.

Just add this two properties in the navbar div:

#navbar {
  overflow: hidden;
  background-color: #333;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;
  
  display:flex;
  justify-content: center;
  }