gpt4 book ai didi

html - 将子导航居中对齐到父级

转载 作者:太空宇宙 更新时间:2023-11-03 20:01:44 25 4
gpt4 key购买 nike

如何使子导航菜单居中于父项?

对于每个导航菜单,我希望子导航菜单居中。

这是我尝试过的:JSFIDDLE

这是我的 HTML:

<ul class="nav">
<li>
<a href="#">Lorem Ipsum</a>
<ul class="sub-nav">
<li>
<a href="#">Sub Nav 1</a>
</li>
<li>
<a href="#">Sub Nav 2</a>
</li>
<li>
<a href="#">Sub Nav 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Lorem</a>
<ul class="sub-nav">
<li>
<a href="#">Sub Nav 1</a>
</li>
<li>
<a href="#">Sub Nav 2</a>
</li>
<li>
<a href="#">Sub Nav 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Sum</a>
<ul class="sub-nav">
<li>
<a href="#">Sub Nav 1</a>
</li>
<li>
<a href="#">Sub Nav 2</a>
</li>
<li>
<a href="#">Sub Nav 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Lorem Lorem Ipsum</a>
<ul class="sub-nav">
<li>
<a href="#">Sub Nav 1</a>
</li>
<li>
<a href="#">Sub Nav 2</a>
</li>
<li>
<a href="#">Sub Nav 3</a>
</li>
</ul>
</li>
</ul>​

CSS:

.nav {
list-style-type: none;
margin: 0;
padding: 0;
}

.nav li {
float: left;
margin: 0 10px 0 0;
position: relative;
}

.nav li:hover .sub-nav {
display: block;
}

.nav li .sub-nav {
margin: 0;
padding: 0;
width: 120px;
position: absolute;
z-index: 500;
left: 0;
top: 32px;
display: none;
background: red;
}

.nav li .sub-nav li {
float: none;
text-align: center;
}

最佳答案

从子导航的中心点减去第一个导航的中心点,并将其用作子导航的左侧位置

http://jsfiddle.net/XzqS4/10/

$(".nav > li > a").hover(function(e){
var $el = $(this),
elc = $el.width()/2,
$subnav = $el.parent().find('.sub-nav'),
subc = $subnav.width()/2;

$subnav.css({ left: -(subc-elc)+'px' });
});

关于html - 将子导航居中对齐到父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13388433/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com