[英]Centering of dropdown-menu submenus
I was adapting a css
stylesheet for a dropdown-menu.我正在为下拉菜单调整
css
样式表。 I am having troubles with centering the boxes for the sub-menu.我在将子菜单的框居中时遇到了麻烦。 It currently looks like
目前看起来像
#nav{
list-style:none;
margin:0;
padding:120px 100px;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
left:-9999px;
margin:0;
padding:0;
text-align:center;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
background:#fff;
}
#nav ul a{
white-space:nowrap;
display:block;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
}
But I would like that the sub-boxes are centered with respect to the box on the higher level.但我希望子框相对于更高级别的框居中。 How Can I achieve that?
我怎样才能做到这一点?
li
s into relative containersli
放入相关容器中ul
s 50% within the newly-defined relative container and translate them -50%
of their own sizeul
s 50% 在新定义的相对容器中,并将它们平移-50%
的自身大小left:-9999px;
left:-9999px;
on nested ul
s and toggle display:
none
/ block
ul
和切换display:
none
/ block
#nav > li { position: relative; } #nav { list-style: none; margin: 0; padding: 20px 100px; text-align: center; } #nav li { position: relative; display: inline; } #nav a { display: inline-block; padding: 10px; } #nav ul { display: none; position: absolute; margin: 0; padding: 0; left: 50%; transform: translateX(-50%); } #nav ul li { display: block; } #nav li:hover ul { display: block; } #nav li:hover a {} #nav li:hover ul a { text-decoration: none; background: none; } #nav li:hover ul a:hover { background: #fff; } #nav ul a { white-space: nowrap; display: block; } a { color: #c00; text-decoration: none; font-weight: bold; }
<ul id="nav"> <li><a href="#">One</a> <ul> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> </ul> </li> <li><a href="#">Two</a> <ul> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> </ul> </li> <li><a href="#">Three</a> <ul> <li><a href="#">Sub One</a></li> <li><a href="#">Sub Two</a></li> </ul> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.