html - Can't seem to hover the drop-down menu via CSS -

to upfront, started web designing module in school, hence i'm quite new stuff.

here's thing, attempted create css drop-down menu i'm not sure why drop-down menu isn't appearing. "display"/"visibility"/"opacity" property in "ul li ul" element causing trouble, or it's thing?

/* 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: 0.2s;  	-moz-transition: 0.2s;  	-ms-transition: 0.2s;  	-o-transition: 0.2s;  	transition: 0.2s;  	letter-spacing: 2px;  	font-size: 25px;   	padding: 15px 20px;  	cursor: pointer;  }  ul li:hover {  	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 web!</a></li>    </ul>  </nav>

yes, it's related display/visibility/opacity property in ul li ul element.

currently, ul li ul hidden. want make sure inner ul it's not hidden when hover ul li element

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

check example (also fixed css problems in original code. check li :hover example):

/* 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: 0.2s;  	-moz-transition: 0.2s;  	-ms-transition: 0.2s;  	-o-transition: 0.2s;  	transition: 0.2s;  	letter-spacing: 2px;  	font-size: 25px;   	padding: 15px 20px;  	cursor: pointer;  }  ul li:hover {  	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 web!</a></li>      </ul>    </nav>  </header>