Is there a way to center the drop down in the code snippet below, right under its corresponding link? I plan on using jquery for the show/hide functionality, but I'm struggling to get it to align properly under the letter r, which will eventually be a glyphicon.
<!DOCTYPE html>
<html>
<head>
<title> New Document </title>
<style type="text/css">
.main{
width:300px;
background:cyan;
}
.right{
float:right;
position: relative;
white-space: nowrap;
}
ul {
list-style:none outside none;
padding:0px;
margin:0;
position:absolute;
right: 0;
}
</style>
</head>
<body>
<div class="main">
Left
<div class="right">
<span>R</span>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</div>
</body>
</html>