Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Nav Menu Problem

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

    <div id="navigation"><!--- nav menu horizontal --->
    <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><!--- nav menu horizontal end --->

    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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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>
    Last edited by Excavator; 11-15-2012 at 04:51 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Nicholas23 (11-16-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks thats really helpful, wasnt the way i was thinking but very useful.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •