parkerturtle
New Member
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:\[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="http://stackoverflow.com/questions/14427984/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="http://stackoverflow.com/questions/14427984/css/bootstrap-responsive.css"> <script src="http://stackoverflow.com/questions/14427984/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="http://stackoverflow.com/questions/14427984/#">My Brand</a> <div class="nav-collapse"> <ul class="nav pull-right"> <li><a class="menu" href="http://stackoverflow.com/questions/14427984/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="http://stackoverflow.com/questions/14427984/#about">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="http://stackoverflow.com/questions/14427984/#">Action</a></li> <li><a href="http://stackoverflow.com/questions/14427984/#">Another action</a></li> <li><a href="http://stackoverflow.com/questions/14427984/#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="http://stackoverflow.com/questions/14427984/#">Separated link</a></li> <li><a href="http://stackoverflow.com/questions/14427984/#">One more separated link</a></li> </ul> </li> <li><a class="menu" href="http://stackoverflow.com/questions/14427984/#"><i class="icon-wrench icon-black menu_icon"></i> Link 1</a></li> <li><a class="menu" href="http://stackoverflow.com/questions/14427984/#"><i class="icon-tag icon-black menu_icon"></i> Link 2</a></li> <li><a class="menu" href="http://stackoverflow.com/questions/14427984/#"><i class="icon-envelope icon-black menu_icon"></i> Link 3</a></li> </ul> </div> <!--/.nav-collapse --> </div> </div></div></body></html>\[/code\]