浮子導航離開

我想創建一個下拉導航，你可以看到在下降中的子菜單中上下有點像這樣！[在這裏輸入的形象描述浮子導航離開

我有必要佈局我想要雖然我沒有實際創建下拉浮動左。

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

浮子導航離開

回答

相關問題