我想創建一個子的菜單欄,和我的子菜單設置爲absolute positioning
但子菜單的顯示屏下方沒有出現父菜單列表。它出現在一個靜態位置(相同的地方)爲所有菜單列表的子菜單;如何使子菜單出現正常
然而,當我將所有菜單列表爲float : left
,子菜單中的作品,但我不希望設置浮動:左菜單列表。
jsfiddle-after-setting-float-left
如何讓不改變浮動正確顯示的子菜單:離開菜單列表。
我想創建一個子的菜單欄,和我的子菜單設置爲absolute positioning
但子菜單的顯示屏下方沒有出現父菜單列表。它出現在一個靜態位置(相同的地方)爲所有菜單列表的子菜單;如何使子菜單出現正常
然而,當我將所有菜單列表爲float : left
,子菜單中的作品,但我不希望設置浮動:左菜單列表。
jsfiddle-after-setting-float-left
如何讓不改變浮動正確顯示的子菜單:離開菜單列表。
更新的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>
感謝您的答案 –
請問爲什麼左:0px給出和什麼是默認值left:0px爲子菜單列表,爲什麼需要 –
我們告訴瀏覽器我們想要內部('絕對')元素相對於外部('relative')元素的位置。這是通過四種可能的屬性完成的:「頂部,底部,左側和右側」。使用兩個屬性就足夠了。內部元素默認從外部元素的左上角開始。 – Sachink
請也(總是)包含的代碼的相關部分在這裏 – caramba
這樣做,謝謝 –
你應該只需要你需要什麼:http://bootsnipp.com/tags/menu –