I've encountered an issue with the native dropdown menu in Wordpress. The menu is dropping elements on the left side, but I need them to appear on the right side. Below is the CSS code I'm currently using:
div#navigation {
float: left;
position: relative;
left: 50%;
margin-bottom: 35px;
}
select.mobile_menu { display: none; }
div#navigation ul {
margin: 0;
padding: 0;
float: left;
position: relative;
left: -50%;
}
div#navigation ul li {
float: left;
position: relative;
margin: 0px;
margin-left: 50px;
padding-top: 12px;
padding-bottom: 10px;
font-family: 'Vollkorn', 'Times New Roman', serif;
}
div#navigation ul li:first-child { margin-left: 0px; }
div#navigation ul li ul.sub-menu {
display: none;
float: none;
position: absolute;
top: 50px;
z-index: 10000;
background: #F8F8F8;
border: 1px solid #CCC;
border-bottom: 0px;
}
div#navigation ul li:hover ul.sub-menu { display: block; }
div#navigation ul li ul.sub-menu li {
position: relative;
float: none;
margin: 0px;
border-bottom: 1px solid #CCC;
font-size: 14px;
}
div#navigation ul li ul.sub-menu li a {
display: block;
width: 200px;
height: 23px;
line-height: 23px;
text-align: center;
}
div#navigation ul li ul.sub-menu li ul.sub-menu {
display: none;
position: absolute;
left: -202px;
}
div#navigation ul li ul.sub-menu li:hover ul.sub-menu {
display: block;
top: -1px;
}
div#navigation ul li ul.sub-menu li ul.sub-menu li ul.sub-menu { display: none; }
div#navigation ul li ul.sub-menu li ul.sub-menu li:hover ul.sub-menu {
display: block;
top: -1px;
}
This is my personal website and the issue is visible in the screenshot. What changes should I make in the CSS to correct this problem?