optgroup与我的网站联系人一起工作时出现问题，optgroup可以工作吗？我应该使用什么？

Question

我有一个菜单，其中包含“主页”，“关于”，“联系人”，“个人资料”。当我将鼠标悬停在“个人资料”上时，我希望我可以显示一个子菜单，其中包含指向我的Github / Facebook帐户等的链接。我该怎么做？

很抱歉，如果有人已经回答了这个问题，但是我试图寻找一些信息，但找不到任何有效的方法。

(function(){

  var addFn = function addFn(){

    var total = 0;
    return function(val){
      total += val;
      return total;
    }

  };

  var add = addFn();

  console.log(add(5));
  console.log(add(20));
  console.log(add(3));
  
}());

body {
  margin: 0;
  font-family: Andale Mono, monospace;
}

.top {
  overflow: hidden;
  background-color: #dfe3ee;
}

.top a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
  font-size: 20px;
}

.top a:hover {
  background-color: lightgrey;
  color: darkred;
}

.active {
  background-color: #44E6F2;
  color: Ivory;
}

.top input[type=text] {
  float: right;
  padding: 4px;
  margin-top: 10px;
  margin-right: 16px;
  border: none;
  font-size: 18px;
  width: 250px;
  border-style: solid;
}

#sub1 {
  color: black;
  font-size: 12px;
  font-family: "Arial Black", Gadget, sans-serif;
}

#sub2 {
  color: black;
  font-size: 12px;
  font-family: "Arial Black", Gadget, sans-serif;
}

Answer 1

如果我理解正确，那么当您将鼠标悬停在菜单中的“个人资料”上时，您会希望出现一个带有指向社交媒体平台链接的子菜单。有多种方法可以执行此操作，其中大多数都包含一些Javascript，但是您可以使用纯CSS进行操作，这是一个示例：

/* Hide Dropdowns by Default */

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
  /* the height of the main nav */
}


/* Display Dropdowns on Hover */

nav ul li:hover>ul {
  display: inherit;
}


/* Fisrt Tier Dropdown */

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}

<nav>
  <ul>
    <li>
      <a href="#">WordPress</a>
      <!-- First Tier Drop Down -->
      <ul>
        <li><a href="#">Themes</a></li>
        <li><a href="#">Plugins</a></li>
        <li><a href="#">Tutorials</a></li>
      </ul>
    </li>
  </ul>
</nav>

另请参阅https://codepen.io/andornagy/pen/xhiJH。