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 6 of 6
  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,411
    Thanks
    68
    Thanked 102 Times in 101 Posts

    Need help with css dropdown

    I've been trying all day to make a drop down menu and used like 4 different tutorials and nothing has worked yet. Even tried a generator and it failed.
    Can anyone help me? I just need the boxwood wreaths link to drop down 3 more links under it. Using the existing style sheet.

    http://www.americanmadesigns.com/gardenspot/

    Thanks,

    PHP Code:
    <div id="header">
                    <
    div id="logo">
                    <
    center>    <h1><a href="#">The Garden Spot</a></h1>  </center>
                    </
    div>
                    <
    div id="menu">
                        <
    ul>
                            <
    li class="first"><a href="index.html">Home</a></li>
                            <
    li><a href="about.html">About Us</a></li>
                            <
    li><a href="boxwood.html">Boxwood Wreaths</a></li>
                            <
    li class="last"><a href="contact.php">Contact</a></li>
                        </
    ul>
                        <
    br class="clearfix" />
                    </
    div>
                </
    div
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I use this tool sometimes. Works pretty good.

    menumaker
    Teed

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,411
    Thanks
    68
    Thanked 102 Times in 101 Posts
    I tried that, but it throws a ton of stuff into it, like font colors, background colors, hover colors, etc. A whole pile of mess. I'd like to keep everything the way I have it.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,718
    Thanks
    41
    Thanked 191 Times in 190 Posts
    So it doesn't look pretty, but it should give you what you want and let you implement it accordingly...

    Code:
    <html>
    
    <head>
    <style type="text/css">
    * { padding : none; border : none; margin : none; }
    .logo { background : blue; }
    .menuList { background : pink; }
    .clear { clear : both; visibility : hidden; }
    .menuList li {list-style : none; width : 150px; float: left; }
    .subMenu ul li { list-style : none; width : 100px; background : orange; display : none;} 
    .subMenu:hover ul li { display : block; }
    .content {background : white; color : purple; }
    #Wrapper { background : grey; border : 1px ridge black; width : 1024px;}
    </style>
    
    </head>
    
    
    <body>
    <div id="Wrapper">
      <div class="logo"> Logo image goes here </div>
      
      <div class="menu">
      <ul class="menuList">
        <li><a href="#"> index </a></li>
        <li><a href="#"> about </a></li>
        <li class="subMenu"><a href="#"> boxwood </a>
                            <hr class="clear" />
                            <ul>
                              <li><a href="#">one</a></li>
                              <li><a href="#"> two </a></li>
                              <li><a href="#"> three </a></li>
                            </ul>
        </li>
        <li><a href="#"> contact </a></li>
      </ul>
      </div>
      
      <hr class="clear" />
      
      <div class="content"> example content </div>
      
    </div>
    </body>
    </html>
    *and definitely does validate as it stands now lol :P

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Here you go sir!

    I have edited the menu you where using an placed a stylish drop down menu for you

    download url: http://5.175.183.24/codingforums/thegarden_tempz.zip

    This file will be deleted within 24/hr - I don't files using all my space on my server.


    Thank you

    tempz.

  • #6
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,411
    Thanks
    68
    Thanked 102 Times in 101 Posts
    It looks great, however you can't do it using my current menu style?
    Been a sign maker for 7 years. My business:
    American Made Signs


  •  

    Posting Permissions

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