Question

我试图为CSS创建一个多级菜单，我无法将子菜单折叠到主菜单中。

出于某种原因，在我用鼠标胡软之前向我显示所有选项。

   <!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("http://goadvanced.com/wp-content/uploads/2015/11/RicLogoNew_186CMYK-Orangey.jpeg");
    background-size: 25%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    }



ul {

    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}



/* hover */

ul li a:hover { background: #2c3e50; }




li:hover > ul {
  display: block;
  position: absolute;
}

li:hover li { float: none; }

li:hover a { background: #1bc2a2; }

li:hover li a:hover { background: #2c3e50; }
</style>
</head>
<body>

<ul>
  <li><a href="#Mercure">Mercure</a></li>

  <li><a href="#Impresora / Escáner">Impresora / Escáner</a></li>
  </ul>
  <li><a href="#Impresora / Escáner">Impresora / Escáner</a></li>
  <li><a href="#Impresora / Escáner">Pistolas Tracking</a></li>
  <li><a href="#Impresora / Escáner">TPA - TPV</a></li>
  <li style="float:right"><a class="active"><script type="text/javascript">
    var d=new Date()
    var weekday=new Array("Domingo - Dimanche","Lunes - Lundi","Martes - Mardi","Miercoles - Mercredi","Jueves - Jeudi",
                "Viernes - Vendredi","Sabado - Samedi")
    document.write("Hoy es: " + weekday[d.getDay()])


</script></a></li>
</ul>

</body>
</html>

我尝试添加display：block;在第一个ul，工作了一点但不是整个菜单。

使用CSS制作多级列表

0 个答案: