css 为什么当我想设置一个宽度和背景颜色为ul没有工作

nsc4cvqm 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(128)

我试图设置ul内的ul宽度和颜色，但它不工作，我不知道为什么
你会发现问题在这个街区

.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>

css

来源：https://stackoverflow.com/questions/76130005/why-when-i-want-to-set-a-width-and-background-color-to-ul-didnt-work

1条答案

按热度按时间

p8h8hvxi1#

首先，放置normalize。cssbeforestyle.css为normalize。CSS覆盖了很多东西。您的规则可能会被覆盖，也可能不会被覆盖，这取决于它们的定义方式（更具体等）。）.
关于你的问题。ul的宽度设置正确，但ul没有高度，具有绝对位置。对于您的问题的解决方案已经有一个类似的线程：
Background-color for ul/div element not rendered

赞(0）回复(0）举报 2023-05-02

我来回答

css 为什么当我想设置一个宽度和背景颜色为ul没有工作

css

html：

1条答案

相关问题

热门标签

最新问答