gpt4 book ai didi

html - 当水平子菜单超出父菜单的边缘时,它应该贴在边缘

转载 作者:太空宇宙 更新时间:2023-11-04 14:13:49 25 4
gpt4 key购买 nike

html 部分-------------------------------------------- ------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<ul class="main">
<li><a href="javascript:void(0)">one</a></li>
<li class="parent">
<a href="javascript:void(0)">two</a>
<ul class="sub">
<li><a href="javascript:void(0)">sub one</a></li>
<li><a href="javascript:void(0)">sub two</a></li>
<li><a href="javascript:void(0)">sub three</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">three</a>
<ul class="sub">
<li><a href="javascript:void(0)">sub one</a></li>
<li><a href="javascript:void(0)">sub two</a></li>
<li><a href="javascript:void(0)">sub three</a></li>
</ul>
</li>

<li><a href="javascript:void(0)">four</a>
<ul class="sub">
<li><a href="javascript:void(0)">sub one</a></li>
<li><a href="javascript:void(0)">sub two</a></li>
<li><a href="javascript:void(0)">sub three</a></li>
</ul>
</li>
</ul>

样式部分---------------------------------------- ------------------------------

<style>

ul, li {
margin:0;
padding:0;
}
.main > li {
display:inline-block;
float:left;
position:relative;
padding:1px;
}
.main > li > a {
display:block;
padding:10px 20px;
}
.sub {
display:none;
position:absolute;
width:300px;
margin-left:-1px;
margin-top: -1px;
}
.sub li {
display:block;
float:left;
border:1px solid #000;
border-left:0;
border-right:0;
}
.sub li:first-child {
border-left:1px solid #000;
}
.sub li:last-child {
border-right:1px solid #000;
}
.sub a {
display:block;
padding:10px;
}
.main > li:hover .sub {
display:block !important;
}
.main > li:hover {
padding:0;
border:1px solid #000;
}
.parent:hover {
border-bottom:1px solid #fff !important;
}
.parent a {
border-bottom:1px solid #fff !important;
position:relative;
z-index:10;
}

</style>

</body>
</html>

代码结束---------------------------------------- ------------------------------ http://jsfiddle.net/SLDmd/描述图片,留在第一条评论

最佳答案

DEMO

将类添加到第三个和第四个的子菜单:

<ul class="sub three">
<ul class="sub four">

相应地为它们修改margin-left:

.sub.three {
margin-left:-141px;
}
.sub.four {
margin-left:-147px;
}

关于html - 当水平子菜单超出父菜单的边缘时,它应该贴在边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20524415/

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