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
  1. #1
    Regular Coder
    Join Date
    Apr 2008
    Posts
    115
    Thanks
    11
    Thanked 0 Times in 0 Posts

    make this css menu into an drop down

    hi there guys how would i make this simple css menu into an drop down


    Code:
    <div id="menu">
    
    <a title="Home" href="index.php" class="nav">Home</a>
    <a title="WebHosting" href="#" class="nav">one</a>
    <a title="Website Design" href="#" class="nav">tow</a>
    <a title="Other Services" href="se#" class="nav">Drop down here</a>
    <a title="Ecommerce" href="s#" class="nav">three</a>
    <a title="CMS" href="#" class="nav">Four</a>
    <a title="Contact us" href="contact_us.php" class="nav">Contact us</a>
    </div>
    css code
    Code:
    #menu {
    height:30px;
    line-height:30px;
    background-color:#FFF;
    color:#000;
    }
    #menu ul {
    list-style-type: none;
    padding-left: 20px;
    }
    #menu ul li {
    display: block;
    float:left;
    }
    #menu ul li a {
    padding: 0 20px 0 0;
    text-decoration: none;
    font-weight: 100;
    font-size: 14px;
    color:#000;
    }
    #menu ul li a:hover {
    	color:#000;
    	text-decoration: none;
    	text-align: center;
    }
    a.nav, a.nav:link, a.nav:visited {display:block; width:135px; height:25px; background:#4683B0; border:1px solid #000;margin-top:0px;text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#FFF; line-height:25px; overflow:hidden; float:left;}
    a.nav:hover {color:#fff; background:#4683B0;}
    a.nav:active {color:#fff; background:#4683B0;}
    thank you again i would like to make this an drop down as it fits really nicely with the rest off my website

    cheers

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have a look here for a good tutorial.


  •  

    Posting Permissions

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