I'm putting up a site on Tumblr for my online store. Thing is, I can't get the dropdown menu to show up when I put "overflow:hidden" on the #topmenu part. When I set it to "overflow:visible", I get a huge chunk of white space to the right of the webpage. The white space isn't obvious when I'm using my laptop but it is when I use my phone.
I've tried changing the value of the z-index but it still won't work. I want to be able to have "overflow:visible" while not getting the white space at the right side of the page.
Please help me figure out what's wrong with the code and find a solution. I think there's something wrong with the width of the menu. But then when I change the width, all the links are pushed to the left side of the page.
Thank you in advance!
#topmenu {
font-family: 'Montserrat', sans-serif;
float:left;
width:100%;
background:transparent;
overflow:visible;
z-index:99999;
position:relative;
}
#topmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#topmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:3pt;
position:relative;
right:50%;
}
#topmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:4px 11px;
background: transparent;
color: #222222;
font-size:10px;
text-decoration:none;
line-height:2em;
letter-spacing: 3px;
}
#topmenu ul li a:hover {
background: none;
color: #b492a8;
}
#topmenu ul li ul.dropdown{
min-width: 125px;
max-width: 125px;
background: #ffffff;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
#topmenu ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
padding:0px 0px 0px 50px;
}
#topmenu ul li ul.dropdown li{
display: block;
}
<div id="topmenu">
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/tagged/products">SHOP</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/orderform">ORDER FORM</a></li>
<li><a href="#">CUSTOMERS</a>
<ul class="dropdown">
<li><a href="/tagged/ootd">OOTD</a></li>
<li><a href="/tagged/feedback">Feedbacks</a></li>
</ul>
</li>
<li><a href="/about">ABOUT</a></li>
</ul>
</div>
EDIT:
I tried using @gopalraju's code and it eliminated the white space while showing the dropdown menu. (Thank you gopalraju!)
How do I push the whole menu to the center of the page?
And how do I put the dropdown menu right under the word "Customers"?