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 2 of 2

Thread: Drop down menu

  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Location
    Belgium
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drop down menu

    Hello

    Could anyone tell me how to convert the following menu in a drop down menu? (with the same style of the page where it is located).

    Thank you

    Code:
    <td><div id="menu">
    						<ul>
    							<li class="first"><a href="#" accesskey="1" title=""><a href="homepage.html" title="homepage" target="_self">Home</a></a></li>
    							<li><a href="#" accesskey="2" title=""><a href="About EMC.html" title="About" target="_self">About</a></a></li>
    							<li><a href="#" accesskey="3" title=""><a href="services.html" title="services" target="_self">Services</a></a></li>
    							<li><a href="#" accesskey="3" title=""><a href="join.html" target="_self">Join</a></a></li>
    							<li><a href="#" accesskey="4" title=""><a href="Contact.html" target="_self">Contact</a></a></li>
    						</ul>
    					</div></td>

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts
    You might try this:

    requires: <!doctype html>

    Code:
    #menu {position:relative;height:1.5em;}
    #menu ul {position:absolute;background:#3245ff;list-style:none;padding:5px;width:60px;}
    #menu ul li.first {display:inline;}
    #menu ul:hover li {display:block;}
    #menu ul li {display:none;}
    #menu ul li a {color:white;text-decoration:none;}
    You need to adjust the background/color/height/padding to your liking.

    The style puts an absolutely positioned list inside a relatively position element.
    It then hides all of the list items except for the first.
    When the mouse hovers over the list, all of the list items are revealed as block elements.

    This style works in modern browsers, but will not work in older vinatge browsers - browsers that do not undersand the doctype.
    If you are targeting IE7/IE6 or other vintage broswers I think you need to look to a script solution.
    Last edited by rdspoons; 09-18-2012 at 03:50 PM.

  • Users who have thanked rdspoons for this post:

    MariaCdH (10-01-2012)


  •  

    Posting Permissions

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