why when i want to set a width and background color to ul didn't work

Question

I'm trying to set the ul inside ul width and color, but it doesn't work and I don't know why

you will find the problem in this block

.mid > ul > li > ul {
  display: flex;
  margin: 0;
  background-color: #75391e;
  width: 100px;
  overflow: hidden;
}

/* start var */
:root {
  --main-color: #75391e;
  --secnd-color: #f1ebe8;
  --therd-color: #a49e9c;
}
/* end var */
/* start global ruls */
* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto";
}

.containatr {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* small */
@media (min-width: 768px) {
  .containatr {
    width: 750px;
  }
}
/* meduim */
@media (min-width: 992px) {
  .containatr {
    width: 970px;
  }
}
/* large */
@media (min-width: 1200px) {
  .containatr {
    width: 1170px;
  }
}
/* end global ruls */
.nav {
  position: relative;
}
.containatr {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 87%;
}
.left img {
  width: 100px;
}
.mid {
  /* display: flex; */
}
.mid > ul {
  display: flex;
  margin: 0;
}
.mid > ul > li {
  list-style: none;
  padding: 0 20px 10px;
}
.mid > ul > li:hover {
  margin-bottom: -5px;
  border-bottom: 4px solid #209ddb;
}
.mid > ul > li > a {
  text-decoration: none;
  color: #2c2e2f;
  font-size: 11px;
  text-transform: uppercase;
}
.mid > ul > li > i {
  padding-left: 5px;
  font-size: 12px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.5s;
}
.mid > ul > li:hover > i {
  transform-origin: 10px 7px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
.mid > ul > li > ul {
  display: flex;
  margin: 0;
  background-color: #75391e;
  width: 100px;
  overflow: hidden;
}
.mid > ul > li > ul li {
  background-color: #209ddb;
  display: flex;
  position: absolute;
  list-style: none;
  /* padding: 0 20px 10px; */
}
.mid > ul > li > ul a {
  text-decoration: none;
  /* color: white; */
}
.right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 18.5%;
  font-size: 10px;
  font-weight: 400;
  text-align: center;
  color: #2c2e2f;
}
.right h4:first-child {
  cursor: pointer;
  margin: 0;
  border: 1px solid #209ddb;
  color: #209ddb;
  padding: 6px 17px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.right h4:last-child {
  cursor: pointer;
  margin: 0;
  background-color: #209ddb;
  color: white;
  padding: 6px 17px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}
.right h4:last-child:hover {
  background-color: #1b89c0;
}

css

--------------------------------

html:

<!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" />
    <!-- main-style-sheet -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- reset-style-sheet -->
    <link rel="stylesheet" href="css/normalize.css" />
    <!-- google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap"
      rel="stylesheet"
    />
    <!-- font-awsome -->
    <link rel="stylesheet" href="csss/all.min.css" />
    <title>paypal nav</title>
  </head>

  <body>
    <div class="nav">
      <div class="containatr">
        <div class="left">
          <img src="img/logo.png" alt="" />
        </div>
        <div class="mid">
          <ul>
            <li class="personal-menu">
              <a href="#">personal</a>
              <i class="fa-solid fa-angle-up"></i>
              <ul class="submenu">
                <li>
                  <a href="#">how paypal works</a>
                  <a href="#">pay online</a>
                </li>
                <li>
                  <a href="#">send payments</a>
                  <a href="#">get paid</a>
                </li>
                <li>
                  <a href="#">get the paypal app</a>
                  <a href="#">search for deals</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">busniess</a>
              <i class="fa-solid fa-angle-up"></i>
              <ul class="submenu">
                <li></li>
              </ul>
            </li>
            <li>
              <a href="#">partners</a>
            </li>
          </ul>
        </div>
        <div class="right">
          <h4>log in</h4>
          <h4>sign up</h4>
        </div>
      </div>
    </div>
  </body>
</html>

score 0 · Accepted Answer · answered Apr 28 '23 at 14:23

0

First, place normalize.css before style.css as normalize.css overwrites a lot of things. Your rules may or may not get overwritten depending on how they are defined (more specific, etc.).

Regarding to your problem. The width for ul is set correctly but ul has no height and has position absolute. For the solution of your problem there is already a similar thread:
Background-color for ul/div element not rendered

answered Apr 28 '23 at 14:23

Ferris

667
6
16

Why isn't the height set automatically? When I put it on everything pops up, but why didn't this happen from the start automatically? and thx for helping:" – saif amjad Apr 29 '23 at 04:46
Absolute positioned elements are removed from the flow and ignored by other elements. So your absolutely positioned child elements do not affect the height of their parent element. Thus, you cannot set parent's height thru an absolutely positioned element. Either you have to use fixed heights or you need to use JavaScript. – Ferris Apr 29 '23 at 05:21

why when i want to set a width and background color to ul didn't work

css

html:

1 Answers1