CodingForums.com - Nav Menu Problem

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Nav Menu Problem (http://www.codingforums.com/showthread.php?t=282263)

Nav Menu Problem

anyone help, i have a horizontal menu the html is:

<div id="navigation">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="aboutus.html">ABOUT US</a></li>
<li><a href="courses.html">COURSES</a></li>
<li>OTHER SERVICES
<ul>
<li><a href="#">SUB MENU 1</a></li>
<li><a href="#">SUB MENU 2</a></li>
</ul>
</li>
<li><a href="gallery">GALLERY</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contactus.html">CONTACT US</a></li>
</ul>

</div>

and the CSS is:

#navigation ul{ padding:20px; background-color:#333; position:absolute;} /*main nav bar*/
#navigation li{ margin-left:30px; float:left;} /* primary links */
#navigation ul li{ font-size:24px; color:#FFF;} /*other services text*/
#navigation a { display:block; color:#FFF;} /* all text excl other services */
#navigation a:hover{ color:#F60;} /* main links hover */
#navigation ul ul{ margin-top:20px; background-color:#666;} /* sub menu */
#navigation ul ul a{ color:#CCC;} /* sub menu links */
#navigation ul ul a:hover{color:#CF0;} /* sub menu hovers */

problem im having is how do i make the sub menu's hidden and appear when i move over "other services"?

thank you
p.s. its a site im building so its not online atm.

Hello Nicholas23,
Look at a demo I have of a simple CSS dropdown menu.

Look at your menu based on that example -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

html, body {

        margin: 0;

        background: #fc6;

}

#navigation {

        width: 1000px;

        margin: 50px auto;

        padding: 0 0 400px;

        background: #ccc;

}

ul {

        margin: 0;

        padding: 0;

        background: #333;

}

        ul li {

                padding: 0 10px;

                display: inline-block;

                position: relative;

                list-style: none;

                font-size: 24px;

                color: #fff;

        }

        ul li a {

                display: block;

                color: #fff;

                text-decoration: none;

        }

        ul li:hover {color: #cf0;}

                ul ul {

                        position: absolute;

                        top: 26px;

                        left: 0;

                        visibility: hidden;

                        background: #666666;

                }

                ul li:hover ul {visibility: visible;}

                ul ul a { color: #ccc; }

</style>

</head>

<body>

    <div id="navigation">

        <ul>

            <li><a href="index.html">HOME</a></li>

            <li><a href="aboutus.html">ABOUT US</a></li>

            <li><a href="courses.html">COURSES</a></li>

                <li>OTHER SERVICES

                    <ul>

                        <li><a href="#">SUB MENU 1</a></li>

                        <li><a href="#">SUB MENU 2</a></li>

                    </ul>

                </li>

            <li><a href="gallery">GALLERY</a></li>

            <li><a href="faq.html">FAQ</a></li>

            <li><a href="contactus.html">CONTACT US</a></li>

            </ul>

    <!--end navigation--></div>

</body>

</html>

thanks thats really helpful, wasnt the way i was thinking but very useful.