Q:

Hover field has minuscule size

I am working on a menu bar for a web site and the dropdown menu's work fine, the only problem is they will only display when my mouse is right at the edge of where they come out.  Can anyone help, would be much appreciated.  The part that you have to hover over is the very bottom of the red areas, and on dropdown 1 another submenu at the bottom to the right. 
Here is my code:
HTML
    <! DOCTYPE html>
     <html>
      <head>
       <link rel="stylesheet" type="text/css" href="style.css"/>
       <link rel="shortcut icon" href="#"/>
      </head>
     <body>
      <div id="banner">
       <p id="title">Code Works</p>
      </div>
      <center>
      <div style="background-color: #FFFF00" id="display"><a href="#">=</a></div>
      </center>
       <nav>
     <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Setting Up +</a>
                <ul>
                    <li><a href="#">Programs</a></li>
                    <li><a href="#">Files</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Templates +</a>
        <ul>
            <li><a href="#">Web Page</a></li>
            <li><a href="#">Clocks</a></li>
            <li><a href="#">Calendars</a></li>
            <li><a href="#">Maps</a></li>
            <li><a href="#">Transitions</a></li>
            <li><a href="#">Video</a></li>
            <li><a href="#">Audio</a></li>
            <li><a href="#">Search</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
     </ul>
        </nav>

        **CSS**

        html {
        height: 100%;
        }
        body {
        background: linear-gradient(#C0C0C0, #E0E0E0);
        height: 100%;
        margin: 0;
        background-repeat: no-repeat;
        background-attachment: fixed;
        }

        #banner
        {
        width: 1376px;
        margin-left: -10px;
        margin-right: -10px;
        margin-top: -32px;
        padding-top: 0px;
        background-color: #3366CC;
        background-size: 100%;
        height: 80px;
        border-bottom: 4px inset #254A93;
        background: linear-gradient(#3366CC, #2952A3);
        }

        #title
        {
        padding-top: 0.7em;
        color: #FFFF00;
        text-align: center;
        font-size: 32px;
        }

        nav ul ul
        {
        display: none;
        }

        nav ul li:hover > ul 
        {
        display: block;
        }

        nav ul 
        {
        opacity: 0;
        margin-top: -1px;
        margin-left: -10px;
        background: linear-gradient(#FFFF66, #FFFF00);
        box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
        padding: 0 20px;
        border-radius: 0px;  
        list-style: none;
        position: relative;
        display: inline-table;
        }

        nav ul:after 
        {
        content: ""; clear: both; display: block;
        }

        nav ul li 
        {
        float: left;
        }

        nav ul li:hover
        {
        border-bottom: 4px solid #FF0000;
        background: linear-gradient (#FFFF66, #FFFF00);
        border-top: 2px solid #FFFF66;
        }

        nav ul li:hover a 
        {
        color: #3366CC;
        }

        nav ul li a 
        {
        display: block; padding: 25px 40px;
        color: #757575; text-decoration: none;
        }

        nav ul ul 
        {
        width: 200px;
        background: #FFFF00; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
        }

        nav ul ul li 
        {
        border: 2px outset #FFFF00;
        background: linear-gradient(#FFFF66, #FFFF00);
        float: none; 
        position: relative;
        }

        nav ul ul li a 
        {
        padding: 15px 40px;
        color: #757575;
        }

        nav ul ul li a:hover 
        {
        border-top: #E0E0E0;
        border-bottom: #E0E0E0;
        background: linear-gradient(#FFFF00, #FFFF66);
        }

        nav ul ul ul 
        {
        position: absolute; left: 100%; top:0;
        }

        p:hover ul
        {
        display: none;
        }

        nav ul:hover
        {
        opacity: 0.7;
        }

        nav ul:hover nav ul li
        {
        opacity: 0.7;
        }

        #display
        {
        opacity: 0.7;
        height: 30px;
        background: linear-gradient(#FFFF00, #FFFF66);
        }

        #display a
        {
        size: 32px;
        text-decoration: none;
        }

        nav ul ul li:hover
        {
        border-top: 1px solid #E0E0E0;
        border-bottom: 1px solid #E0E0E0;
        }

A:

I think there are some redundant CSS in your code, but to make it work, you just need to add the line opacity:0.7 to this CSS:
nav ul li:hover > ul {
   display:block;
   opacity:0.7;
}

Here is the working fiddle

