javascript - 如何在 html 中创建可扩展的 元素

Question

所以我有关于创建一个网站的竞争，我想创建一个列表元素，当用户将鼠标移到它上面时，它是可扩展的，就像下面的网站一样，然后弹出选项

http://www.howtogeek.com/

这是 HTML

<ul>
     <li><a href="articles.html">Artikuj</a></li>
     <li><a href="subscribe.html">Na ndiqni</a></li>
     <li><a href="about.html">Rreth nesh</a></li>
</ul>

这就是 CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid black;
  background-color: black;
  height: 37px;
  border-radius: 20px;
}

li {
  float: left;
  font-family: 'Times New Roman', Times, serif
}

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

li a:hover:not(.active) {
  background-color: gray;
}

li a.active {
  color: white;
  background-color: black;
}  

Answer 1

纯CSS:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid black;
background-color: black;
height: 37px;
border-radius: 20px;
}

li {
float: left;
font-family: 'Times New Roman', Times, serif
}

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

li a:hover:not(.active) {
background-color: gray;
}

li a.active {
color: white;
background-color: black;
} 

li ul {
  display: none;
      position: absolute;
}

li:hover ul {
  display: block;
}

<ul>
     <li><a href="articles.html">Artikuj</a>
<ul>
     <li><a href="articles.html">Artikuj</a></li>
     <li><a href="subscribe.html">Na ndiqni</a></li>
     <li><a href="about.html">Rreth nesh</a></li>
</ul>
     </li>
     <li><a href="subscribe.html">Na ndiqni</a></li>
     <li><a href="about.html">Rreth nesh</a></li>
</ul>