Dropdown menu not showing? Space showing right side on overflow: visible
I host a Tumblr site for my online store. The thing is, I cannot open the dropdown menu when I put "overflow: hidden" in 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 gap is not obvious when I use my laptop, but when I use my phone.
I tried changing the z-index value, but it still doesn't work. I want to have "overflow: visible" without getting the space on the right side of the page.
Please help me figure out what is wrong with the code and find a solution. I think there is something wrong with the menu width. But then when I change the width, all links move 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 by showing the dropdown menu. (Thank you, gopalraya!)
How to make all menus centered on the page?
And how can I place the dropdown menu under the word "Customers"?
source to share
#topmenu {
font-family: 'Montserrat', sans-serif;
float:left;
width:100%;
background:transparent;
overflow:visible;
z-index:99999;
position:relative;
}
#topmenu ul {
clear:left;
list-style:none;
margin:0;
padding:0;
position:relative;
display:table;
margin:0 auto;
text-align:center;
}
#topmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:3pt;
position:relative;
}
#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 */
}
#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>
source to share