Need help with css dropdown

myfayt · 12-05-2012, 12:34 AM

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>

teedoff · 12-05-2012, 12:42 AM

I use this tool sometimes. Works pretty good.

menumaker

myfayt · 12-05-2012, 03:02 PM

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.

alykins · 12-05-2012, 08:53 PM

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

tempz · 12-05-2012, 11:02 PM

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.

myfayt · 12-06-2012, 12:56 PM

It looks great, however you can't do it using my current menu style?