Sya Strife Sya Strife - 19 days ago 6
CSS Question

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

To be upfront, I just started a Web Designing module in school, hence I'm quite new to this stuff.

Here's the thing, I attempted to create a CSS drop-down menu but I'm not sure why the drop-down menu isn't appearing. Is the "display"/"visibility"/"opacity" property in "ul li ul" element causing the trouble, or it's just another 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: 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

Yes, it's related to the display/visibility/opacity property in the ul li ul element.

Currently, your ul li ul is hidden. What you want is to make sure the inner ul it's not hidden when you hover the ul li element

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

Check this example (also fixed some css problems in the original code. check the li :hover for 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: 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>

Comments