导航UL项目跨越

Question

我正在处理一个简单的静态页面，几乎让我的导航栏正确。现在，菜单项横跨整个导航栏的宽度，而不是保持包含在他们的“列表区域”中，如果这是有道理的。我觉得我已经尝试了所有东西，我认为它与我在导航和照片轮播上的z-index有关（因此导航菜单项目显示在旋转木马顶部）和定位，但是我无法弄清楚。

nav ul {
  background: #A6CE4F;
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0px;
  list-style: none;
  position: relative;
  display: inline-table;
  width: 100%;
  display: table;
}
nav ul ul {
  display: none;
  width: 100%;
  background: #f37b35;
  border-radius: 0px;
  padding: 0;
  position: absolute;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
}
nav ul li:hover > ul {
  display: block;
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  padding: 25px 40px;
  color: #1f354b;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  position: relative;
}
nav ul ul li a {
  padding: 15px 40px;
  color: #fff;
}
nav ul ul li a:hover {
  background: #e2550e;
}
nav ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

<nav style="position: relative; z-index: 2;">
  <ul>
    <li>
      <a href="">ICAB Leadership Group</a>
      <ul>
        <li><a href="">Requirements</a>
        </li>
        <li><a href="">Roles & Responsibilities</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="">Site Cabs</a>
      <ul>
        <li><a href="">Community Input</a>
        </li>
        <li><a href="">Cross Network Collaborations</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="">Community Toolbox</a>
      <ul>
        <li><a href="">Community engagement templates and documents</a>
        </li>
        <li><a href="">Network and Community fact sheets</a>
        </li>
        <li><a href="">Training materials</a>
        </li>
        <li><a href="">FAQs</a>
        </li>
        <li><a href="">Community Research Resources</a>
        </li>
        <li><a href="">Acronyms</a>
        </li>
        <li><a href="">Email Alias Lists </a>
        </li>
      </ul>
    </li>
    <li>
      <a href="">Contacts & Email Lists</a>
    </li>
  </ul>
</nav>

Answer 1

这是因为您将width: 100%设置为.nav ul ul。如果您希望宽度保持可变，请在width: 100%

中将width: auto设置为.nav ul ul

此处示例：http://codepen.io/anon/pen/MaRJXZ

Answer 2

这种情况正在发生，因为您的下拉线宽度设置为100％。

添加如下宽度：

private volatile static VolleySingleton self;

public static VolleySingleton getInstance(Context context) {
    if (self == null) {
        //Using double checked locking
        synchronized (VolleySingleton.class) {
            if (self == null) {
                //Using app context prevents leaking of activity context
                self = new VolleySingleton(context.getApplicationContext());
            }
        }
    }
    return self;
}

请参阅小提琴here。