Html Question posted in
Some basic documentation can be found here.

Html – How to get rid of this extra space in my dropdown menu?

I am trying to make a commercial website from scratch as a beginner, and I am currently following along a youtube tutorial for help. I finished the feature entirely, but the past few days I been stuck with an issue that has been frusterating me a little, since I don’t know what is causing this to happen:

Drop Down Menu

There is this extra space that has appeared beside the Language switch options. It has all this unnecessary space I don’t need nor want. It occurred after I used display: block, so I assume it has something to do with the problem I am facing.

<!DOCTYPE html>
<html lang="en">
<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">
    <title> China Goods </title>
    <link rel="stylesheet" href="/testing/index.css">
</head>

<body>


    <nav class = "navBar"> 

        <ul> 

            <li> <a href = ""> Home </a> </li>
            <li> <a href = ""> Sign Up </a> </li>
            <li> <a href = ""> Shopping Cart </a> </li>

            <div class = "languageBar"> 
          
                <li> <a href = ""> Language </a>  </li>

                <div class = "languageContent"> 

                    <li> <a href = ""> English </a> </li>
                    <li> <a href = ""> Chinese </a> </li>
                    <li> <a href = ""> Japanese </a> </li>
        
                </div>

            </div>
        

        </ul>

    </nav>
   

    <main> 



    </main>


    
</body>
</html>


* {
    margin: 0px;
    padding: 0px;
    
    
}

body{

    margin: 0px;


}


.navBar ul{

    list-style-type: none;
    background-color: hsl(0, 0% , 25%) ;
    padding: 0px;
    margin: 0px;
    overflow: hidden;

    width: max-content;

    display: flex;

    justify-content: flex-start;

    position: relative;

    left: 800px;

    top: 50px;
    
    
}

.navBar a{

   color: white;
   text-decoration: none ;
   padding: 15px;
   display: block;
   text-align: center;
   
}

.navBar a:hover{

    background-color: hsl(0, 84%, 47%);

    
}

.navBar li{

    float: center;
    
    
}

/* Impacts the Language Bar */
 .languageBar .languageContent{
    display:none;

}

.languageBar:hover .languageContent{
   
}

I attempted to use Display: flex and float:left, alongside overflow:hidden in order to get rid of this extra space, but nothing happened. Also attempted line-height as well, but that only changed the height of the text, and didn’t get rid of the unwanted space.

Tags:

2

Answers


  1. 0

    I’ve run your code and I don’t see any unnecessary spaces. It works fine on my PC. Could you upload how does problem look like?

    I don’t recommend you to use attributes and their values separated by space as well.

    Before: <a href = "">

    After: <a href="">

    Login or Signup to reply.
  2. 0

    Yes, the language hover content needs to be absolutely positioned in order to prevent the nav bar itself growing. See also this tutorial.

    body {
  margin: 0px;
}

nav {
  display: flex;
  background-color: hsl(0, 0% , 25%);
}

nav a {
  color: white;
  text-decoration: none;
  padding: 15px;
  display: inline-block;
  white-space: nowrap;
}

nav a:hover {
  background-color: hsl(0, 84%, 47%);
}

.languageBar {
  position: relative;
}

.languageBar>div {
  display: none;
  position: absolute;
  flex-direction: column;
  background-color: hsl(0, 0% , 25%);
}

.languageBar:hover>div {
  display: flex;
}
    <nav> 
  <a href="">Home</a>
  <a href="">Sign Up</a>
  <a href="">Shopping Cart</a>
  <div class="languageBar">
      <a href="">Language</a>
      <div>
        <a href="">English (Australia)</a>
        <a href="">Chinese</a>
        <a href="">Japanese</a>
      </div>
  </div>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search