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

Question

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

这是事情，我试图创建一个CSS下拉菜单，但我不知道为什么下拉菜单没有出现。 “ul li ul”元素中的“显示”/“可见性”/“不透明度”属性是否会造成问题，或者这只是另一回事？

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

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

检查这个例子中（也固定在原代码一些CSS问题检查li :hover例如）：

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

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

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

 
ul li ul { 
 
\t padding:0; 
 
\t position: absolute; 
 
\t top:48px; 
 
\t width:150px; 
 
\t display: none; 
 
\t visibility: hidden; 
 
\t opacity: 0; 
 
\t -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 { 
 
\t display: block; 
 
\t visibility: visible; 
 
\t opacity: 1; 
 
    z-index: 100; 
 
} 
 
ul li ul li { 
 
\t background: #555; 
 
\t display: block; 
 
\t color: #fff; 
 
\t text-shadow: 0 -1px 0 #000; 
 
} 
 

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

 
ul li:hover ul { 
 
\t 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>  \t 
 
     </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。这样你就不会有转换。但它应该工作。希望这可以帮助。祝你好运！