下拉菜单不显示？设置为 overflow:visible 时右侧显示白色 space

Question

我正在为我的在线商店在 Tumblr 上建立一个网站。问题是，当我将 "overflow:hidden" 放在 #topmenu 部分时，我无法显示下拉菜单。当我将它设置为 "overflow:visible" 时，我会在网页右侧看到一大块白色 space。白色 space 在我使用笔记本电脑时并不明显，但在我使用 phone.

时却很明显

我试过更改 z-index 的值，但仍然无效。我希望能够 "overflow:visible" 而不是页面右侧的白色 space。

请帮我找出代码有什么问题并找到解决方案。我认为菜单的宽度有问题。但是当我改变宽度时，所有链接都被推到页面的左侧。

提前致谢！

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

编辑：

我尝试使用@gopalraju 的代码，它在显示下拉菜单时消除了白色 space。（谢谢你 gopalraju！）

如何将整个菜单推到页面中央？

以及如何将下拉菜单放在 "Customers" 一词的正下方？

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

下拉菜单不显示？设置为 overflow:visible 时右侧显示白色 space

Dropdown Menu not showing? White space showing on right side when set to overflow:visible

html

css

hidden

overflow