Question

我想将垂直菜单转换为水平菜单。以前它工作正常，但在添加HTML代码以进行自定义后，整个菜单显示为垂直。

这是css代码：

.menuwidth {
  width:950px;
  background:#004489;
}
.navirow {
  border-top:1px solid #4c4c4c;
  box-shadow:0 4px 4px -4px rgba(0,0,0,0.5);
  -moz-box-shadow:0 4px 4px -4px rgba(0,0,0,0.5)
  -webkit-box-shadow:0 4px 4px -4px rgba(0,0,0,0.5)
  width:950px;
  margin:0 auto;
  height:38px;
}
.navirow li a {
  border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
}
.navirow li.home a {
  background-color:#1e3b66;
  margin-right:5px;
}
.navirow li home li a {
  background-color:transparent;
}
.navirow li.active a {
  font-weight:700;
  color:#eaeaea;
  background-color:#1e1e1e;
  text-decoration:none;
  text-shadow:none;
}
.navirow li.active li a {
  font-weight:500;
  text-decoration:none;
  color:#fff;
  background-color:transparent;
}

这是html代码：

<div class='menuwidth'>
<div class='navirow'>
<ul class='sf-menu'>
<li class='active home'> 
<a expr:href='data:blog.homepageUrl'>Home</a>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='#'>Movies</a>
<ul>
<li><a href='#'>Cat 1</a></li>
<li><a href='#'>cat 2</a></li>
<li><a href='#'>Cat 3</a></li>
</ul>
</li>
<li><a href='#'>Computer</a>
<ul>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Mobile</a></li>
</ul></li>
<li><a href='#'>Others</a>
<ul>
<li><a href='#'>Media</a></li>
<li><a href='#'>People</a></li>
<li><a href='#'>Politics</a></li>
<li><a href='#'>Society</a></li>
<li><a href='#'>Travel</a></li>
<li><a href='#'>Health</a></li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</ul>
</div>
</div>

Answer 1

Float离开li并将它们水平转换为子菜单，让它们不浮动。

ul li{
     floa:left;
}

Answer 2

请检查：jsFiddle。我已经为水平导航菜单设置了基本布局，您可以根据需要进行样式设置。这些是我使用过的新款式：

ul.sf-menu li {
    display: inline-block;
}

ul.sf-menu li ul {
    display: none;
    position: absolute;
}

ul.sf-menu li:hover ul {
    display: block;
    width: 50px;
    padding-left: 0px;
}

如何从子菜单转换为垂直菜单到水平菜单？

2 个答案: