我遇到了麻烦的问题(水平地)我的ul#菜单位于页面中间。这一切都正常运作,正如预期的那样,我只是在集中处理问题。
这是CSS:
ul#menu, ul#menu ul.sub-menu {
padding: 0px;
margin: 0px;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
padding: 0px;
display: inline-block;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif
font-weight: bold;
font-size: 17px;
}
ul#menu li a {
padding: 15px;
}
ul#menu li {
position: relative;
}
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 46px;
left: 15px;
width: 150px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu li ul.sub-menu li a {
background-color:grey;
opacity:1;
height:20px;
border-bottom-style:solid;
border-bottom-color:#30F;
border-bottom-width:2px;
padding:5px;
font-weight:bold;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 12px;
}
#menucontainer {
position:absolute;
width:700px;
top:158px;
margin-left: auto;
margin-right: auto;
opacity:0.8;
z-index:20;
}
这是HTML:
<div id="menucontainer">
<ul id="menu">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="http://games.engagearcade.com">Games</a>
<ul class="sub-menu">
<li>
<a href="http://descent.engagearcade.com">>> Descent</a>
</li>
</ul>
</li>
<li>
<a href="http://prizes.engagearcade.com">Prizes</a>
</li>
<li>
<a href="http://ladder.engagearcade.com">Ladder</a>
</li>
<li>
<a href="http://community.engagearcade.com">Community</a>
<ul class="sub-menu">
<li>
<a href="http://community.engagearcade.com">>> Submissions</a>
</li>
<li>
<a href="http://support.engagearcade.com">>> Support/Help</a>
</li>
</ul>
</li>
<li>
<a href="http://forums.engagearcade.com">Forums</a>
</li>
<li>
<a href="http://about.engagearcade.com">About Us</a>
<ul class="sub-menu">
<li>
<a href="http://about.engagearcade.com">>> Engage Arcade</a>
</li>
<li>
<a href="http://involved.engagearcade.com">>> Those Involved</a>
</li>
</ul>
</li>
</ul>
</div>
对于大块代码感到抱歉,但我不确切知道哪些部分与帮助解决问题有关。要寻找的主要内容是menucontainer。
欢呼任何建议。
答案 0 :(得分:0)
答案 1 :(得分:0)
这是一个简单的修复...你非常接近它。
#menucontainer
position:absolute;
width:700px;
top:158px;
margin-left: auto;
margin-right: auto;
opacity:0.8;
z-index:20;
到
#menucontainer {
position:relative;
width:700px;
top:158px;
margin: 0 auto;
opacity:0.8;
z-index:20;
}
您需要#menucontainer相对定位。