gpt4 book ai didi

html - 如何仅制作双复选框下拉导航菜单 html/css?

转载 作者:太空宇宙 更新时间:2023-11-04 07:27:34 24 4
gpt4 key购买 nike

我在通过伪复选框切换显示导航菜单及其子菜单时遇到了一些问题。我查看了一些指南并尝试了一些,但没有得到我想要的结果——打开复选框时菜单没有出现。

https://codepen.io/UnorthodoxThing/pen/paMBQB

HTML

    <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Natural Pasta</title>
<link rel="stylesheet" type="text/css" href="style-index.css">

<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Gloria+Hallelujah|Gorditas|Lobster|Nunito|Shadows+Into+Light|Varela+Round" rel="stylesheet">
<body>
<div class="wrapper">

<!-- Top Menu-->
<img class="top-logo" src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="220px" height="220px">

<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li>
<div class="dropdown-menu">
<input type="checkbox" id="A">
<label for="A">Menu</label>
<ul>
<li><a href="#">Pastas To Go</a></li>
<li><a href="#">Sauces To Go</a></li>
<li>
<div class="dropdown-readymeals">
<input type="checkbox" id="A-C">
<label for="A-C" style="font-size:10pt;">Ready Meals...</label>
<ul>
<li><a href="#">Arancinis</a></li>
<li style="font-size:10pt;"><a href="#">Garlic Bread</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#">Find Us</a></li>
</ul>

</div>
</div>
<div class="banner">
<!--
<img src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="300px" height="300px">
-->
</div>

<div class="body-content">

<div class="specials-title"><h3>- SPECIALISING IN -</h3></div>
<div class="specials-content">

<div class="specials-boxes"><div class="specials-text"><h3>Freshly Hand Made Pastas</h3></div><div class="specials-img"><img src="freshlyhandmadepastas-1.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Pasta Meals</h3></div><div class="specials-img"><img src="gourmetpastameals-3.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Traditional Home Made Sauces</h3></div><div class="specials-img"><img src="traditionalhomemadesauces.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Variety of Filled Pastas</h3></div><div class="specials-img"><img src="varietyoffilledpastas-1.jpeg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Home Made Soups</h3></div><div class="specials-img"><img src="homemadesoups-2.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Rolls</h3></div><div class="specials-img"><img src="gourmetroles-1.jpg"></div></div>

</div>
</div>

<div class="footer">
<!--<div class="grid">-->
<div class="upper-footer-container">

<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Follow Us</h4>
<ul class="social-networks">
<li class="flex-items"><a href="#"><img src="fb-icon.png"></img></a></li>
<li class="flex-items"><a href="https://www.instagram.com/naturalpastasydney/?hl=en" target="_blank"><img src="instagram-icon.png"></img></a></div></li>
</ul>

<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Opening Hours</h4> <br>
<ul class="contact-details">
<li>Monday: 9am-5:30pm</li>
<li>Tuesday: 9am-5:30pm</li>
<li>Wednesday: 9am-5:30pm</li>
<li>Thursday: 9am-9pm</li>
<li>Friday: 9am-5:30pm</li>
<li>Saturday: 9am-5pm</li>
<li>Sunday: 10am-5pm</li>
</ul>
</div>

<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Contact Us</h4> <br>
<ul class="contact-details">
<li>Add.: 152 Bunnerong Rd, Eastgardens NSW 2036</li>
<li>No.: (02) 8347 1988</li>
<li>Email</li>
<br>
<li>Catering Available</li>
</ul>
</div>
</div>
<div class="lower-footer-container">NaturalPasta &copy; 2018</div>
<!--/div>-->
</div>
</body>
</html>

CSS

* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 1px solid red;
}

html {
height: 100%;
}

body {
min-height: 100%;
min-width: 100%;
}

.wrapper {
min-height: 100%;
width: 100%;
position: relative;
background: url("img/pasta-food-wallpaper-4.jpg") no-repeat;
background-size: 1350px 670px;
background-position: center;
background-attachment: fixed;
}

body {
height: 100%;
background: #ddd;
}

.nav {
height: 204px;
width: 100%;
margin: 0 auto; /* Centers navigation */
text-align: center;
text-transform: uppercase;
background: black;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-family: 'Gloria Hallelujah', cursive;
color: #ee6f20;
font-weight: bold;
font-size: 13pt;
}

.nav ul li {
height: 41px;
width: 125px;
background: #000;
}

.nav .dropdown-menu ul, .dropdown-menu .readymeals ul {
background: #000;
}

.nav a {
text-decoration: none;
color: #ee6f20;
}

.dropdown-menu ul li, .dropdown-readymeals ul li {
display: none;
}

.dropdown-menu {
position: relative;
display: inline-block;
}

.dropdown-menu ul {
position: absolute;
display: none;
}

input[type=checkbox] {
display: none;
}

input#A:checked ~ .dropdown-menu ul li {
display: block;
max-height: 100%;
}

input#A-C[type=checkbox]:checked ~ .dropdown-readymeals ul li {
display: block;
}

/*tbc */

.dropdown-menu ul li {
font-size: 11pt;
background: #000;
}

.nav ul {
list-style: none;
display: inherit;
}

.nav ul li, .nav ul ul, .nav ul ul li, .nav label {
cursor: pointer;
}

.top-logo {
margin: auto 0;
position: absolute;
left: 42%;
margin-top: -15px;
}

.body-content {
background-color: #000;

}

.specials-content {
position: relative;
display: flex;
flex-wrap: wrap;
color: orange;
justify-content: center;
}

.specials-title h3 {
width: 100%;
display: block;
margin-top: 0px;
padding-top: 75px;
color: #ee6f20;

}

.specials-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 35px 75px;
padding: 50px 100px;
/*adjust margin height-width*/
}

.specials-text, .specials-img {
padding: 35px;
display: flex;
align-items: center;

}

.specials-text h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #ee6f20;
}

.specials-img img {
width: 300px;
height: 300px;
border-radius: 25px 5px 25px 5px;
}

h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #eee;
}

.footer {
bottom: 280px;
padding: 150px;
width: 100%;
text-align: center;
background: rgb(0,0,0);
color: white;
font-family: sans-serif;
display: flex;
flex-flow: wrap;
}

.upper-footer-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}

.footer-container-1 {
width: 250px;
display: block;
margin: 25px;
}

.social-networks {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-around;

}

.flex-items a img {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 25px;
}

.contact-details {
list-style: none;
font-family: 'ubuntu', sans-serif;
}

.lower-footer-container {
width: 100%;
justify-content: center;
display: flex;
flex-wrap: wrap;
margin-top: 45px;
}

与html有关吗? CSS?什么会干扰显示菜单及其子菜单? :/

从长远来看非常感谢。

(附:我在这里使用了其他源图像,尽管这不应该与我要解决的问题冲突。)

最佳答案

在您的代码中 <ul> tag 是选择器 input#A 的兄弟

enter image description here

但是你写的css代码好像.dropdown-menu是选择器 input#A 的兄弟.这就是为什么您的代码在这个特定点不起作用。

enter image description here

你必须瞄准 <ul>什么时候input#A被点击。 <ul>input#A 的 sibling .

修改第81行的css代码如下

input#A:checked ~ ul li {
display: block;
max-height: 100%;
}

此代码更改将使您的 sub-menu单击 Menu 时可见如下图所示。

enter image description here

我只是针对这个特定点提到了修复。在您的代码笔中,我可以看到您在其他几个地方犯了同样的错误。你必须修复它。

希望这对您有所帮助。

关于html - 如何仅制作双复选框下拉导航菜单 html/css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49747433/

24 4 0