漂浮子导航左

Question

我正在尝试创建一个下拉导航，您可以在下拉列表中看到这样的子菜单！[在此处输入图像说明

我有我想要的基本布局，但我没有真正创建左下拉浮动。

HTML

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

下面是CSS控制下拉没有使用JS。

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

这是一个查看我的下拉菜单Live的链接 https://jsfiddle.net/pj8kL8dL/

Answer 1

删除position: relative;中的#cssmenu li，以便子菜单相对于任何外部div或body。

在width

中，将子菜单的#cssmenu ul ul增加到100％

Answer 2

我花了2-3个小时才得到这个结果，我希望这是你需要的。

顺便说一句，我会避免使用位置：经常这样。

这似乎是一个响应，你喜欢结果吗？

body{
	margin: 0;
}

#cssmenu ul {
  margin: 0;

}
#cssmenu ul > li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: left;
  list-style: none;
}

#cssmenu ul > ul li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: none;
  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;
}

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

#cssmenu li:hover > .sub .subinner ul {
  display: block;
}

#cssmenu ul ul {
  z-index: 1000;
  display: none;
  margin: 0;
  padding: 0;
  background: #ffffff;
  border-bottom: solid 1px #b4b4b4;
  border-top: solid 1px #b4b4b4;
}

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

}

#cssmenu li:nth-child(2) ul ul li {
  float: none;
  margin: 0;
  padding: 3px;
}

#cssmenu li:nth-child(2) ul ul li a{

     border-bottom: 1px solid #B4B4B4;
}

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

#cssmenu ul li:nth-child(2) .subinner{
	top: 47px;
	position: absolute;
	left: 0px;
	width: 100%;
}

#cssmenu ul li:nth-child(3) .subinner{
	top: 47px;
	position: absolute;
	left: 0px;
	width: 100%;
}

#cssmenu{
	
	margin: 0px;
	padding: 7px 6px 0px;
	background: #493B88 none repeat scroll 0% 0%;
	line-height: 100%;
	width: auto;
	height: 40px;
}

#cssmenu li:nth-child(2):hover > .sub .subinner ul {
	width: 100%;
}

#cssmenu li:hover > .sub .subinner ul {
	width: 100%;
}

#cssmenu .subinner ul ul{
	float: left;
	width: 33% !important;
	border: none;
}

<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>
			<ul>
	         <li><a href='#'><span>Consultancy</span></a></li>
	         <li><a href='#'><span>Project Managment &amp; Execution</span></a></li>
			</ul>
			<ul>
			<li><a href='#'><span>Commissioning</span></a></li>
			<li><a href="#"><span>Training</span></a></li>
			<li><a href="#"><span>Plant Performance Enchancement</span></a></li>
			</ul>
			<ul>
			 <li><a href='#'><span>Something</span></a></li>
	         <li><a href='#'><span>Something</span></a></li>
			</ul>
		</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>