Html 左浮动子导航

我正在尝试创建一个下拉导航，您可以看到下拉菜单中的子菜单，有点像这样！[在此处输入图像描述]

我有我想要的基本布局，尽管我没有真正创建左边的下拉式浮动

HTML

这里有一个链接，可以查看我的下拉菜单Live

---

删除

#cssmenu li

中的

位置：relative；

，这样子菜单将与任何外部div或

主体相对

在
#cssmenu ul ul
中，也将子菜单的
宽度增加到100%，我已经花了2-3个小时来获得这个结果，我希望这是您需要的

顺便说一句，我会避免使用position:something

这似乎是一个反应灵敏的，你喜欢结果吗


正文{
保证金：0；
}
#cssmenu ul{
保证金：0；
}
#cssmenu ul>li{
利润率：0.5px；
填充：0.08px；
浮动：左；
列表样式：无；
}
#cssmenu ul>ul li{
利润率：0.5px；
填充：0.08px；
浮动：无；
列表样式：无；
}
#cssmenu a，
#cssmenu a：链接{
字体大小：粗体；
字体大小：13px；
颜色：#E7E5；
文字装饰：无；
显示：块；
填充：8px 20px；
保证金：0；
}
#cssmenu a：悬停{
背景：#000；
颜色：#000；
}
#cssmenu.active a，
#cssmenu li:悬停>a{
背景：#ccc；
颜色：#000；
}
#cssmenu ul li:悬停a，
#cssmenu li：悬停li a{
背景：无；
边界：无；
颜色：#000；
}
#cssmenu ul a：悬停{
背景：#7d7d；
颜色：#000！重要；
}
#cssmenu li:hover>.sub.sub{
显示：块；
}
#cssmenu ul{
z指数：1000；
显示：无；
保证金：0；
填充：0；
背景：#ffffff；
边框底部：实心1px#b4；
边框顶部：实心1px#b4；
}
#cssmenu ul li{
浮动：左；
保证金：0；
填充：3倍；
}
#cssmenu li:第n个孩子（2）ul li{
浮动：无；
保证金：0；
填充：3倍；
}
#cssmenu li:第n个孩子（2）ul li a{
边框底部：1px实心#B4；
}
#cssmenu ul a，
#cssmenu ul a：链接{
字体大小：正常；
字体大小：12px；
}
#cssmenu ul：之后{
内容：“.”；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
*html#cssmenu ul{
身高：1%；
}
#cssmenu ul li:n第n个孩子（2）。次内{
顶部：47px；
位置：绝对位置；
左：0px；
宽度：100%；
}
#cssmenu ul li:第n个孩子（3）。次内{
顶部：47px；
位置：绝对位置；
左：0px；
宽度：100%；
}
#cssmenu{
边际：0px；
填充：7px 6px 0px；
背景：无重复滚动0%0%；
线高：100%；
宽度：自动；
高度：40px；
}
#cssmenu li:n子级（2）：hover>.sub.sub{
宽度：100%；
}
#cssmenu li:hover>.sub.sub{
宽度：100%；
}
#cssmenu.亚内部ul{
浮动：左；
宽度：33%！重要；
边界：无；
}




























让我们更清楚一点。您有“服务”菜单项。这个菜单项有3个子菜单项Train、PP和Ench。您想将方框向左浮动还是将3个项目并排浮动？是的，根据问题中链接的图像这是正确的哪一个在左边？方框还是3个项目？如果您看到我链接的图像，这就是我想要的基本布局下拉列表要左对齐，子菜单要在下拉列表中。左对齐并且彼此对齐显示。您可以将其标记为答案吗？我花了太多时间…除非它不是答案…这是我正在寻找的布局。感谢您花时间在这方面，尽管我希望在上的服务上设置相同的布局我可能设置的其他下拉列表没有相同的布局编辑：我设法获得了与您在第n-child（）中设置的布局相同的布局我刚刚删除了它，以便它在全球范围内应用于我的导航。非常感谢much@OnlineJordan我很高兴我帮了忙，你能投票支持我的答案吗？马克是你帖子的答案吗？编辑：我确实设置了第N个孩子，只是为了防止你想给出不同的价值观或做其他事情。希望我的努力和时间能通过投票给我一些分数和标记作为答案。
<div id='cssmenu'>

<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Services</span></a>
   <div class="sub">
        <div class="subinner">
          <ul>
             <li><a href='#'><span>Consultancy</span></a></li>
             <li><a href='#'><span>Project Managment &amp; Execution</span></a></li>
             <li><a href='#'><span>Commissioning</span></a></li>
          </ul>

         <ul>
            <li><a href="#">Training</a></li>
            <li><a href="#">Plant Performance Enchancement</a></li>
        </ul>

        </div> <!-- End of Sub -->
      </div> <!-- End of Subinner -->
   </li>

   <li class='sub'><a href='#'><span>About</span></a>
    <div class="sub">
        <div class="subinner">
      <ul>
         <li><a href='#'><span>Company</span></a></li>
         <li><a href='#'><span>Contact</span></a></li>
      </ul>
      </div>
      </div>
   </li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

#cssmenu ul {
  margin: 0;
  padding: 7px 6px 0;
  background: #493B88;
  line-height: 100%;
  width: auto;
}
#cssmenu li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: left;
  position: relative;
  list-style: none;
}

#cssmenu a,
#cssmenu a:link {
  font-weight: bold;
  font-size: 13px;
  color: #e7e5e5;
  text-decoration: none;
  display: block;
  padding: 8px 20px;
  margin: 0;
}

#cssmenu a:hover {
  background: #000;
  color: #000;
}

#cssmenu .active a,
#cssmenu li:hover > a {
  background: #ccc;
  color: #000;
}

#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
  background: none;
  border: none;
  color: #000;
  width: 30%;
}

#cssmenu ul ul a:hover {
  background: #7d7d7d;
  color: #000 !important;
  width: 400px;
}

#cssmenu li:hover > .sub .subinner ul {
  display: block;
  position: absolute;
  left: 0;
}

#cssmenu ul ul {
  z-index: 1000;
  display: none;
  margin: 0;
  padding: 0;
  width: 300px;
  position: absolute;
  top: 40px;
  left: 0;
  background: #ffffff;
  border: solid 1px #b4b4b4;
}

#cssmenu ul ul li {
  float: none;
  margin: 0;
  padding: 3px;

}

#cssmenu ul ul a,
#cssmenu ul ul a:link {
  font-weight: normal;
  font-size: 12px;
}

#cssmenu ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

* html #cssmenu ul {
  height: 1%;
}