CSS二級菜單欄的制作方法

CSS二級菜單欄是一種常用的網(wǎng)頁導(dǎo)航結(jié)構(gòu)，能夠清晰地展示網(wǎng)站的主要內(nèi)容和結(jié)構(gòu)，下面是一些制作CSS二級菜單欄的方法：

1、使用HTML和CSS創(chuàng)建二級菜單欄

使用HTML編寫二級菜單的結(jié)構(gòu)，

<ul>
  <li>菜單項1
    <ul>
      <li>子菜單項1</li>
      <li>子菜單項2</li>
    </ul>
  </li>
  <li>菜單項2
    <ul>
      <li>子菜單項3</li>
      <li>子菜單項4</li>
    </ul>
  </li>
</ul>

使用CSS樣式來美化菜單，

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
ul ul {
  padding: 0;
  margin: 0;
}

2、使用JavaScript實現(xiàn)二級菜單的交互效果

除了靜態(tài)的二級菜單，還可以利用JavaScript實現(xiàn)一些交互效果，

document.querySelector('ul').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    event.target.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
    event.target.style.border = '1px solid #000';
    event.target.style.borderRadius = '5px';
    event.target.style.padding = '10px';
    event.target.style.margin = '5px';
    event.target.style.position = 'relative';
    event.target.style.left = '20px';
    event.target.style.top = '20px';
    event.target.style.width = '200px';
    event.target.style.height = '200px';
    event.target.style.backgroundColor = 'rgba(255, 255, 255, 1)';
    event.target.style.border = '1px solid #000';
    event.target.style.borderRadius = '5px';
    event.target.style.padding = '10px';
    event.target.style.margin = '5px';
    event.target.style.position = 'absolute';
    event.target.style.left = '0';
    event.target.style.top = '0';
    event.target.style.width = 'auto';
    event.target.style.height = 'auto';
  } else if (event.target.tagName === 'UL') {
    event.target.style.display = event.target.style.display === 'none' ? 'block' : 'none';
  } else { // 其他情況，阻止冒泡事件繼續(xù)傳播
    event.stopPropagation();
  }
});