css - 带有 li 和 lu 的可点击下拉菜单

Question

我正在做一个菜单，其中子菜单选项随悬停显示。但这并不好，因为我无法单击第一个选项下的其他选项。

所以，我正在尝试创建一个可点击的下拉菜单，而 w3schools 有一个页面，其中用 div 对此进行了解释，但我正在用 <ul> 来做这件事。和 <li>当我点击 <li>我放置 onclick 的元素没有任何反应。

所以，用<ul>是不可能的吗？和 <li> ？如果是，如何？

<script type="text/javascript">
function myFunction() {
    document.getElementById("primero").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
} 

  </script>

<style type="text/css">
html, body {
    font-family: Arial, Helvetica, sans-serif;
     font-size:14px;
}

.cabecera{
	position: relative;
	left:50%;
	margin-left: -472.5px;
}
/* define a fixed width for the entire menu */
.navigation {
	position: relative;
  width: 20%;
  overflow: hidden;
  margin-left: 2%;
  margin-top: 2%;
}

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu, .submenu1 {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
  background-color: #3e8525;
  text-decoration: none;
  padding: 10px;
  color: white;
}

/* add hover behaviour */
.mainmenu a:hover {
    background-color: #009e1a;
}


/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

/*.mainmenu li:hover .submenu {
  display: block;
  max-height: 1300px;
}
*/
.submenu li:hover .submenu1 {
  display: block;
  max-height: 1090px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
  background-color: #4ba22c;
  padding-left:10%;

    display: block;
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
  background-color: #009e1a;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 1s ease-out;

  display: none;
    position: absolute;

}

.submenu1 a {
  background-color: #52b130;
  padding-left:20%;
}

/* hover behaviour for links inside .submenu */
.submenu1 a:hover {
  background-color: #009e1a;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu1 {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 1s ease-out;
}

li{
 border:1px solid green;
}

.show {display:block;}


@media screen and (max-width: 1000px) {
	.cabecera{
		position: relative;
		left:2%;
		margin-left: 0px;
		
	}
}


@media screen and (max-width: 840px) {
.navigation {
	position: relative;
  width: 195px;
  overflow: hidden;
  margin-left: 2%;
  margin-top: 2%;
}

}



  </style>

<nav class="navigation">
    <ul class="mainmenu">
        <li><a href="" onclick="myFunction()">Alimentacion y bebidas</a>
            <ul class="submenu" id="primero">
                <li><a href="">Alimentacion seca</a>
                    <ul class="submenu1">
                        <li><a href="">aceites</a></li>
                        <li><a href="">cafes y sucedaneos</a></li>
                        <li><a href="">infusiones</a></li>
                        <li><a href="">chocolates</a></li>
                        <li><a href="">cacao</a></li>
                        <li><a href="">azucar y edulcorantes</a></li>
                        <li><a href="">golosinas</a></li>
                        <li><a href="">salsas</a></li>
                        <li><a href="">sal, vinagre y especieas</a></li>
                        <li><a href="">reposteria</a></li>
                        <li><a href="">galletas</a></li>
                        <li><a href="">CEREALES DESAYUNO</a></li>
                        <li><a href="">PASTELERÍA Y BOLLERÍA INDUSTRIAL</a></li>
                        <li><a href="">PANADERÍA INDUSTRIAL</a></li>
                        <li><a href="">PASTAS</a></li>
                        <li><a href="">ARROCES</a></li>
                        <li><a href="">LEGUMBRES SECAS</a></li>
                        <li><a href="">SOPAS, CALDOS Y PURES</a></li>
                        <li><a href="">APERITIVOS PAT.FRITAS CORTEZA</a></li>
                        <li><a href="">FR.SECOS Y FRUTA SECA</a></li>
                        <li><a href="">ALIMENTOS ANIMALES</a></li>
                        <li><a href="">ALIMENTOS DIETÉTICOS</a></li>
                        <li><a href="">PRODUCTOS NAVIDEÑOS</a></li>
                        <li><a href="">GENÉRICO A. SECA</a></li>
                    </ul>
                </li>
                <li><a href="">Conservas</a></li>
                <li><a href="">Leches y Batidos</a></li>
                <li><a href="">Bebidas</a></li>
            </ul>
        </li>
        <li><a href="">Productos frescos</a></li>
        <li><a href="">Drogueria y Perfumeria</a></li>
        <li><a href="">Sector bebé</a></li>
        <li><a href="">Sector textil</a></li>
        <li><a href="">Deporte</a></li>
        <li><a href="">Calzado</a></li>
        <li><a href="">Ferreteria y bricolage</a></li>
        <li><a href="">Recargas</a></li>
        <li><a href="">Bazar</a></li>
        <li><a href="">Productos Especiales</a></li>
        <li><a href="">Servicios</a></li>
        <li><a href="">Sin clasificacion definida</a></li>
    </ul>
</nav>

Answer 1

因为你想通过点击来完成，对 submenu 类做这个修改有助于:

.submenu {
  -webkit-transition: all 1s ease-out;
  display: none;
}

同时防止点击链接时重新加载页面:

function myFunction(e) {
  e.preventDefault();
  document.getElementById("primero").classList.toggle("show");
}

当你调用它时传递事件

<li><a href="#" onclick="myFunction(event)">Alimentacion y bebidas</a>

看看这个pen修改你的代码