HTML5 boilertemplate模板

Question

我在我这边的initializr的帮助下集成了html boilertemplate。现在，我尝试以下拉列表的形式将子ul元素添加到导航中，这是由initializr用纯css3创建的，但我无法让它工作。

为nav元素创建的来自boilertemplate的css如下：

nav ul {
 margin: 0;
 padding: 0;
}

nav a {
 display: block;
 margin-bottom: 10px;
 padding: 15px 0;

 text-align: center;
 text-decoration: none;
 font-weight: bold;

 color: white;
 background: green;
}

nav a:hover,
nav a:visited {
 color: white;
}

nav a:hover {
 text-decoration: underline;
}


@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */

nav a {
    float: left;
    width: 13%;
    margin: 0 1.7%;
    padding: 10px 2%;
    margin-bottom: 0;
}

nav li:first-child a {
    margin-left: 0;
}

nav li:last-child a {
    margin-right: 0;
}

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

nav ul li {
    display: inline;
}

.oldie nav a {
    margin: 0 0.7%;
}
}

@media only screen and (min-width: 768px) {

    nav {
        float: left;
        width: 100%;
    }
}

我尝试的解决方案不适用于来自：http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu的css3

如何将子元素/子ul添加到导航中，以便它们显示在悬停元素的下拉列表中？

最后，我希望它能像他们的例子一样工作：http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html

问候

Answer 1

您缺少一些关键的CSS规则。具体地说：

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

还有，你的html是什么？难道不能简单地复制并粘贴链接到的示例中的代码吗？

Answer 2

编辑:从您提供的链接中获取，这将为您提供所需的效果；根据需要更改值。

nav ul ul {
display: none;
}

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


nav ul {
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;  
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
    content: ""; clear: both; display: block;
}

nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 25px 40px;
        color: #757575; text-decoration: none;
    }


nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a; position: relative;
    }
        nav ul ul li a {
            padding: 15px 40px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}