CSS. Can anyone tell me a function in this code? I can't find it

Question

So I'm implementing a drop-down menu in CSS to my website, this function is on the navigation bar.

As I struggled with this, my friend did some code for me, but I can't find in the CSS code which produces the drop down effect. It's fully working and operational, just need help finding the drop-down attributes so I can learn from it.

Thanks.

ul {
 text-align: left;
 display: inline;
 margin: 0;
 padding: 15px 4px 17px 0;
 list-style: none;
 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 text-decoration: none;
  }

ul li {
 font: bold 12px/18px sans-serif;
 display: inline-block;
 margin-right: -4px;
 position: relative;
 padding: 15px 20px;
 background: #000000;
 color: #fff;
 cursor: pointer;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -ms-transition: all 0.2s;
 -o-transition: all 0.2s;
 transition: all 0.2s;
 text-decoration: none;
  }

  ul li:hover {
    background: #6d1022;
    color: #fff;
  }

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

  ul li ul li { 
    background: #000000; 
    display: block; 
    color: #fff;
     }

  ul li ul li:hover { background: #6d1022; }

  ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
     }

Answer 1

The crucial part of a HTML/CSS drop down is nested lists. The main items are in the top level list ul li, sub menus are part of ul elements within the top level ul li, by default these are hidden-

SO you have the structure:

ul
-li
--ul <-- hidden with display:none
---li <-- hidden due to parent ul being hidden

You can see this in effect in your CSS here:

ul li ul {
    padding: 0;
    position: absolute;
    top: 48px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none; /* <---- here */
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
    text-decoration: none;
}

When the top level ul li item is hovered on, you want the child list to be shown, you can see this here:

ul li:hover ul {
    display: block; /* <--- here */
    opacity: 1;
    visibility: visible;
}

Which performs the following:

ul
-li:hover <-- trigger applying display:block to child ul
--ul <-- shown with display:block
---li <-- shown due to parent ul being shown

Answer 2

ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
 }

Says that on mouse hover over the unordered list,list items will become visible...