Bootstrap Fixed left dropdown right

-1

У меня есть меню, сделанное в бутстрапе, которое закреплено слева, проблема в том, что это аккордеон.Bootstrap Fixed left dropdown right

Мне нужно, чтобы меню отображалось справа и со 100% -ной высотой.

Я видел много меню, но не уважал бутстрап и не реагировал, поэтому я не вижу его в мобильном терминале.

Image Menu Normal:

Активное меню Image:

enter image description here

меню Image Мне нужно:

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 Fixed left dropdown right

ответ

Смежные вопросы