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：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

<强> CSS：

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a, .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

    li.dropdown {
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    li .menuall{
        width: 600px;
    }
    .menuall_list{
        float: left; 
        width: 200px;
    }
    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

<强> HTML：

<ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="#" class="dropbtn">Artikuj</a>
        <div class="dropdown-content">
            <div class="menuall">
                <div class="menuall_list">
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
                </div>
                <div class="menuall_list">
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
                </div>
                <div class="menuall_list">
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
                </div>
            </div>
        </div>
      </li>
    </ul>

此代码与www.howtogeek.com菜单类似。现在，您可以根据设计更改颜色或形状。

如何在html中创建可扩展的<li>元素

2 个答案: