I've inherited a web page and I want to create a hover drop down menu but I'm having some trouble.

Question

Basically I've started as webmaster for my society. I'm tryign to clean up the navigation bar and I'd like to include a drop down menu but I can't figure it out with what I have there now. The current menu looks as follows:

<nav>
        <ul>
            <li id="home"><a <?=nlink($page, "home")?> href="home">Home</a></li>
            <li id="ourshows"><a <?=nlink($page, "shows")?> href="shows">Our Shows</a></li>
            <li id="booking"><a <?=nlink($page, "booking")?> href="booking">Booking</a></li>
            <li id="rehearsals"><a <?=nlink($page, "rehearsals")?> href="rehearsals">Rehearsals</a></li>
            <li id="history"><a <?=nlink($page, "history")?> href="history">History</a></li>
            <li id="contact"><a <?=nlink($page, "contact")?> href="contact">Committee &amp; Contact</a></li>
            <li id="involved"><a <?=nlink($page, "involved")?> href="involved">Get Involved</a></li>
            <li id="calendar"><a <?=nlink($page, "calendar")?> href="calendar">Calendar</a></li>
        </ul>
    </nav>

This is what my CSS looks like for this section:

nav {
border-top: thin #ccc solid;
border-bottom: thin #ccc solid;
font-size: 1.2em;
}

nav > ul > li {
list-style-type: none;
display: inline-block;
color: black;
margin-right: 1.5rem;
font-variant: small-caps;
text-decoration: none;
}

nav a {
    text-decoration: none;
color: #555;
}

nav a:active {
color: #555;
}

nav a:visited {
color: #555;
}


nav a:focus {
color: #555;
}

nav a:hover {
color: #000;
}

nav a.selected {
font-weight: bold;
}

p:first-letter {
font-size: 120%;
}

Answer 1

Here's a very basic example of a navigation with dropdown menus:

JSFiddle

---

Basically, it uses strictly CSS to determine whether or not to show the submenus. Let me explain.

The hierarchy is as follows:

<ul> //Outer menu
    <li> //Menu item
        <ul> //Submenu
            <li> //Submenu item

So to show a submenu, you add a child <ul> to any <li> in the parent menu.

---

The submenu <ul> is set with the following properties:

body > ul li ul
{
    position: absolute; /*We are taking the submenu out of the flow of the doc.*/
    top: 100%; /*Move it just below the parent <li>*/
    left: 0; /*Align to the left of the parent*/

    display: none; /*Hide it when not active*/
}

Note that these are just the important properties. I added some others for colors and such in the actual fiddle.

---

We then use the :hover property to show the submenu when necessary.

body > ul li:hover ul
{
    display: block; /*Show the ul*/
}

BAM! You have a dropdown menu. Comment if you have any more questions.

Answer 2

I think you are looking something like this:

nav {
    border-top: thin #ccc solid;
    border-bottom: thin #ccc solid;
    font-size: 1.2em;
}
nav > ul > li {
    list-style-type: none;
    display: inline-block;
    color: black;
    margin-right: 1.5rem;
    font-variant: small-caps;
    text-decoration: none;
}
nav a {
    text-decoration: none;
    color: #555;
}
nav a:active {
    color: #555;
}
nav a:visited {
    color: #555;
}
nav a:focus {
    color: #555;
}
nav a:hover {
    color: #000;
}
nav a.selected {
    font-weight: bold;
}
p:first-letter {
    font-size: 120%;
}
nav > ul > li > ul {
    display: none;/*hide nested ul*/
    position: absolute;
    padding: 0;
    list-style-type: none;
}
nav > ul > li:hover ul {
    display: block;/*show nested ul on hover*/
}

<nav>
    <ul>
        <li id="home"> <a href="home">Home</a></li>
        <li id="ourshows"><a href="shows">Our Shows</a>
          <ul>
                <li> <a href="home">Home</a></li>
                <li> <a href="home">Home</a></li>
                <li> <a href="home">Home</a></li>
            </ul>
        </li>
        <li id="booking"><a href="booking">Booking</a>

        </li>
        <li id="rehearsals"><a href="rehearsals">Rehearsals</a>

        </li>
        <li id="history"><a href="history">History</a>

        </li>
        <li id="contact"><a href="contact">Committee &amp; Contact</a>

        </li>
        <li id="involved"><a href="involved">Get Involved</a>

        </li>
        <li id="calendar"><a href="calendar">Calendar</a>

            <ul>
                <li> <a href="home">Home</a></li>
                <li> <a href="home">Home</a></li>
                <li> <a href="home">Home</a></li>
            </ul>
        </li>
    </ul>
</nav>