如何使用css使我的菜单宽度100％的浏览器

Question

我似乎无法获得100％的浏览器菜单。我想在标题中的菜单旁边有一个徽标。我尝试在CSS中添加背景颜色和宽度或100％，但这不起作用

这是我的代码

#logo {
  padding-top: 10px;
  padding-left: 85px;
  float: left;
}
/*----- Top Level -----*/

#menu2 {
  background: #3b3b3b;
}
.menu > ul > li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 19px;
}
.menu > ul > li > a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #2e2728;
}
/*----- Bottom Level -----*/

.menu li:hover .sub-menu {
  z-index: 1;
  opacity: 1;
}
.sub-menu {
  width: 160%;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
}
.sub-menu li {
  display: block;
  font-size: 16px;
}
.sub-menu li a {
  padding: 10px 30px;
  display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #3e3436;
}

<div id="menu2">
  <div id="logo">
    <img src="logo2.png" alt="logo" />

  </div>
  <div class="menu-wrap">
    <nav class="menu">

      <ul class="clearfix">
        <li><a href="index.php">Home</a>
        </li>
        <li><a href="#">About Us</a>
        </li>

        <li>
          <a href="#">What's On</a>

          <ul class="sub-menu">
            <li><a href="#">Sunday Services</a>
            </li>
            <li><a href="#">Speical Events</a>
            </li>
            <li><a href="#">Sunday School</a>
            </li>
            <li><a href="#">Youth Group</a>
            </li>
            <li><a href="#">Prayer Meeting</a>
            </li>
            <li><a href="#">Coffee Morning</a>
            </li>
            <li><a href="#">Woman's Fellowship</a>
            </li>
            <li><a href="#">Craft Class</a>
            </li>
            <li><a href="#">Diners Club</a>
            </li>

          </ul>
        </li>
        <li><a href="contact.php">Get In Touch</a>
        </li>
        <li class="current-item"><a href="findus.php">Find Us</a>
        </li>

      </ul>
    </nav>
  </div>

Answer 1

css中的背景应为background-color: #FFFFFF

Answer 2

你只需要清除花车：它会调用clearfix

有很多方法可以做到这一点......一个是将overflow:hidden添加到包装器

#menu2 {
  background: #3b3b3b;
  overflow: hidden;
  /* quick clearfix */
}

Codepen Demo

＆＃13;

＆＃13;

#logo {
  padding-top: 10px;
  padding-left: 85px;
  float: left;
}
/*----- Top Level -----*/

#menu2 {
  background: #3b3b3b;
  overflow: hidden;
  /* quick clearfix */
}
.menu > ul > li {
  float: left;
  display: inline-block;
  position: relative;
  font-size: 19px;
}
.menu > ul > li > a {
  padding: 10px 40px;
  display: inline-block;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
  background: #2e2728;
}
/*----- Bottom Level -----*/

.menu li:hover .sub-menu {
  z-index: 1;
  opacity: 1;
}
.sub-menu {
  width: 160%;
  padding: 5px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
  background: #2e2728;
}
.sub-menu li {
  display: block;
  font-size: 16px;
}
.sub-menu li a {
  padding: 10px 30px;
  display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #3e3436;
}

＆＃13;

<div id="menu2">
  <div id="logo">
    <img src="logo2.png" alt="logo" />

  </div>
  <div class="menu-wrap">
    <nav class="menu">

      <ul class="clearfix">
        <li><a href="index.php">Home</a>
        </li>
        <li><a href="#">About Us</a>
        </li>

        <li>
          <a href="#">What's On</a>

          <ul class="sub-menu">
            <li><a href="#">Sunday Services</a>
            </li>
            <li><a href="#">Speical Events</a>
            </li>
            <li><a href="#">Sunday School</a>
            </li>
            <li><a href="#">Youth Group</a>
            </li>
            <li><a href="#">Prayer Meeting</a>
            </li>
            <li><a href="#">Coffee Morning</a>
            </li>
            <li><a href="#">Woman's Fellowship</a>
            </li>
            <li><a href="#">Craft Class</a>
            </li>
            <li><a href="#">Diners Club</a>
            </li>

          </ul>
        </li>
        <li><a href="contact.php">Get In Touch</a>
        </li>
        <li class="current-item"><a href="findus.php">Find Us</a>
        </li>

      </ul>
    </nav>
  </div>

＆＃13;

＆＃13;

＆＃13;