Menu rozwijane (na kliknięcie)

pytanie zadane 22 października 2019 w HTML i CSS przez BleBlock Użytkownik (600 p.)

Witam

Chciałbym aby po kliknięciu w zakładkę kolory pokazały się podkategorię.

Jak na razie działa mi po najechaniu a chcę aby było po naciśnięciu LPM

Dodaję kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	
	<title></title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
	
</head>
<body>

    
    <header>
            
        <nav>
            
            <label for="show-menu" class="show-menu">&#9776;</label>
			<input type="checkbox" id="show-menu" role="button">
		      
            <ul class="menu">
                <li>
                    <a href="#">Kolory</a>
                    <ul>
                        <li><a href="#">Czerwony</a></li>
                        <li><a href="#">Niebieski</a></li>
                        <li><a href="#">Zielony</a></li>
                        <li><a href="#">Pomarańczowy</a></li>
                        <li><a href="#">Żółty</a></li>
                    </ul>
                </li>
            </ul>		
		</nav>
		
        
    </header>
    
	
</body>
</html>

CSS:


body
{
    font-size: 19px;
}

nav
{
    text-align: center;
    background-color: #444;
}

.menu
{
	list-style-type: none;
	margin: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-right: 0px;
    font-size: 21px;
}

.menu li
{
    display: inline-block;
    width: 200px;
    vertical-align: top;
}

.menu a
{
	color: white;
	text-decoration: none;
	padding: 5px;
    display: block;
	text-transform: uppercase;
}


.menu > li > ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 0px;
    display: none;
}

.menu > li > ul > li
{
	line-height: 150%;
    background-color: black;
    opacity: 0.9;
}


.menu > li > ul > li:hover
{
	background-color: #444;
	transition-duration: 0.4s;
    opacity: 1;
}
.menu > li > ul > li:hover > a
{
	color: black;
	transition-duration: 0.4s;
}

.menu > li:hover > ul
{
	display: block;
	transition-duration: 0.4s;
}


.show-menu 
{
	color: #fff;
	text-align: right;
	background: #444;
    padding-right: 50px;
	display: none;
	font-size: 27px;
	padding-top: 20px;
	padding-bottom: 20px;
    cursor: pointer;
    line-height: 30px;
    border-bottom: 1px solid white;	
}


input[type=checkbox]
{
    display: none;
}

input[type=checkbox]:checked ~ .menu
{
    display: block;
}


@media screen and (max-width : 760px)
{
	.menu 
    {
		display: none;
        padding: 0px;
        border-bottom: 1px solid white;
	}
    
	.menu a
	{
		width: 100%;
        padding: 10px 0px 10px 0px;
    }
    
    .menu a:hover
	{
        padding: 10px 0px 10px 0px;
	}
    
    .menu li 
    {
        width: 100%;
    }
    .menu > li > ul > li
    {
        opacity: 1;
    }
     .menu > li > ul > li:hover
    {
        opacity: 1;
    }
	.show-menu 
	{
		display: block;	
	}
    .menu > li > ul
    {
        height: auto;
    }	

}

Z góry dziękuję