I have created a sidebar, activation class work properly when I stay just parent menu like Sidebar Menu, if I then click on a Sub Menu, although the correct article displays, the NAV bar closes and lose my navigation position.
Below my work code:
Html:
<div id='sidebar'>
<ul>
<li><a href='#'>Sidebar Menu</a></li>
<li class='sub'><a href='#'>Sidebar</a>
<ul>
<li class='sub'><a href='#'>Sidebar 1</a>
<ul>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
<li class='sub'><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Jquery
$("#sidebar > ul > li").each(function() {
var sideItem = $(this);
if (sideItem.find("a").attr("href") == location.pathname) {
sideItem.addClass("activation");
}
});
$('#sidebar li.active').addClass('open').children('ul').show();
$('#sidebar li.sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
}
else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
Issue 1: leave submenues open if I not close submenues
Like below image:
At the same time open three submenu I implement like this.
Issue 2: Active child menu when I active this url
How can I reach this solution?
JSFiddle
I think this is what you want. I only concerned about your main point.sorry about the UI.try this and tell me is this your case.you can try it in here.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.navi{
width: 200px;
}
ul{
color: orange;
cursor: pointer;
font-weight: bold;
}
ul li{
list-style-type: none;
color: black;
text-indent: 20%;
font-weight: normal;
display: list-item;
display: none;
}
ul li:hover{
background-color: orange;
color: white;
}
ul li:active{
background-color: orange;
color: white;
}
</style>
<body>
<div class="navi">
<ul class="one"><span class="onez"> > Sub One</span>
<li>First</li>
<li>Second</li>
</ul>
<ul class="two"> <span class="twoz"> > Sub Two</span>
<li>Third</li>
<li>Four</li>
</ul>
</div>
<script type="text/javascript">
$(".onez").click(function(){
if ($("ul.one li").is(':visible')){
$("ul.one li").slideUp();
}
else{
$("ul.one li").slideDown();
}
});
$(".twoz").click(function(){
if ($("ul.two li").is(':visible')){
$("ul.two li").slideUp();
}
else{
$("ul.two li").slideDown();
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>active child test</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#sidebar ul li{
list-style: none;
}
#sidebar ul li a{
text-decoration: none;
}
.glyphicon {
top: -3.1px;
font-size: 14px;
}
.uparrow{
display: none;
}
</style>
</head>
<body>
<div id='sidebar'>
<ul>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Sidebar</a>
<ul>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Sidebar 1</a>
<ul>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("a").click(function(){
var parent=$(this).parent();
$('.downarrow',parent).toggle();
$('.uparrow',parent).toggle();
$("ul",parent).slideToggle("fast");
$(this).toggleClass("up");
});
})
</script>
</body>
</html>
Related
HTML CODES:
<header>
<nav>
<ul>
<li class="asmenu">Menu1 <i class="fa fa-caret-down"></i>
<ul class="submenu deactive">
<li>Menu1-a</li>
<li>Menu1-b</li>
<li>Menu1-c</li>
<li>Menu1-d</li>
</ul>
</li>
<li class="asmenu">Menu2 <i class="fa fa-caret-down"></i>
<ul class="submenu deactive">
<li>Menu2-a</li>
<li>Menu2-b</li>
<li>Menu2-c</li>
<li>Menu2-d</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Menu5</li>
<li>Menu6</li>
</ul>
</nav>
</header>
CSS CODES:
header nav ul li {
position: relative;
}
.submenu {
position: absolute;
width: 20rem;
height: 20rem;
background-color: darkgoldenrod;
margin-top: 2rem;
border-radius: 0rem 0rem 2.5rem 0rem;
}
.active {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.deactive {
display: none;
}
Question is how can i make submenu using these codes in Javascript . I want to use "toggle" but i didn't it. I tried to a few times but because of i have 2 submenu, i have error always. Firstly i tried to mouseover and mouseout but when i hover with mouse to menu2, it is opening menu1's submenu or anything opening.
try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
source
I'm trying to create a football website and I need someone to help me . I want to add a drop-down menu that lists columns of football competitions .Exactly in "competitions " just like this drop-down menu that lists columns.
#Mostafa Baezid Here is the code:
<!-- outer-wrapper start -->
<body>
<nav class='navbar navbar-default'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='.js-navbar-collapse' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>LOGO</a>
</div>
<div class='collapse navbar-collapse js-navbar-collapse'>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>EUROPE</a></li>
<li><a href='#'>AFRICA</a></li>
<li><a href='#'>WORLDWIDE</a></li>
<li class='dropdown mega-dropdown'>
<a class='dropdown-toggle arrow' data-toggle='dropdown' href='#'>Competitions <span class='glyphicon glyphicon-chevron-down '/></a>
<ul class='dropdown-menu mega-dropdown-menu'><!--megaMenu Wih 3 column start-->
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>France</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>Europe</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>INTERNATIONAL</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
</ul><!--megaMenu Wih 3 column End-->
</li>
<li><a href='#'>Live Matches</a></li>
<li><a href='#'>Mercato</a></li>
<li><a href='#'>Videos</a></li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
<h1 class='c-text'> Mega Menu Demo </h1>
<script type='text/javascript'>$(function () { $('.arrow').click(function () { $('.glyphicon-chevron-down').toggle(); }); }); </script>
</body>
<div id='searchformfix'>
<form action='/search' id='searchform'>
<input name='q' onblur='if (this.value == "") {this.value = "Text to Search...";}' onfocus='if (this.value == "Text to Search...") {this.value = "";}' type='text' value='Text to Search...'/>
</form>
</div>
<div class='clear'/>
<!-- secondary navigation menu end -->
<!-- content wrapper start -->
You can easily do this in bootstrap framework. Demo. This is just an example. You can follow this. If you Have Any question ask me in comment. I will explain for you. Good Luck.
[N.B: Don't use !important on css if you have custom css file for your project. I use !important here because overwrite the css in same page.]
/* CSS used here will be applied after bootstrap.css */
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
background: #f0f0f0;
background: white;
}
nav.navbar-default{
background: #35c353;
}
.navbar-nav>li>.dropdown-menu {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-default .navbar-nav>li>a {
color:white !important;
font-weight: bold;
}
.navbar-default .navbar-nav>li>a:hover{
color:black !important;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
border-color:#35c353;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
color: black !important;
background-color:#35c353 !important;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #20ff4f;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 550px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #20ff4f;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 548px;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight: bold;
background:#777;
}
h1.c-text{
text-align:center;}
/*Usefull class*/
.nopadding {
padding-left:0 !important;
padding-right:0 !important;
}
.nomargin{
margin-left:0;
margin-right:0;
}
#media (max-width:947px) and (min-width:769px) {
.navbar-nav {
display: inline-flex;
margin: 0;
}
.mega-dropdown-menu:before {
left: 495px !important;
}
.mega-dropdown-menu:after {
left: 495px !important;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- All links cdn's Before Body tag end -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>News</li>
<li>EUROPE</li>
<li>AFRICA</li>
<li>WORLDWIDE</li>
<li class="dropdown mega-dropdown">
Competitions <span class="glyphicon glyphicon-chevron-down "></span>
<ul class="dropdown-menu mega-dropdown-menu"><!--megaMenu Wih 3 column start-->
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">France</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">Europe</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">INTERNATIONAL</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
</ul><!--megaMenu Wih 3 column End-->
</li>
<li>Live Matches</li>
<li>Mercato</li>
<li>Videos</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav><!-- /.nav-End -->
<h1 class="c-text"> Mega Menu Demo </h1>
<!-- All Scripts Before Body tag end -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.arrow').click(function () {
$('.glyphicon-chevron-down').toggle();
});
});
</script>
</body>
Add this query this will display the navbar after click on the burger menu on mobile view(media screen 768)
#media only screen and (max-width:768px)
{
.navbar-nav{
display: block !important;
z-index: 1000;
position: absolute !important;
width: 100% ;
border: green !important;
background: #35c353 !important;}
}
my Fiddle : https://jsfiddle.net/atg5m6ym/6471/
i was trying to create a navigation bar with the active border below each navigation link, when the user hovers on it. but i want that border on the current item that was hovered. i want to remove that border from that other links. i was trying the code, but it seems my logic is not working.
my javascript
$('ul > li > a').mouseenter(function(){
$(this).find('div').addClass('activeItemNav').siblings('div').removeClass('activeItemNav');
});
You can use css :hover, you don't need jQuery for this:
ul li{
text-align:center;
}
a:hover > div{
height: 1px;
width: 36px;
border: 1px solid #fe3434;
margin-top: 12px;
margin: 10px auto;
}
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
HOME
<div></div>
</a>
</li>
<li>
<a href="#">
ABOUT
<div></div>
</a>
</li>
<li>
<a href="#">
TEAM
<div></div>
</a>
</li>
<li>
<a href="#">
SERVICES
<div></div>
</a>
</li>
<li>
<a href="#">
PORTFOLIO
<div></div>
</a>
</li>
<li>
<a href="#">
CONTACT
<div></div>
</a>
</li>
</ul>
Is this what you look for?
Updated fiddle
ul li:hover div {
height: 1px;
width: 36px;
border: 1px solid #fe3434;
margin-top: 12px;
margin: 10px auto;
}
ul li{
list-style-type: none;
text-align:center;
}
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
HOME
<div></div>
</a>
</li>
<li>
<a href="#">
ABOUT
<div></div>
</a>
</li>
<li>
<a href="#">
TEAM
<div></div>
</a>
</li>
<li>
<a href="#">
SERVICES
<div></div>
</a>
</li>
<li>
<a href="#">
PORTFOLIO
<div></div>
</a>
</li>
<li>
<a href="#">
CONTACT
<div></div>
</a>
</li>
</ul>
You could do this using CSS instead, and set the border as an ::after element. Then you can show this ::after only on hover as such: ul li:hover::after.
An ::after or ::before is a pseudo element in the targeted element.
This way you do not need the unnecessary div.
I have updated your fiddle: https://jsfiddle.net/atg5m6ym/6475/
This Help you :
<!DOCTYPE html>
<html>
<head>
<style>
.activeItemNav {
height: 1px;
width: 36px;
border: 1px solid #fe3434;
margin-top: 12px;
margin: 10px auto;
}
ul li{
text-align:center;
list-style-type: none;
}
</style>
</head>
<body>
<ul class="nav navbar-nav navbar-right">
<li>HOME<div></div></li>
<li>ABOUT<div></div></li>
<li>TEAM<div></div></li>
<li>SERVICES<div></div></li>
<li>PORTFOLIO<div></div></li>
<li>CONTACT<div></div></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul li a ").mouseenter(function(){
$("div",this).addClass("activeItemNav");
}).mouseleave(function(){
$("div",this).removeClass("activeItemNav");
})
})
</script>
</body>
</html>
I have some question:
How to make navbar text is in the left in Bootstrap?
I'd already make the dropdown menu with bootstrap and jquery-menu-aim. But my dropdown submenu is piled up. This what my goal is.
And this is what I've done..
Can you help me? Thanks in advance. I'm using bootstrap 3.3.4.
HTML file
<header>
<div class="branding">Logo
<h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"> Product
<ul class="dropdown-menu" role="menu">
<li class="search row-sm-3">
<input type="text" class="form-control" placeholder="Search" />
</li>
<li role="separator" class="divider"></li>
<li data-submenu-id="submenu-mobile"> Mobile Devices
<div id="submenu-mobile" class="popover">
<h3 class="popover-title">Mobile Devices</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Smartphones
</li>
<li>Tablets
</li>
<li>Other Phones
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-audio"> TV / Audio / Video
<div id="submenu-audio" class="popover">
<h3 class="popover-title">TV / Audio / Video</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Televisions
</li>
<li>Audio and Video
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-track-trace"> Cameras and Camcorders
<div id="submenu-track-trace" class="popover">
<h3 class="popover-title">Cameras and Camcorders</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Cameras
</li>
<li>Camcorders
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-it"> IT
<div id="submenu-it" class="popover">
<h3 class="popover-title">IT</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Monitor
</li>
<li>Printers
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="navbar-left">Apps
</li>
<li class="navbar-left">Support
</li>
</ul>
<ul class="nav navbar-nav navbar-right setting">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setting
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
My Profile</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
Messages</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
CSS file
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}
I'm using a Bootstrap Navbar that is right aligned using the pull-right class. When I add a dropdown to the navbar, that dropdown's sub-menu is also right aligned with it's parent which doesn't look good. How do I get it to be left aligned with the parent? I've tried adding the pull-left class just about everywhere I can think of, but doesn't seem to work. Ideas?
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
.menu {
font-size: 18px;
margin-top: 10px;
}
.menu_icon {
margin-top: 3px;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
</style>
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">My Brand</a>
<div class="nav-collapse">
<ul class="nav pull-right">
<li><a class="menu" href="index.php"><i class="icon-home icon-black menu_icon"></i> Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle menu" data-toggle="dropdown" href="#about">Dropdown <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li><a class="menu" href="#"><i class="icon-wrench icon-black menu_icon"></i> Link 1</a></li>
<li><a class="menu" href="#"><i class="icon-tag icon-black menu_icon"></i> Link 2</a></li>
<li><a class="menu" href="#"><i class="icon-envelope icon-black menu_icon"></i> Link 3</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</body>
</html>
You should add an ID (e.g. id=myId) to your <ul class="dropdown-menu"> and write something like this:
#myId {right: auto}
#myId::before {left:12px;right:auto}
#myId::after {left:13px;right:auto}
Those CSS rules resets the pull-right dropdown styles to the default values.
This worked for me. Have a look at this sample:
http://jsfiddle.net/RzMRA/3/