Fix large spacing in drop-down menu content-CodePudding

I coded a drop-down menu into my first project, but the space between the words is strangely large. Image linked, but for example, one of the items says "Classical_______History", with the underscore indicating a huge space. I tried adjusting the max-width for the drop-down menu, but it only wraps "history" to a second line without shrinking the space between the words.

Image of the problem in action

HTML:

<div >
            
        <button type="button" id="nav"   onclick="showMenu()">Navigation</button>
            
            <div id="DropDiv" >
            
            <a href="Biography.html">Biography</a>
            <a href="Classics.html">Classical History</a>
            <a href="DnD.html">Dungeons & Dragons</a>
            <a href="KatmaiBears.html">Katmai Bear Cameras</a>
            <a href="Knitting.html">Knitting</a>
            <a href="Reading.html">Reading</a>
            <a href="VideoGames.html">Video Games</a>
            <a href="Writing.html">Writing</a>
       
        </div>
    </div>

CSS:

a:link {
    color:rgb(92, 24, 43);
    text-decoration: none;
}

a:visited {
    color: rgb(122, 122, 122);
}

a:hover {
    color: rgb(122, 122, 122);
}

#nav {
    color: rgb(255, 254, 240);
    float: left;
}

.menuButton {
    border: 2px solid rgb(255, 254, 240);
    padding: 10px;
    border-radius: 4px;
    position: absolute;
    float: left;
    margin-top: 10px;
    background-color: rgb(92, 24, 43);
    cursor: pointer;
    z-index: 1;
}

.menuButton:hover, .menuButton:focus {
    background-color: rgb(122, 122, 122);
}


.dropMenu a {
    color:rgb(92, 24, 43);
    padding: 10px;
    text-decoration: none;
    display: block;
}

#DropDiv {
    margin-top: 75px;
    position: absolute;
    background-color: rgb(255, 254, 240);
    z-index: 10;
}

.MenuContent {
    display: none;
}

.dropMenu a:hover {background-color: rgb(122, 122, 122);}

.show {
    display: block;
}

The JS that shows the menu, in case it's helpful:

function showMenu() {
    document.getElementById("DropDiv").classList.toggle("show");
}


window.onclick = function(event) {
    if (!event.target.matches('.menuButton')) {
        var dropdowns = document.getElementsByClassName("MenuContent");
        var i;
        for (i=0; i < dropdowns.length; i  ) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

CodePudding user response：

Looks like text-align:justify has been set. Add text-align: left to .MenuContent and see if that fixes it.

CodePudding user response：

It doesn't reproduce with your code.

function showMenu() {
  document.getElementById("DropDiv").classList.toggle("show");
}


window.onclick = function(event) {
  if (!event.target.matches('.menuButton')) {
    var dropdowns = document.getElementsByClassName("MenuContent");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

a:link {
  color: rgb(92, 24, 43);
  text-decoration: none;
}

a:visited {
  color: rgb(122, 122, 122);
}

a:hover {
  color: rgb(122, 122, 122);
}

#nav {
  color: rgb(255, 254, 240);
  float: left;
}

.menuButton {
  border: 2px solid rgb(255, 254, 240);
  padding: 10px;
  border-radius: 4px;
  position: absolute;
  float: left;
  margin-top: 10px;
  background-color: rgb(92, 24, 43);
  cursor: pointer;
  z-index: 1;
}

.menuButton:hover,
.menuButton:focus {
  background-color: rgb(122, 122, 122);
}

.dropMenu a {
  color: rgb(92, 24, 43);
  padding: 10px;
  text-decoration: none;
  display: block;
}

#DropDiv {
  margin-top: 75px;
  position: absolute;
  background-color: rgb(255, 254, 240);
  z-index: 10;
}

.MenuContent {
  display: none;
}

.dropMenu a:hover {
  background-color: rgb(122, 122, 122);
}

.show {
  display: block;
}

#DropDiv {
  width: 300px;
}

<div >

  <button type="button" id="nav"  onclick="showMenu()">Navigation</button>

  <div id="DropDiv" >

    <a href="Biography.html">Biography</a>
    <a href="Classics.html">Classical History</a>
    <a href="DnD.html">Dungeons & Dragons</a>
    <a href="KatmaiBears.html">Katmai Bear Cameras</a>
    <a href="Knitting.html">Knitting</a>
    <a href="Reading.html">Reading</a>
    <a href="VideoGames.html">Video Games</a>
    <a href="Writing.html">Writing</a>

  </div>
</div>