Why float (left) option doesn't display items side by side?-CodePudding

In this below HTML/CSS program i have used ul li to display items side by side. However when the drop down menu occurs, the items are displayed one below another and not side by side. Why is this happening?

To be more clear Home Promotions About Contact Signin are displayed next to each other. This is because they fall under ul/li. But when I hover around Promotions why Twitter Facebook Instagram are displayed below each other, and not next to each other. They also fall under ul li css styling right and hence the question.

Sincerely,
Sudarsan.D

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link href="styles.css" rel="stylesheet">
      <link href="index.css" rel="stylesheet">
      <title>Why</title>
    <style>
    body {
      color: white;
      background-size: cover;
      font-family: Arial;
    }
    
    ul {
       margin: 0px;
       padding: 0px;
       list-style:none;
    }
    
    ul li {
       width: 220px;
       height: 80px;
       background-color:black;
       opacity: .8;
       line-height: 40px;
       text-align: center;
       font-size: 20px;
       float:left;
    }
    
    ul li a {
       text-decoration: none;
    }
    
    ul li a:hover {
       background-color:green;
    }
    
    ul li ul li {
       display:none;
    }
    
    ul li:hover ul li {
       display:block;
    }
    
    </style>
    </head>
    <body>
       <ul>
         <li><a>Home</a></li>
         <li><a>Promotions</a>
              <ul>
                   <li><a>Twitter</a></li>
                   <li><a>Facebook</a></li>
                   <li><a>Instragram</a></li>
              </ul>
         </li>
         <li><a>About</a>
              <ul>
               <li><a>Shop</a></li>
                   <li><a>Founders</a></li>
                   <li><a>Feedback</a></li>
              </ul>
         </li>
         <li><a>Contact</a>
             <ul>
               <li><a>Map</a></li>
               <li><a>Directions</a></li>
             </ul>
         </li>
         <li><a>Sign in</a> </li>
      </ul>
    </body>
    </html>

CodePudding user response：

The code is perfectly fine. You just need to put width: 100%; to the <ul> and it will work. Also if you run the snippet then you will see its still stacked one below other because the screen is small and it cannot fit all of the <li> in one row. The solution to it is that you add width: auto; and some padding to the <li> so that it fits every <li> in one row on matter screen size. But yes at one point it will be stacked below each other yet again as the screen size decreases.

body {
  color: white;
  background-size: cover;
  font-family: Arial;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  width: 100%;
}

ul li {
  width: 220px;
  height: 80px;
  background-color: black;
  opacity: .8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  float: left;
}

ul li a {
  text-decoration: none;
}

ul li a:hover {
  background-color: green;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="styles.css" rel="stylesheet">
  <link href="index.css" rel="stylesheet">
  <title>Why</title>
</head>

<body>
  <ul>
    <li><a>Home</a></li>
    <li><a>Promotions</a>
      <ul>
        <li><a>Twitter</a></li>
        <li><a>Facebook</a></li>
        <li><a>Instragram</a></li>
      </ul>
    </li>
    <li><a>About</a>
      <ul>
        <li><a>Shop</a></li>
        <li><a>Founders</a></li>
        <li><a>Feedback</a></li>
      </ul>
    </li>
    <li><a>Contact</a>
      <ul>
        <li><a>Map</a></li>
        <li><a>Directions</a></li>
      </ul>
    </li>
    <li><a>Sign in</a> </li>
  </ul>
</body>

</html>

CodePudding user response：

I suggest using flex instead of float. Also, I replaced ul with div. I tried on your code. seem this is better:

* {
  box-sizing: border-box;
}

body {
  color: white;
  background-size: cover;
  font-family: Arial;
}

.container {
  display: flex;
}

.item {
  width: 20%;
  background-color: black;
  opacity: .8;
  text-align: center;
  font-size: 18px;
  line-height: 50px;
  position: relative;
}

.item a {
  text-decoration: none;
  height: 100%;
  display: inline-block;
  padding: 0 30px;
  cursor: pointer;
}

.item a:hover {
  background-color: green;
}

.dropdown {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown a {
  display: block;
  background-color: grey;
  padding: 10px;
}

.item:hover .dropdown {
  display: flex;
}

@media screen and (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }
  .item {
    width: 100%;
  }
  .dropdown {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .dropdown a {
    padding: 0;
  }
}

<div >
  <div >
    <a>Home</a>
  </div>
  <div >
    <a>Promotions</a>
    <div >
      <a>Twitter</a>
      <a>Facebook</a>
      <a>Instragram</a>
    </div>
  </div>
  <div >
    <a>About</a>
    <div >
      <a>Shop</a>
      <a>Founders</a>
      <a>Feedback</a>
    </div>
  </div>
  <div >
    <a>Contact</a>
    <div >
      <a>Map</a>
      <a>Directions</a>
    </div>
  </div>
  <div >
    <a>Sign in</a>
  </div>
</div>