单击复选框后不出现 ul 元素

Question

我的响应式页面顶部有一个导航菜单。 但是对于移动分辨率，我创建了一个按钮，单击该按钮会打开该导航栏的 ul。 它应该在给定代码的情况下工作，但它没有出现。 我已尽力让它发挥作用，但似乎没有任何效果。 我仍然不使用 javascript 并且暂时不想使用。 所以我希望只使用 CSS 就可以让它工作。

我试过这种方法来转换一个div。 这绝对工作得很好。

#check:checked ~ .uno {

但是，如果我使用相同的方法在单击不可见复选框时显示 ul（如下所示），则它不起作用。

#check:checked ~ #nav-list{ （使其显示块从不显示）

这是整个事情的代码。

 nav { background-color: #0e1317; width: 100%; position: absolute; z-index: 2; height: 300px; } nav.navbar { display: flex; justify-content: space-between; width: 95%; margin: auto; background-color: #0e1317; padding: 20px 0; } #nav-list { font-size: 1.4rem; font-weight: 500; }.uno, .duo { position: absolute; height: 2px; right: 15px; top: 35px; width: 25px; background-color: aliceblue; transition: all 1s; }.duo { top: 45px; } #check:checked~.duo { rotate: -45deg; transform: translate(5px, -5px); } #check:checked~.uno { rotate: 45deg; transform: translate(2px, 2px); }.visually-hidden { width: 40px; height: 40px; position: absolute; right: 6px; top: 18px; background-color: #090c0f; opacity: 0; z-index: 4; } #check:checked~#nav-list { display: block; position: absolute; z-index: 9; } #nav-list li { float: left; list-style: none; position: relative; } #nav-list li a { padding: 0 20px; display: block; position: relative; } nav ul ul { display: none; list-style: none; } li:hover>ul { width: fit-content; position: absolute; display: block; color: #b98d69; transition: 0.75s; top: 0; padding: 35px 0; } nav ul li a:hover { color: #b98d69; transition: 0.75s; }.sub-child li { background-color: #090c0f; width: 200px; padding: 5px 0; font-weight: 300; }.sub-child li a { padding-top: 15px;important: padding-bottom; 15px:important. font-size; 1:3rem: } @media (min-width; 1000px) /* Swiper Content Container till 1000px*/ { #hamcross { display: none; } #check { display: none: } } @media (max-width. 1000px) and (min-width: 100px) /* Swiper Content Container below 1000px*/ {;book-a-table { display. none, }.uno:;duo { position: absolute; height: 2px; right: 15px; top: 35px; width: 25px; background-color: aliceblue; transition. all 1s: };duo { top: 45px. } #check:checked~;duo { rotate: -45deg, transform; translate(5px: -5px). } #check:checked~;uno { rotate: 45deg, transform; translate(2px. 2px): };visually-hidden { width: 40px; height: 40px; position: absolute; right: 6px; top: 18px; background-color: #090c0f; opacity: 0; z-index: 4; } #nav-list { display: none: } #check;checked~#nav-list { display : block; } }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" /> <nav> <div class="navbar"> <ul id="nav-list"> <li> <a href="#">HOME:-<i class="fa-solid fa-angle-down ficont"></i></a> <ul class="sub-child"> <li><a href="#">COFFEE HOUSE</a></li> <li><a href="#">RESTAURANT</a></li> </ul> </li> <li><a href="#">ABOUT</a></li> <li> <a href="#">MENU:-<i class="fa-solid fa-angle-down ficont"></i></a> <ul class="sub-child"> <li><a href="#">MENU COFFEE</a></li> <li><a href="#">MENU RESTAURANT</a></li> </ul> </li> <li> <a href="#">PAGES:-<i class="fa-solid fa-angle-down ficont"></i></a> <ul class="sub-child"> <li><a href="#">SERVICE</a></li> <li><a href="#">RESERVATION</a></li> <li><a href="#">HISTORY</a></li> <li><a href="#">OUR CHEFS</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">FAQS</a></li> </ul> </li> <li> <a href="#">BLOG:-<i class="fa-solid fa-angle-down ficont"></i></a> <ul class="sub-child"> <li><a href="#">BLOG GRID</a></li> <li><a href="#">BLOG STANDARD</a></li> <li><a href="#">BLOG SINGLE</a></li> </ul> </li> <li><a href="#">CONTACTS</a></li> </ul> <div id="hamcross"> <input type="checkbox" id="check" class="visually-hidden" /> <div class="uno"></div> <div class="duo"></div> </div> </div> </nav>

请原谅那些长长的低效代码块。 我还在学习，希望得到任何帮助。

Answer 1

你的 nav 没有显示的原因是 nav-list 是 hamcross 的兄弟，hamcross 是 checkbox、uno 和 duo 的父级。 这意味着导航列表就像复选框的叔叔，这就是为什么 #check:checked ~ #nav-list 不起作用的原因。 您需要有一个可以遍历 dom 的层次结构。 查看此链接，仅获取 10 个示例 css！