为什么我的下拉菜单从左向右移动（HTML和CSS）

Question

我遇到的问题是当我进入导航菜单并让菜单关闭时，而不是每行一项，它从左到右穿过屏幕

我得到[第1项] [第2项] [第3项]，而不是：

[第1项]

[第2项]

[第3项]

我认为它与导航栏有关，我的下拉菜单（或缺少）想要离开。有什么建议吗？

＆＃13;

＆＃13;

#navbar {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  width: 100%;
}
.nav {
  width: 1800px;
  height: 70px;
  margin: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: #DD0205;
}
.margin {
  margin: 0;
  display: inline-block;
}
#searchbox {
  padding 5px;
  font-size: 1em;
  line-height: 100px;
}
#magnify-search {
  text-indent: -99999px;
  width: 25px;
  height: 25px;
  display: block;
  background: transparent url(magnify.jpg) 0 0 no-repeat;
}
ul.cssMenu,
ul.cssMenu ul {
  list-style: none;
  margin: 1;
  padding: 0;
  position: relative;
}
ul.cssMenu ul {
  display: none;
  ;
  /*initially menu item is hidden*/
  position: absolute;
}
/* Hover effect for menu*/

ul.cssMenu li:hover > ul {
  display: block;
}
li {
  display: inline;
}

＆＃13;

<input type="search" id="searchbox" value placeholder="Search">
<div class="margin">
  <input type="button" id="magnify-search" />
</div>


<ul class="cssMenu">
  <li class="Eco-Fashion">
    <a href="Eco-Fashion"><b>Eco-Fashion</b></a> 
    <ul>
      <li><a href="Tops">Tops</a>
      </li>
      <li><a href="Bottoms">Bottoms</a>
      </li>
      <li><a href="Outwear">Outwear</a>
      </li>
      <li><a href="Shoes">Shoes</a>
      </li>
      <li><a href="Jewelry">Jewelry</a>
      </li>
    </ul>
  </li>
  <li>&nbsp &nbsp &nbsp;</li>
  <li class="GreenBeauty">
    <a href="GreenBeauty"><b>Green Beauty</b></a> 
    <ul>
      <li><a href="Soy1">Soy Makeup</a>
      </li>
      <li><a href="Soy2">Soy Blush</a>
      </li>
      <li><a href="Soy3">Soy</a>
      </li>
    </ul>
  </li>
  <li>&nbsp &nbsp &nbsp;</li>
  <li class="GreenLifestyle">
    <a href="GreenLifestyle"><b>Green Lifestyle</b></a> 
    <ul>
      <li><a href="LeafPants">Leaf Pants</a>
      </li>
      <li><a href="CocoBra">Coconut Bra</a>
      </li>
      <li><a href="Wilson">Wilson Volleyball</a>
      </li>
    </ul>
  </li>
  <li>&nbsp &nbsp &nbsp;</li>
  <li class="Sale">
    <a href="Sale"><b>Sale</b></a> 
  </li>
</ul>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

发生了什么事？

您已指定<li>显示为inline元素。此规则强制所有<li>元素的行为与普通文本相同。这意味着它将出现在一行中，并且在元素之间会有空格（如段落中的单词之间）。

那条代码在哪里？

你有CSS规则，看起来像这样

li {
  display: inline;
}

位于代码段的最底部。

怎么办？

如果您希望他们彼此不在，请使用display: block。

还有别的吗？

是。您的菜单有非常奇怪的行为，我建议您查看jQuery Accordion