html - 似乎无法通过 CSS 悬停下拉菜单

Question

坦率地说，我刚刚在学校开始学习网页设计模块，因此我对这些东西还很陌生。

事情是这样的，我试图创建一个 CSS 下拉菜单，但我不确定为什么没有出现下拉菜单。是“ul li ul”元素中的“display”/“visibility”/“opacity”属性导致了问题，还是只是另一回事？

/* Navigation */
header nav ul {
	list-style: none;
	float:right;
	margin-right: 50px;
}
nav ul li {
	position: relative;
	display: inline-block;
	float:left;
	font-family: 'Open Sans Condensed', sans-serif;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-right: -5px;
	background: #fff;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);	
}
nav ul li a{
	color: #000000;;
	text-decoration: none;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	letter-spacing: 2px;
	font-size: 25px; 
	padding: 15px 20px;
	cursor: pointer;
}
ul li:hover a {
	color: #fff;
	background-color: #1D55D5;	
}
ul li ul {
	padding:0;
	position: absolute;
	top:48px;
	width:150px;
	display: none;
	visibility: hidden;
	opacity: 0;
	-webkit-transiton: opacity 0.2s;
   -moz-transition: opacity 0.2s;
   -ms-transition: opacity 0.2s;
   -o-transition: opacity 0.2s;
   -transition: opacity 0.2s;
}
ul li ul li {
	background: #555;
	display: block;
	color: #fff;
	text-shadow: 0 -1px 0 #000;
}
ul li ul li: hover {
  background: #666;
}
ul li: hover ul {
	display: block;
}

<nav>
  <ul><li><a href="updates.html">Updates!</a></li>
    <li><a>About Me!</a>
      <ul>
        <li>Personal Life</li>
        <li>Game Stuff</li>       	
      </ul>
    </li>
    <li><a href="#contact">Find me on the Web!</a></li>
  </ul>
</nav>

Answer 1

是的，它与 ul li ul 元素中的 display/visibility/opacity 属性有关。

目前，您的ul li ul 是隐藏的。当您将鼠标悬停在 ul li 元素

上时，您需要确保内部 ul 未隐藏

ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
    z-index: 100;
}

查看此示例(还修复了原始代码中的一些 css 问题。查看 li :hover 示例):

/* Navigation */
header nav ul {
	list-style: none;
	float:right;
	margin-right: 50px;
}

nav ul li {
	position: relative;
	display: inline-block;
	float:left;
	font-family: 'Open Sans Condensed', sans-serif;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-right: -5px;
	background: #fff;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	
	
}

nav ul li a{
	color: #000000;;
	text-decoration: none;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	letter-spacing: 2px;
	font-size: 25px; 
	padding: 15px 20px;
	cursor: pointer;
}
ul li:hover a {
	color: #fff;
	background-color: #1D55D5;	
}

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

ul li:hover ul {
	display: block;
	visibility: visible;
	opacity: 1;
    z-index: 100;
}
ul li ul li {
	background: #555;
	display: block;
	color: #fff;
	text-shadow: 0 -1px 0 #000;
}

ul li ul li:hover { background: #666;
}

ul li:hover ul {
	display: block;
}

<header>
  <nav>
    <ul><li><a href="updates.html">Updates!</a></li>
      <li><a>About Me!</a>
        <ul>
          <li>Personal Life</li>
          <li>Game Stuff</li>       	
        </ul>
      </li>
      <li><a href="#contact">Find me on the Web!</a></li>
    </ul>
  </nav>
</header>