下拉菜单没有显示？设置为溢出时右侧显示的空白区域：可见

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.

我在Tumblr建立了一个网站,用于我的在线商店。事实是,当我在#topmenu部分放置“overflow:hidden”时,我无法显示下拉菜单。当我将其设置为“溢出:可见”时,我在网页右侧获得了大量的空白区域。当我使用笔记本电脑时,白色空间并不明显,但是当我使用手机时。

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.

我试过改变z-index的值,但它仍然无法正常工作。我希望能够有“溢出:可见”而不会在页面右侧获得空白区域。

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!)

我尝试使用@ gopalraju的代码,它在显示下拉菜单时消除了空白区域。 (谢谢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"?

如何将下拉菜单放在“客户”一词下面?

1 个解决方案

#1

#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>