浮子导航离开

我想创建一个下拉导航，你可以看到在下降中的子菜单中上下有点像这样！[在这里输入的形象描述浮子导航离开

我有必要布局我想要虽然我没有实际创建下拉浮动左。

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

这里查看我的下拉菜单直播 https://jsfiddle.net/pj8kL8dL/

来源

2015-06-20 OnlineJordan

让我们做多一点清楚。你有服务菜单项。这一个有3个子菜单项Train，PP和Ench。你想将盒子左侧或3个物品并排放置？ –

是的，根据问题中链接的图像是否正确 – OnlineJordan

哪个左边？盒子或3件物品？ –

我花了2-3个小时来得到这样的结果，我希望这是你所需要的。顺便说一句，我会避免使用位置：经常发生的事情。

这似乎是一个有反应的人，你喜欢这个结果吗？

body{ 
 
\t 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{ 
 
\t top: 47px; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t width: 100%; 
 
} 
 

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

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

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

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

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

<div id='cssmenu'> 
 

 
<ul> 
 
    <li><a href='#'><span>Home</span></a></li> 
 
    <li><a href='#'><span>Services</span></a> 
 
    <div class="sub"> 
 
    \t \t <div class="subinner"> 
 
\t  <ul> 
 
\t \t \t <ul> 
 
\t   <li><a href='#'><span>Consultancy</span></a></li> 
 
\t   <li><a href='#'><span>Project Managment &amp; Execution</span></a></li> 
 
\t \t \t </ul> 
 
\t \t \t <ul> 
 
\t \t \t <li><a href='#'><span>Commissioning</span></a></li> 
 
\t \t \t <li><a href="#"><span>Training</span></a></li> 
 
\t \t \t <li><a href="#"><span>Plant Performance Enchancement</span></a></li> 
 
\t \t \t </ul> 
 
\t \t \t <ul> 
 
\t \t \t <li><a href='#'><span>Something</span></a></li> 
 
\t   <li><a href='#'><span>Something</span></a></li> 
 
\t \t \t </ul> 
 
\t \t </ul> 
 

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

 
    <li class='sub'><a href='#'><span>About</span></a> 
 
    \t <div class="sub"> 
 
    \t \t <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>

来源

2015-06-20 18:40:10

这是我期待的布局谢谢你在这个上花时间，虽然我想要在其他下拉列表上的服务设置相同的布局我可以设置为约不具有相同的布局编辑：我管理得到相同的布局，你已经设置了一个nth-child（）我刚刚删除它，以便它适用于全球范围内我的导航非常感谢你 – OnlineJordan

@OnlineJordan我我很高兴我的帮助，你可以upvote我的答案和标记是作为您的文章的答案？编辑：我确实设置了第n个孩子，以防万一你想给出不同的值或做别的事情。希望看到我的努力和时间会给我点赞成和标记为答案。 –

在#cssmenu li删除position: relative;一个链接，这样子菜单会相对于任何外部股利或body。

而且增加子菜单的width至100％的#cssmenu ul ul

来源

2015-06-20 15:48:16

浮子导航离开

回答

相关问题