2015-10-20 62 views
3

我想創建一個的菜單欄,和我的子菜單設置爲absolute positioning但子菜單的顯示屏下方沒有出現父菜單列表。它出現在一個靜態位置(相同的地方)爲所有菜單列表的子菜單;如何使子菜單出現正常

jsfiddle

然而,當我將所有菜單列表爲float : left,子菜單中的作品,但我不希望設置浮動:左菜單列表。

jsfiddle-after-setting-float-left

如何讓不改變浮動正確顯示的子菜單:離開菜單列表。

+1

請也(總是)包含的代碼的相關部分在這裏 – caramba

+0

這樣做,謝謝 –

+0

你應該只需要你需要什麼:http://bootsnipp.com/tags/menu –

回答

1

更新的jsfiddle http://jsfiddle.net/sachinkk/fyv8gjer/10/

#menu-button{ 
 
\t display:none; 
 
\t text-align: center; 
 
} 
 

 
.menu-bar{ 
 
\t float : left; 
 
\t width : 100%; 
 
\t background-color: #00467f; 
 
} 
 

 

 
.menu-bar ul { 
 
\t text-align:center; 
 
\t background-color: #00467f; 
 
    list-style-type: none; 
 
} 
 

 

 
.menu-bar li{ 
 
\t cursor: pointer; 
 
    display: inline; 
 
    padding-left :1%; 
 
    padding-right: 1%; 
 
    position:relative; 
 
} 
 
.menu-bar li a{ 
 
\t color : white; 
 
\t text-decoration: none; 
 
} 
 

 
.active-menu{ 
 
\t background-color: #4D9C37; 
 
\t padding-top : 0.5%; 
 
\t padding-bottom:0.5%; 
 
\t border-radius : 4px; 
 
} 
 

 
.menu-bar li ol { 
 
    position : absolute;/********if this position is relative the menu collapses*******/ 
 
    top:15px; 
 
    left:0px; 
 
    border:1px solid #e7e7e7; 
 
    display:none; 
 
    background:#fff; 
 
} 
 
.menu-bar li ol a { 
 
color : silver; 
 
} 
 
.menu-bar li:hover ol{ 
 
    display:block; 
 
}
\t <div class="menu-bar"> 
 
\t \t <ul> 
 
\t \t \t <li id="menu-button"><a>MENU</a></li> 
 
\t \t \t <div id="menu-pages"> 
 
\t \t \t \t <li class="active-menu"><a href="#">HOME</a> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li><a href="#">PRODUCTS & SERVICES</a> 
 
        <ol><!--submenu--> 
 
\t \t \t \t \t \t <li><a href="#">PRODUCTS</a></li> 
 
\t \t \t \t \t \t <li><a href="#">SERVICES</a></li> 
 
\t \t \t \t  </ol> 
 
       </li> 
 
\t \t \t \t <li><a href="#">EVENTS & ACTIVITIES</a> 
 
        <ol><!--submenu-->  
 
\t \t \t \t \t \t <li><a href="#">events</a></li> 
 
\t \t \t \t \t \t <li><a href="#">activities</a></li> 
 
\t \t \t \t \t </ol> 
 
       </li> 
 
\t \t \t \t <li><a href="#">ABOUT US</a></li> 
 
\t \t \t \t <li><a href="#">CAREERS</a></li> 
 
\t \t \t \t <li><a href="#">CONTACT US</a></li> 
 
\t \t \t </div> 
 
\t \t </ul> 
 
\t </div>

+0

感謝您的答案 –

+0

請問爲什麼左:0px給出和什麼是默認值left:0px爲子菜單列表,爲什麼需要 –

+1

我們告訴瀏覽器我們想要內部('絕對')元素相對於外部('relative')元素的位置。這是通過四種可能的屬性完成的:「頂部,底部,左側和右側」。使用兩個屬性就足夠了。內部元素默認從外部元素的左上角開始。 – Sachink