CSS。谁能告诉我这段代码中的函数？我找不到

Question

所以我在我的网站上用 CSS 实现了一个下拉菜单， 这个功能在导航栏上。

当我为此苦恼时，我的 friend 为我做了一些代码，但我无法在产生下拉效果的 CSS 代码中找到。 它完全可以正常工作，只需要帮助找到下拉属性，这样我就可以从中学习。

谢谢。

ul {
 text-align: left;
 display: inline;
 margin: 0;
 padding: 15px 4px 17px 0;
 list-style: none;
 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 text-decoration: none;
  }

ul li {
 font: bold 12px/18px sans-serif;
 display: inline-block;
 margin-right: -4px;
 position: relative;
 padding: 15px 20px;
 background: #000000;
 color: #fff;
 cursor: pointer;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -ms-transition: all 0.2s;
 -o-transition: all 0.2s;
 transition: all 0.2s;
 text-decoration: none;
  }

  ul li:hover {
    background: #6d1022;
    color: #fff;
  }

  ul li ul {
     padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
    text-decoration: none;
     }

  ul li ul li { 
    background: #000000; 
    display: block; 
    color: #fff;
     }

  ul li ul li:hover { background: #6d1022; }

  ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
     }

Answer 1

HTML/CSS 下拉列表的关键部分是嵌套列表。主要元素在顶级列表 ul li 中，子菜单是顶级 ul li 中的 ul 元素的一部分，默认情况下这些是隐藏的-

所以你有结构:

ul
-li
--ul <-- hidden with display:none
---li <-- hidden due to parent ul being hidden

您可以在此处的 CSS 中看到此效果:

ul li ul {
    padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none; /* <---- here */
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
    text-decoration: none;
}

当顶级 ul li 元素悬停时，您希望显示子列表，您可以在这里看到:

ul li:hover ul {
    display: block; /* <--- here */
    opacity: 1;
    visibility: visible;
}

它执行以下操作:

ul
-li:hover <-- trigger applying display:block to child ul
--ul <-- shown with display:block
---li <-- shown due to parent ul being shown