How to change side and direction arrow in dropdown-submenu? - css

Question

I create menu with dropdown-submenu.
.dropdown-menu {
float:left;
}
.left-submenu {
float: none;
}
.left-submenu > .dropdown-menu {
border-radius: 6px 0px 6px 6px;
left: auto;
margin-left: 10px;
right: 98%;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something that is a really really really long string here</a></li>
<li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">Try left</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">shorter things</a></li>
<li><a tabindex="-1" href="#">shorter things</a></li>
<li><a tabindex="-1" href="#">shorter things</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">More else</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
How to change side and direction arrow in dropdown-submenu "Try left"?
Demo here http://jsfiddle.net/5BUXu/20/
p.s. Want to get same result on picture

Answer 1

You just need to 'flip the script'. The arrow is in an :after in the bootstrap CSS, you need to rewrite that, flip all that makes it appear right, like this:
.dropdown-submenu>a:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #cccccc;
margin-top: 5px;
margin-left: -10px;
}
JSFiddle
So the float is now left instead of right, the border-right-width is now 5px instead of the border-left-width, and the margin-right is now margin-left.
For one item to have a left-arrow and one item to have a right arrow you either need to add a class or when you know the amount of items is fixed, you can work with nth-child selector. Like this:
With class added
<li class="dropdown-submenu right-submenu"> <a tabindex="-1" href="#">
.dropdown-submenu.right-submenu>a:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #cccccc;
margin-top: 5px;
margin-left: -10px;
}
With nth-child selector
.dropdown-submenu:nth-child(4)>a:after {
display: block;
content: " ";
float: left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 5px 5px 0;
border-right-color: #cccccc;
margin-top: 5px;
margin-left: -10px;
}