Question

My dropdown is not working. Following is the css and html code.

#nav {
    display: block;
    background: transparent url(../images/nav_bg.jpg) repeat-x left top;
    padding: 0;
    margin: 0;
    height: 34px;
    z-index: 100;
    position: relative;
    width: 100%;
    list-style: none;
    text-align: center;
}

#nav li {
    text-align: center;
    display: block;
    float: left;
    height: 34px;
    margin: 0;
    padding: 0;
    position: relative;
    background: url(../images/nav_sep.jpg) no-repeat 0 0;
}

#nav li a {
    float: left;
    height: 25px;
    padding: 0 15px;
    padding-top: 9px;
    color: #ccc;
    font-size: 0.9em;
    margin-left: 2px;
}

#nav li a:hover {
    background: url(../images/nav_over.jpg) repeat-x 0 0;
    color: white;
}

#nav li a.active {
    background: url(../images/nav_over.jpg) repeat-x 0 0;
    color: white;
    font-weight: bold;
}

#nav li.sep {
    background: url(../images/nav_sep.jpg) no-repeat 0 0;
    width: 2px;
    height: 34px;
    float: left;
}

#nav li.left {
    background: url(../images/nav_l.jpg) no-repeat left top;
    width: 36px;
    height: 34px;
    float: left;
}

#nav li.right {
    background: url(../images/nav_r.jpg) no-repeat right top;
    width: 36px;
    height: 34px;
    float: right;
}

#nav li ul {
    display: none;
    width: 170px;
    position: absolute;
    top: 34px;
    left: 0;
    margin: 0;
    padding: 0;
    /* Transparent background for drop down menu */
    background:transparent filter: alpha(opacity=90);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
    opacity:0.90;
}

#nav li ul li {
    border: 0;
    height: 25px;
    color: #99FF00;
    background: #111;
    margin: 0;
}

#nav li ul li a {
    display: block;
    height: 25px;
    width: 140px;
    padding: 0 20px 0 15px;
    border-top: 1px #333 solid;
    white-space: nowrap;
    background: #000;
    color: white;
    text-align: left;
    line-height: 25px;
    font-weight: normal;
}

#nav li ul li a:hover {
    color: #99FF00;
    background: #111;
}

/* Hacks for Opera to fix the drop down menu problem */
html:first-child #nav li a {
    float: none;
    height: 34px;
    padding-top: 0;
    line-height: 34px;
    display: block;
}
html:first-child #nav li ul li a {
    height: 25px;
    line-height: 25px;
}

and HTML is

<ul id="nav">
      <li class="left">&nbsp;</li>
      <li><a class="active" href="#">Home</a></li>
      <li> <a href="DiscussionPanel">Discussion Panel<img src="/Images/nav_bullet.jpg" alt=""></a>
        <ul>
          <li><a href="/DiscussionPanel/AddProblemTag"></a></li>
          <li><a href="/DiscussionPanel/DisplayProblemList"></a></li>
          <li><a href="/DiscussionPanel/PostProblem"></a></li>
          <li><a href="/DiscussionPanel/ViewProblems"></a></li>
        </ul>
      </li>
       <li> <a href="MeetingScheduler">Meeting Scheduler<img src="/Images/nav_bullet.jpg" alt=""></a>
        <ul>
          <li><a href="/MeetingScheduler/MeetingMinutes"></a></li>
          <li><a href="/MeetingScheduler/MeetingList"></a></li>
        </ul>
      </li>
       <li><a href="/ReserveProject/StudentView">Reserve Project</a></li>
      <li><a href="/SubmitArtifact/StudentView">Submit Artifact</a></li>
      <li><a href="/CreateAttendanceSheet/MarkAttendance">Attendance</a></li>
      <li><a href="">Contact Us</a></li>
      <li class="sep">&nbsp;</li>
      <li class="right">&nbsp;</li>
    </ul>

I want when I hover the mouse on Discussion Panel, dropdown list should be render.

Answer 1

You never actually display the sub ul on hover:

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

http://jsfiddle.net/ExplosionPIlls/gGBW4/