如何通過我的導航條碼使懸停在工作上？

Question

這是我的樣式頁面。我隱藏了孩子ul標籤。但是我無法讓它們使用懸停功能進行顯示。有誰知道我能做些什麼才能使這個工作？我真的很新的HTML，並想知道我的最終課程項目？謝謝！

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, small { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    background: transparent; } 

body { 
    width: 100%; 
    max-width: 960px; 
    margin: 0 auto; } 

nav { 
    width: 100%; 
    margin: 20px 0;} 

nav ul li { 
    width: 20%; 
    float: left;} 

nav ul li a { 
    text-align: center; 
    padding: 8px 0; 
    display: block; 
    width: 100%; 
    background: #cdeb8e; /* Old browsers */ 
    background: -moz-linear-gradient(top, #cdeb8e 0%, #b0ca34 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#b0ca34)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #cdeb8e 0%,#b0ca34 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #cdeb8e 0%,#b0ca34 100%); /* Opera 11.10+ */ 
    background: linear-gradient(to bottom, #cdeb8e 0%,#b0ca34 100%); /* W3C standard, IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cdeb8e',  endColorstr='#b0ca34',GradientType=0); /* IE6-9 */ 
    } 

nav ul li a:hover { 
    background: #b0ca34; /* Old browsers */ 
    background: -moz-linear-gradient(top, #b0ca34 0%, #96c40d 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b0ca34), color-stop(100%,#96c40d)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #b0ca34 0%,#96c40d 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #b0ca34 0%,#96c40d 100%); /* Opera 11.10+ */ 
    background: linear-gradient(to bottom, #b0ca34 0%,#96c40d 100%); /* W3C standard, IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b0ca34', 

    endColorstr='#96c40d',GradientType=0); /* IE6-9 */ 
     } 



nav ul li a, 
nav ul li a:focus, 
nav ul li a:visited, 
nav ul li a:hover, 
nav ul li a:active { 
    color: #000; 
    text-decoration: none; } 

nav ul { 
    width: 100%; 
    list-style: none; 
    margin: 0; 
    padding: 0;} 

nav ul li:first-child a { 
    border-top-left-radius: 8px; 
    border-bottom-left-radius: 8px; 
} 
nav ul li:last-child a { 
    border-top-right-radius: 8px; 
    border-bottom-right-radius: 8px; 
} 

nav ul ul{ 
    display: none; 
} 

nav ul li:hover > ul{ 
    display: block; 
} 


header{ 

} 

section{ 
} 



footer{ 
    border-style: solid;} 

Answer 1

您遇到的問題可以通過在服務中包含ul來解決。由於CSS選擇器只能解決父>子關係，因此您發佈的代碼不太適用，因爲這些元素是兄弟。請嘗試以下操作：

<nav> 
    <ul>  
     <li><a href="services.html">Services</a> //moved the </li> below </ul> 
      <ul> 
       <li><a href="webdesigndevelopment.html">Web Design/Development</a></li> 
       <li><a href="#">E-Commerce</a></li> 
       <li><a href="#">Custom Application</a></li> 
       <li><a href="#">SEO</a></li> 
       <li><a href="#">Hosting</a></li> 
      </ul> 
     </li> //now <li> is the parent of the contained <ul> 
     <li><a href="about.html">About Us</a></li> 
     <li><a href="portfolio.html">Portfolio</a></li> 
     <li><a href="contact.html">Contact</a></li> 
     <li><a href="blog.html">Blogs</a></li> 
    </ul> 
</nav> 

你的CSS實際上是罰款事情是這樣的，所以嘗試了這一點，讓我知道，如果它的工作原理！