This is the css of a navigation bar I've made:
header{
width: 85%;
display: block;
margin-left: auto;
margin-right: auto;}
#nav{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #6E6E6E;
border-radius: 10px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;}
#nav li{
display: inline;
float: left;
position: relative;}
#nav li a:link, #nav li a:visited{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFF;
border-right: 2px solid #FFF;
font-family: sans-serif;
font-size: 2.5em;}
#nav li a:hover, #nav li a:active{
background-color: #454545;}
#nav_edge:hover, #nav_left:active{
background-color: #454545;
border-bottom-left-radius: 10px;
border-top-left-radius: 50px;}
#nav li ul{
position: absolute;
left: -9999px;
white-space: nowrap;
list-style: none;}
#nav li ul li a:link, #nav li ul li a:visited{
background-color: #6E6E6E;
border-top: 2px solid #FFF;}
#nav li ul li a:hover{
background-color: #454545;}
#nav li:hover ul{
left: 0em;
margin-left: -40px;}
How would I go about having a menu "pop up" left of the previously dropped menu when I hover over "about the product"?
Here's the header of the html:
<header>
<ul id="nav">
<li><a id="nav_edge" href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">About the product</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
<li>
<a href="#">Contact</a>
<ul>
<li><a href="mailto:html@troll.com">Email</a></li>
</ul>
</li>
<li><a href="#">Store</a></li>
</ul>
</header>