How to achieve submenu effect?

Question

I'm trying to achieve a submenu effect where the user hovers over the F.A.Q. link and a submenu drops down and shows two other options - but I can't seem to even get the HTML correct (never mind the jQuery), could anyone help me out? For some reason, the list items in the submenu aren't displaying on separate lines despite the fact that I added the "display: block" element and I can't get the submenu to actually appear underneath the F.A.Q. link =\

http://jsfiddle.net/Kk8uw/

<nav id="navigation">
    <ul>
        <li><a href="/">Home</a>

        </li>
        <li><a href="/catalog.php">Catalog</a>

        </li>
        <li><a href="/build.php">Create A Sword</a>

        </li>
        <li><a href="/about.php">About Us</a>

        </li>
        <li><a href="/faq.php">F.A.Q.</a>

        </li>
        <ul id="submenu">
            <li><a href="/measurement.php">Measuring</a>

            </li>
            <li><a href="/terminology.php">Terminology</a>

            </li>
        </ul>
        <li><a href="/contact.php">Contact Us</a>

    </ul>
</nav>

CSS

#navigation {
    background: #000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    height: 36px;
}
#navigation ul {
    list-style-type: none;
    margin-left: 10px;
    padding: 0px;
}
#navigation ul li {
    float: left;
    display: block;
    border-right: 1px solid #444;
}
#navigation ul li a {
    display: block;
    padding: 10px;
    font-size: 13px;
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}
#navigation ul li a:hover {
    color: maroon;
}
#navigation ul li:first-child a {
    padding-left: 0px;
}
#submenu {
    position: absolute;
    left: 90px;
    list-style: none;
    top: 30px;
    background: #222222;
}
#navigation ul#submenu li a {
    display: block;
    padding: 5px 5px 13px 0px;
}
#navigation ul#submenu li {
    display: block;
    border: none;
}

Answer 1

The issue is your inheriting the float property from the #navigation ul li selector. The selector is targeting any li element contained in the #navigation container. So you could add a new selector to set the float value to none.

   #navigation #submenu li {
    float: none;
}

However, using id's for styling will result in a bloated style sheet and !important directive overrides. I recommend using class selectors to avoid the setting the specificity of your css selectors and to maximize code reuse.

One other thing I noticed is that you're missing a closing tag on your last menu item. I did a quick jsfiddle for you:

http://jsfiddle.net/beyondhyper/wMpgJ/3/

Answer 2

Add this to your styles, should get you headed in the right direction:

#navigation ul#submenu{
display:none;
}
#navigation ul:hover ul#submenu
{
display:block;
}

Answer 3

Check this Demo : http://jsfiddle.net/kP4jt/

HTML Code

<ul>
    <li><a href='#'>One</a></li>
    <li><a href='#'>Two</a></li>
    <li><a href='#'>Three</a></li>
    <li><a href='#'>Four</a></li>
    <li><a href='#'>Five</a>
        <ul>
            <li><a href='#'>Sub Menu 1</a></li>
            <li><a href='#'>Sub Menu 2</a></li>
            <li><a href='#'>Sub Menu 3</a></li>
        </ul>
    </li>
</ul>

CSS Code

* { padding: 0; margin : 0; }
ul li { 
    float : left; 
    list-style-type : none; 
    position : relative;
}
ul li a { 
    display : block;
    padding : 5px 20px;
    background-color : #eee;
    text-decoration : none;
    border-right : 1px solid #ccc;
    border-bottom : 1px solid #ccc;
}
ul ul { 
    display : none; 
    position : absolute;
    left : -1px;
}
ul ul li { float : none; }
ul li:hover ul { display : block; }
ul ul a { 
    border-left : 1px solid #ccc; 
    width : 80px;
}

In your HTML need to put the submenu - <ul> inside an <li> tag.

Add the effects as needed.