i want to make a drop down menu<br /><br />i include a picture of what i am talking about because i am not sure if what i want is even a drop down menu<!--content-->
try AListApart's website.<br /><br />Essentially, you will be using lists to layout your menu, with this sort of structure:<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><ul class='menu'><br />Â Â <li>Products</li><br />Â Â <li>Services<br />Â Â Â Â Â Â Â Â <ul><br />Â Â Â Â Â Â Â Â Â Â Â Â <li>New Item</li><br />Â Â Â Â Â Â Â Â Â Â Â Â <li>New Item</li><br />Â Â Â Â Â Â Â Â Â Â Â Â <li>New Item</li><br />Â Â Â Â Â Â Â Â Â Â Â Â <li>New Item</li><br />Â Â Â Â Â Â Â Â Â Â Â Â <li>New Item</li><br />Â Â Â Â Â Â Â Â </ul><br />Â Â Â Â </li><br /></ul><!--c2--></div><!--ec2--><br /><br />your css to make things work roughly correctly will be:<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->ul.menu, ul.menu li, ul.menu ul { list-style: none; padding: 0px; margin: 0px; }<br />ul.menu { display: block; width: 600px; height: 25px; overflow: visible; }<br />.menu > li { display: block; float: left; width: 200px; padding: 5px 0px; text-align: center; }<br />.menu > li > ul { display: none; }<br />.menu > li:hover > ul { display: block; width: 200px; border: 1px solid #000; }<br />.menu > li > ul > li { display: block; padding: 5px; border-bottom: 1px solid #444; }<br />.menu > li > ul > li:hover { background: #eee; }<!--c2--></div><!--ec2--><br /><br />note the somewhat overzealous use of ">", this means "parent > child", and will not match any sub-children.<br /><br />This CSS will not work in IE6 - you will need to use some JS for that.<!--content-->
Yeah, you're best bet is the son of suckerfish which php_penguin is referring to (it's also covered target="_blank">http://www.htmldog.com/articles/suckerfish/dropdowns/<!--content-->
try AListApart's website.<br /><br />Essentially, you will be using lists to layout your menu, with this sort of structure:<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1--><ul class='menu'><br />Â Â <li>Products</li><br />Â Â <li>Services<br />Â Â Â Â Â Â Â Â <ul><br />Â Â Â Â Â Â Â Â Â Â Â Â <li>New Item</li><br />Â Â Â Â Â Â Â Â Â Â Â Â <li>New Item</li><br />Â Â Â Â Â Â Â Â Â Â Â Â <li>New Item</li><br />Â Â Â Â Â Â Â Â Â Â Â Â <li>New Item</li><br />Â Â Â Â Â Â Â Â Â Â Â Â <li>New Item</li><br />Â Â Â Â Â Â Â Â </ul><br />Â Â Â Â </li><br /></ul><!--c2--></div><!--ec2--><br /><br />your css to make things work roughly correctly will be:<br /><br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->ul.menu, ul.menu li, ul.menu ul { list-style: none; padding: 0px; margin: 0px; }<br />ul.menu { display: block; width: 600px; height: 25px; overflow: visible; }<br />.menu > li { display: block; float: left; width: 200px; padding: 5px 0px; text-align: center; }<br />.menu > li > ul { display: none; }<br />.menu > li:hover > ul { display: block; width: 200px; border: 1px solid #000; }<br />.menu > li > ul > li { display: block; padding: 5px; border-bottom: 1px solid #444; }<br />.menu > li > ul > li:hover { background: #eee; }<!--c2--></div><!--ec2--><br /><br />note the somewhat overzealous use of ">", this means "parent > child", and will not match any sub-children.<br /><br />This CSS will not work in IE6 - you will need to use some JS for that.<!--content-->
Yeah, you're best bet is the son of suckerfish which php_penguin is referring to (it's also covered target="_blank">http://www.htmldog.com/articles/suckerfish/dropdowns/<!--content-->