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

【问题标题】：Why does my dropdown menus move left to right (HTML & CSS)为什么我的下拉菜单从左向右移动（HTML 和 CSS）
【发布时间】：2015-08-22 13:52:22
【问题描述】：

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

我得到 [Item 1] [Item 2] [Item 3] 而不是：

[项目 1]

[项目 2]

[第 3 项]

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

#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;
}

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

【问题讨论】：

这是因为您的最后一条规则li { display: inline; } 正在应用于页面上的所有列表项。

标签： html css drop-down-menu menu navigationbar

【解决方案1】：

发生了什么？

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

那段代码在哪里？

你的 CSS 规则看起来像这样

li {
  display: inline;
}

在你的代码sn-p的最底部。

怎么办？

如果您希望它们处于彼此之下，请改用display: block。

还有什么？

是的。你的菜单有很奇怪的行为，我建议你看看jQuery Accordion

【讨论】：