Question

为了提前，我刚在学校开设了一个网页设计模块，因此我对这些东西很陌生。

在这里，我尝试创建一个CSS下拉菜单，但我不确定为什么下拉菜单不会出现。是＆＃34;显示＆＃34; /＆＃34;可见性＆＃34; /＆＃34;不透明度＆＃34;属于＆＃34; ul li ul＆＃34;导致麻烦的元素，或者它只是另一回事？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

目前，您的ul li ul已隐藏。你想要的是当你悬停ul li元素

时确保内部文件不隐藏

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>

Answer 2

您可以删除多余的属性visibility: hidden; opacity: 0;来自ul li ul {}选择器，因为在ul li:hover ul上，您只将display属性更改为block。这样你就不会有过渡。但它应该工作。希望这可以帮助。祝你好运！

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

2 个答案: