How to change submenu appear to left side instead of right - html

Question

I have a menu with submenu that open to the right instead of the left. You can see that here
Here is the html code:
<nav id="menu">
<ul class="parent-menu">
<li>
Home & Kitchen
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>
Electronics
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>
Clothing
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>
Cars & Motorbikes
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>
Books
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>
Support
<ul>
<li>Contact Us</li>
<li>Forum</li>
<li>Deliveries</li>
<li>T&C</li>
</ul>
</li>
</ul>
</nav>
and the css:
p,
ul,
li,
div,
nav {
padding: 0;
margin: 0;
}
#menu {
overflow: auto;
position: relative;
z-index: 2;
}
.parent-menu {
background-color: #0c8fff;
min-width: 200px;
float: left;
}
#menu ul {
list-style-type: none;
}
#menu ul li a {
padding: 10px 15px;
display: block;
color: #fff;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #007ee9;
}
#menu ul li:hover > ul {
left: 200px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul {
position: absolute;
background-color: #333;
top: 0;
left: -200px;
min-width: 200px;
z-index: -1;
height: 100%;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#menu ul li > ul li a:hover {
background-color: #2e2e2e;
}
I would like the submenu appear to the left
can you please assist me to solve this?

Answer 1

just change all the "left" css rules to be "right" and float the main menu to the right instead of the left.
p,
ul,
li,
div,
nav {
padding: 0;
margin: 0;
}
#menu {
overflow: auto;
position: relative;
z-index: 2;
}
.parent-menu {
background-color: #0c8fff;
min-width: 200px;
float: right;
}
#menu ul {
list-style-type: none;
}
#menu ul li a {
padding: 10px 15px;
display: block;
color: #fff;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #007ee9;
}
#menu ul li:hover > ul {
left: 200px;
-webkit-transition: right 200ms ease-in;
-moz-transition: right 200ms ease-in;
-ms-transition: right 200ms ease-in;
transition: right 200ms ease-in;
}
#menu ul li > ul {
position: absolute;
background-color: #333;
top: 0;
right: -200px;
min-width: 200px;
z-index: -1;
height: 100%;
-webkit-transition: right 200ms ease-in;
-moz-transition: right 200ms ease-in;
-ms-transition: right 200ms ease-in;
transition: right 200ms ease-in;
}
#menu ul li > ul li a:hover {
background-color: #2e2e2e;
}
I just quickly went through the css and did that in your fiddle and it put the main menu on the right and the submenu to the left of the main menu.