如何制作双重复选框下拉导航菜单html / css？

时间：2018-04-10 07:07:36

标签： html css css3

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

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？什么可能干扰显示菜单及其子菜单？ ：/

从长远来看，我们非常感激。

（P.S。我在这里使用了其他源图像，但这不应该与我试图解决的问题相冲突。）

1 个答案:

答案 0 :(得分：1)

在您的代码中，<ul>标记是选择器input#A

的兄弟

enter image description here

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

enter image description here

点击<ul>时，您必须定位input#A。 <ul>是input#A的兄弟姐妹。

更改第81行的css代码，如下所示

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

此代码更改会在您点击sub-menu时显示Menu，如下图所示。

enter image description here

我只提到这个特定点的修复。在你的codepen中，我可以看到你在其他几个地方犯了同样的错误。你必须解决它。

希望这会有所帮助。

相关问题
最新问题