我們可以使用CSS來實現當我們點擊某個元素時，讓一個div出現。一般的做法是先設置一個display屬性為none的div，然后用偽類:hover或者:focus來控制它的出現。但是這種方法只能在鼠標懸停或者聚焦的情況下起作用，無法響應點擊事件。所以我們需要用到input的checked屬性和label標簽來解決這個問題。 下面是一個示例代碼，我們先使用pre標簽顯示出來：

HTML代碼：
<input type="checkbox" id="menu">
<label for="menu" class="menu-btn">打開菜單</label>
<div class="menu">
<p>這是一個菜單！</p>
</div>
CSS代碼：
.menu {
display: none;
position: absolute;
top: 50px; left: 50px;
width: 200px; height: 100px;
background-color: #ddd;
}
#menu:checked ~ .menu {
display: block;
}
.menu-btn {
cursor: pointer;
}

在上面的代碼中，我們先定義了一個checkbox輸入框和一個label標簽，它們的for屬性值相同，這樣就可以實現點擊label標簽來勾選或取消checkbox輸入框。然后我們定義了一個class為menu的div，它在一開始被設置為display:none，也就是隱藏狀態。最后我們使用CSS中的~符號選擇后面的同級元素，當menu被勾選時，就把menu的display屬性設為block，這樣就可以讓它顯示出來了。 這是一個很簡單的例子，但是它提供了一種思路，可以讓我們通過CSS來響應點擊事件并控制元素的顯示與隱藏。