如何在使用css的時候顯示一個子菜單

我正在使用教程構建一個菜單，我已經通過添加了下拉子菜單來展開它，當你將鼠標懸停在主菜單的項目上時，但當我懸停時在菜單項上，而不僅僅是該子菜單下降，所有子菜單下降（但顯示爲空）。如何在使用css的時候顯示一個子菜單

請參閱以下內容：

<body> 

    <div class="header"> 
      <h1>Basics of Web Design</h1> 

      <div class="nav"> 
       <a href="#" class="hamburger"> 
        <div class="line"></div> 
        <div class="line"></div> 
        <div class="line"></div> 
       </a> 
       <ul class="clearfix menu"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">HTML</a> 
         <ul class="submenu"> 
          <li><a href="#">Introduction</a></li> 
          <li><a href="#">sub heading 2</a></li> 
          <li><a href="#">sub heading 3</a></li> 
          <li><a href="#">sub heading 4</a></li> 
          <li><a href="#">sub heading 5</a></li> 
          <li><a href="#">sub heading 6</a></li> 
         </ul> 
        </li> 
        <li><a href="#">CSS</a> 
         <ul class="submenu"> 
          <li><a href="#">Introduction</a></li> 
          <li><a href="#">sub heading 2</a></li> 
          <li><a href="#">sub heading 3</a></li> 
         </ul> 
        </li> 
        <li><a href="#">JavScript</a> 

        </li> 
        <li><a href="#">Aesthetics</a> 

        </li> 
       </ul> 
      </div> 
     </div> 

    </body> 
    </html>

CSS：

/* resets everything */ 
*, *:before, *:after { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box 
} 
.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
html, body { 
    height: 100%; 
    background-image: url(../images/bg-tile.png); 
    background-repeat: repeat; 
} 
body { 
    font: 1em'Roboto', sans-serif; 
    color: #555; 
    background-color: #fff; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
ul { 
    list-style: none; 
    max-width: 900px; 
    margin: 0 auto; 
    border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    background: inherit; 
} 

h1 { 
    padding: 30px 0; 
    font: 1.5em'Open Sans', sans-serif; 
    text-align: center; 
} 
.nav { 
    height: 3.6em; 
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    background-color: #f5f5f5; 
    /* adds box shadow */ 
    -webkit-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
    -moz-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
    box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
} 

ul a { 
    display: block; 
    padding: 20px; 
    padding-right: 0 !important; 
    /* important overrides media queries */ 
    font-size: 13px; 
    font-weight: bold; 
    text-align: center; 
    color: #aaa; 
    cursor: pointer; 
    text-decoration: none; 
} 
ul a:hover { 
    background: #eee; 
} 
.nav li { 
    float: left; 
    width: 20%; 
    border-right: 1px solid #ddd; 
    position: relative; 
} 
.nav li > ul li{ 
    float: left; 
    position: relative; 
} 
.nav li:last-child { 
    border-right: none; 
} 
ul.submenu { 
    display: none; 
} 
ul.submenu li { 
    width: 100%; 
    border-right: none; 
} 
ul.submenu li a { 
    width: 100%; 
    padding: 6px; 
} 
ul.menu > li:hover ul.submenu { 
    float: none; 
    display: block; 
} 
@media only screen and (max-width: 600px) { 
    .hamburger { 
     padding: 15px; 
     display: block; 
    } 
    .line { 
     border-bottom: 4px solid #bbb; 
     width: 35px; 
     margin-bottom: 6px; 
    } 
    .line:last-child { 
     margin-bottom: 0; 
    } 
    .nav li { 
     width: 100%; 
    } 
    .menu { 
     height: 0; 
     overflow: hidden; 
     transition: height 0.3s linear; 
     -webkit-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
     -moz-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
     box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
    } 
    .slide-down { 
     height: 275px; 
    } 
}

的js爲resposive菜單：

$('.hamburger').on('click', function(e) { 
    // Prevent link from jumping to the top of the page 
    e.preventDefault(); 
    // If menu is already showing, slide it up. Otherwise, slide it down. 
    $('.menu').toggleClass('slide-down'); 
});

來源

2015-11-07 Shiny_and_Chrome

製造這些chass在你的CSS，並希望它會起作用。

/* resets everything */ 
*, *:before, *:after { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box 
} 
.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 
html, body { 
    height: 100%; 
    background-image: url(../images/bg-tile.png); 
    background-repeat: repeat; 
} 
body { 
    font: 1em'Roboto', sans-serif; 
    color: #555; 
    background-color: #fff; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
ul { 
    list-style: none; 
    max-width: 900px; 
    margin: 0 auto; 
    /*border-left: 1px solid #ddd; 
    border-right: 1px solid #ddd; 
    background: inharit;*/ 
} 

h1 { 
    padding: 30px 0; 
    font: 1.5em'Open Sans', sans-serif; 
    text-align: center; 
} 
.nav { 
    height: 3.6em; 
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    background-color: #f5f5f5; 
    /* adds box shadow */ 
    -webkit-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
    -moz-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
    box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
} 

ul a { 
    display: block; 
    padding: 20px; 
    padding-right: 0 !important; 
    /* important overrides media queries */ 
    font-size: 13px; 
    font-weight: bold; 
    text-align: center; 
    color: #aaa; 
    cursor: pointer; 
    text-decoration: none; 
} 
ul a:hover { 
    background: #eee; 
} 
.nav li { 
    float: left; 
    width: 20%; 
    border-right: 1px solid #ddd; 
    position: relative; 
} 
.nav li > ul li{ 
    float: left; 
    position: relative; 
} 
.nav li:last-child { 
    border-right: none; 
} 
ul.submenu { 
    display: none; 
} 
ul.submenu li { 
    width: 100%; 
    border-right: none; 
    background: #eee; 
} 
ul.submenu li a { 
    width: 100%; 
    padding: 6px; 
} 
ul.menu > li:hover ul.submenu { 
    float: none; 
    display: block; 
    background: #eee; 
} 
@media only screen and (max-width: 600px) { 
    .hamburger { 
     padding: 15px; 
     display: block; 
    } 
    .line { 
     border-bottom: 4px solid #bbb; 
     width: 35px; 
     margin-bottom: 6px; 
    } 
    .line:last-child { 
     margin-bottom: 0; 
    } 
    .nav li { 
     width: 100%; 
    } 
    .menu { 
     height: 0; 
     overflow: hidden; 
     transition: height 0.3s linear; 
     -webkit-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
     -moz-box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
     box-shadow: -1px 3px 5px 0px rgba(52, 44, 77, 1); 
    } 
    .slide-down { 
     height: 275px; 
    } 
}

來源

2015-11-07 07:02:18

還有很多其他的方法。請在評論中提問。如果你有任何疑問 –

如何在使用css的時候顯示一個子菜單

回答

相關問題