是否有可能使用宽度为1024px的包装器进行全宽下拉菜单?

时间:2019-01-31 01:07:13

标签: html css

我有一个问题,当包装器的宽度为1024px(所有内容都在屏幕上居中)时,是否可以使用全角下拉菜单?因为我的下拉菜单有问题。虽然,它尚不能与悬停一起使用,但我仍在尝试设置下拉菜单的样式。

这是我的代码:

#lower-header {
  background-color: #ffffff;
  height: 100px;
  position: relative;
  width: -webkit-fill-available;
  z-index: 1;
  img {
    float: left;
    margin-top: 33px;
  }
  ul {
    list-style: none;
    display: block;
    float: left;
    margin: 17px 0px;
    padding-left: 30px;
    li {
      display: inline-block;
      font-size: 17px;
      font-weight: bold;
      padding: 16px 19px;
      height: 73px;
      .sub-menu-whole {
        background-color: #ffffff;
        height: 360px;
        /*position: absolute;*/
        z-index: 1;
        margin-top: 44px;
        &:after {
          content: "";
          display: table;
          clear: both;
        }
        div {
          position: absolute;
          margin: -33px 0;
          padding: 0;
          div {
            float: right;
          }
        }
      }
      a {
        text-decoration: none;
        color: #000000;
        &:hover {
          color: red;
        }
      }
    }
  }
}
<div id="lower-header">
  <div class="wrapper">
    <img src="images/logo/logo_01.png">
    <ul>
      <li>
        <a href="#">KU 스타트업</a>
        <div class="sub-menu-whole">
          <div>
            <img src="images/bg/bg_sub_01.png">
          </div>
          <div class="column">
            <ul>
              <li>
                <a>인사말</a>
              </li>
              <li>
                <a>창업부서소개</a>
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li><a href="#">프로그램</a></li>
      <li><a href="#">스타트업 리더</a></li>
      <li><a href="#">창업보육</a></li>
      <li><a href="#">창업멘토단</a></li>
      <li><a href="#">커뮤니티</a></li>
    </ul>
  </div>
</div>

1 个答案:

答案 0 :(得分:0)

从ul中删除4+(3+(2+(1+0)))属性,然后添加k==6;