Bootstrap固定左下拉右

-1

我有一個固定在左側的bootstrap製成的菜單，問題在於它是手風琴。Bootstrap固定左下拉右

我需要菜單顯示在右側，並具有100％的高度。

我見過很多菜單，但不尊重引導程序並且沒有響應，所以我在移動終端中看不到它。

圖像菜單正常：

活動圖像菜單：

enter image description here

圖像菜單中，我需要：

enter image description here

升級： http://www.bootply.com/Xm9xYktQaq

無需手風琴，需要下拉列表右側

來源

2015-01-08 user3507144

請提供您代碼 – jbutler483

你好，代碼是買主題，喲向你展示？ – user3507144

OP請閱讀http://stackoverflow.com/help/mcve – DaniP

這是簡單的菜單學習，使菜單一切順利:)

body { 
 
font-family: helvetica, arial, sans-serif; 
 
background: #e3e3e3;text-align: center; 
 
} 
 

 
/* MENU */ 
 

 
#nav { 
 
background: #e5e5e5; 
 
float: left; 
 
margin: 0; padding: 0; 
 
border: 1px solid white; 
 
border-bottom: none; 
 
} 
 

 
#nav li a, #nav li { 
 
float: left; 
 
} 
 

 
#nav li { 
 
list-style: none; 
 
position: relative; 
 
} 
 

 
#nav li a { 
 
padding: 1em 2em; 
 
text-decoration: none; 
 
color: white; 
 
background: #292929; 
 
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); 
 
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); 
 
border-right: 1px solid #3c3c3c; 
 
border-left: 1px solid #292929; 
 
border-bottom: 1px solid #232323; 
 
border-top: 1px solid #545454; 
 
} 
 

 
#nav li a:hover { 
 
background: #2a0d65; 
 
background: -moz-linear-gradient(top, #11032e, #2a0d65); 
 
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); 
 
} 
 

 

 
/* Submenu */ 
 

 
.hasChildren { 
 
\t position: absolute; 
 
\t width: 5px; height: 5px; 
 
\t background: black; 
 
\t right : 0; 
 
\t bottom: 0; 
 
} 
 

 
#nav li ul { 
 
display: none; 
 
position: absolute; 
 
left: 0; 
 
top: 100%; 
 
padding: 0; margin: 0; 
 
} 
 

 
#nav li:hover > ul { 
 
display: block; 
 
} 
 

 
#nav li ul li, #nav li ul li a { 
 
float: none; 
 
} 
 

 
#nav li ul li { 
 
_display: inline; /* for IE6 */ 
 
} 
 

 
#nav li ul li a { 
 
width: 150px; 
 
display: block; 
 
} 
 

 
/* SUBSUB Menu */ 
 

 
#nav li ul li ul { 
 
display: none; 
 
} 
 

 
#nav li ul li:hover ul { 
 
left: 100%; 
 
top: 0; 
 
} 
 

 

 
#nav li ul

<body> 
 

 
<ul id="nav"> 
 
\t <li><a href="#">Home</a></li> 
 
\t <li><a href="#">About</a> 
 
\t \t <ul> 
 
\t \t \t <li><a href="#">About Us</a></li> 
 
\t \t \t <li><a href="#">About Them</a></li> 
 
\t \t \t <li><a href="#">About You</a> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="#">More About Us</a></li> 
 
\t \t \t \t \t <li><a href="#">More About Them</a></li> 
 
\t \t \t \t \t <li><a href="#">More About You</a></li> \t \t \t \t \t \t 
 
\t \t \t \t </ul> 
 
\t \t \t </li> \t \t \t \t \t \t 
 
\t \t </ul> 
 
\t </li> 
 
\t <li><a href="#">Portfolio</a></li> 
 
\t <li><a href="#">Contact</a> 
 
\t \t <ul> 
 
\t \t \t <li><a href="#">International</a></li> 
 
\t \t \t <li><a href="#">Corporate</a> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="#">International</a></li> 
 
\t \t \t \t \t <li><a href="#">Corporate</a></li> 
 
\t \t \t \t \t <li><a href="#">American Offices</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </li> 
 
\t \t \t <li><a href="#">American Offices</a></li> \t \t \t \t \t \t 
 
\t \t </ul> 
 
\t </li> \t 
 
\t 
 
</ul> 
 
     
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> \t 
 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script> 
 
<script type="text/javascript" src="js/scripts.js"></script> 
 
</body>

來源

2015-01-08 13:26:03

Bootstrap固定左下拉右

回答

相關問題