What does top:100% does in this code?

shivajikobardan · November 14, 2022

<!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>Grid Example</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="header">
        <li>HOme</li>
        <li>
          Category
          <ul class="dropdown">
            <li>
              mobiles
              <ul class="subdropdown">
                <li>apple</li>
                <li>samsung</li>
                <li>huwaei</li>
                <li>one plus</li>
                <li>redmi</li>
              </ul>
            </li>
            <li>laptops</li>
            <li>beauty</li>
            <li>fitness</li>
            <li>Accessories</li>
          </ul>
        </li>
        <li>About</li>
        <li>Gallery</li>
        <li>Contact</li>
      </div>
      <div class="maintop">main top</div>
      <div class="bottomleft">bottom left</div>
      <div class="bottomright">bottom right</div>
      <div class="leftsidebar">Left sidebar</div>
      <div class="footer">Footer</div>
      <div class="rightsidebar">right side bar</div>
    </div>
  </body>
</html>

CSS:

* {
  margin: 0;
  box-sizing: border-box;
}
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* grid-template-rows: 5vh 45vh 45vh 5vh; */
}
.header {
  grid-column-start: 1;
  grid-column-end: 5;
  background-color: aqua;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
li {
  list-style: none;
  text-align: center;
}
.maintop {
  grid-column-start: 2;
  grid-column-end: 4;
  background-color: purple;
}
.leftsidebar {
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: green;
  height: 90vh;
}
.rightsidebar {
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: burlywood;
  grid-column-start: 4;
  /* height: 80vh`; */
}
.bottomleft {
  background-color: orange;
  /* height: 50vh; */
}
.bottomright {
  background-color: gold;
  /* height: 50vh; */
}
.footer {
  background-color: chartreuse;
  grid-column-start: 1;
  grid-column-end: 5;
  height: 5vh;
}
li {
  position: relative;
}

.dropdown {
  display:none;
  position: absolute;
  background-color: blue;
  padding: 0;
  width: 20vw;
  top: 100%;
}
li:hover .dropdown {
  display: block;
}
.dropdown li {
  padding-top: 5px;
  padding-bottom: 5px;
  color: yellow;
}

.dropdown li:hover {
  color: blue;
  background-color: yellow;
}

li:hover {
  background-color: goldenrod;
}

.subdropdown{
  position:absolute;
  background-color:black;
  color:blue;
  left:100%;
  top:0%;
  padding:0;
  width:150px;
  /* padding-left:30px;
  padding-right:30px; */
  display:none;

}

.subdropdown li:hover{
  background-color:skyblue;
  color:yellow;

}

.dropdown li:hover .subdropdown{
  display:block;

}

I'm wondering what the below code is doing here?

li {
  position: relative;
}

.dropdown {
  display:none;
  position: absolute;
  background-color: blue;
  padding: 0;
  width: 20vw;
  top: 100%;
}

top:100% only. What's it doing? I'm not getting it. I'm aware of absolute and relative positioning.

with respect to li, .dropdown should be 100% from the top of li is what it probably means, But I can't see that how and get how..Also is there an easier approach to building a drop down menu than this? I'm struggling to understand this code.

Hairless Monkey · November 14, 2022

2 hours ago, shivajikobardan said:

top:100% only. What's it doing? I'm not getting it.

top: 100% sets the location to be directly below the parent element.

2 hours ago, shivajikobardan said:

with respect to li, .dropdown should be 100% from the top of li is what it probably means

So yes, this is correct, just another way of saying it.

Here's an example:

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  position: relative;
  width: 400px;
  height: 200px;
  border: 1px solid red;
}

div.b {
  position: absolute;
  top: 100%;
  border: 1px solid blue;
} 
</style>
</head>
<body>

<h1>The top Property</h1>

<div class="a">This div element has position: relative;
  <div class="b">This div element has position: absolute and top:100%.</div>
</div>

</body>
</html>

You can play with this here:

https://www.w3schools.com/cssref/tryit.php?filename=trycss_position_top2