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

您可以通过在服务的li中包含ul来解决您遇到的问题。由于CSS选择器只能解决父＆gt;子关系，你发布的代码不太合适，因为元素是兄弟姐妹。请尝试以下方法：

<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实际上很好，所以试试看，告诉我它是否有效！

如何使用导航条形码将鼠标悬停在工作状态？

1 个答案: