gpt4 book ai didi

html - 导航子菜单 - 出现在左侧

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

在发布这个之后,我成功地得到了一个出现在右侧的子菜单方法:Navigation submenu creates white space

我现在的问题是我希望屏幕最右侧的子菜单出现在初始下拉菜单的左侧。我想我可以使用我必须通过添加 position: relative; 使它们出现在右边的相同代码; left: -350px 或其他使其显示在左侧的东西。但这实际上造成了我之前遇到的相同空白问题。

可能有一个简单的解决方案,但我肯定想不出来。

.dropdown {
position: relative;
display: inline-block;
position: absolute;
right: 180px;
}

.dropdown2 {
position: relative;
}

.dropdownsub {
position: absolute;
display: hidden;
background: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: 5px;
font-size: 18px;
letter-spacing: 0px;
min-width: 180px;
}

.dropdown-subcontent {
display: none;
position: absolute;
left: 100%;
top: 0;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
font-size: 18px;
letter-spacing: 0px;
min-width: 180px;
background: orange;
}

@media (max-width: 1086px) {
.dropdown-content {
font-size: 17px;
}
}

.dropdown-content a {
color: black;
padding: 4px 8px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #cccccc;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown2:hover .dropdown-subcontent {
display: inline-block;
}

.dropdownsub:hover .dropdown-subcontent {
display: none;
}

.dropbtn:hover {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
<title>Accounts Receivable</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

</head>

<body bgcolor="#cccccc">
<div class='dropdown'>
<button class='dropbtn'>MENU<i class='fas fa-chevron-down'></i></button>
<div class='dropdown-content'>
<a href='#'>Option 1</a>
<div class='dropdown2'>
<a href='#'>Submenu ></a>
<div class='dropdown-subcontent'>
<a href='#'>Submenu Option 1</a>
<a href='#'>Submenu Option 2</a>
<a href='#'>Submenu Option 3</a>
</div>
</div>
<a href='#'>Option 3</a>
</div>
</div>

最佳答案

.dropdown-subcontent {
right:100%;
}

这样做而不是 left:100%;

关于html - 导航子菜单 - 出现在左侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53102893/

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