我在Tumblr上为我的网上商店建立了一个网站。事情是,当我把"溢出:隐藏"时,我无法显示下拉菜单。在#topmenu部分。当我将它设置为&溢出:可见"时,我在网页右侧获得了大量的空白区域。当我使用笔记本电脑时,白色空间并不明显,但是当我使用手机时,它就是显而易见的。
我已尝试更改z-index的值,但它仍然无法正常工作。我希望能够有#溢出:可见"而没有得到页面右侧的空白区域。
请帮我弄清楚代码有什么问题并找到解决方案。我认为菜单的宽度有问题。但是当我改变宽度时,所有链接都被推到了页面的左侧。
提前谢谢!
#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>
&#13;
修改
我尝试使用@ gopalraju的代码,它在显示下拉菜单时消除了空格。 (谢谢gopalraju!)
如何将整个菜单推到页面中心?
如何将下拉菜单放在“#34;客户&#34;”这个词的正下方?
答案 0 :(得分: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>