mrkidd85 Posted December 18, 2009 Share Posted December 18, 2009 Hi, i got my drop down box from somewhere but it's annoying me because when I hover over a drop down menu, the drop down options don't cover the box and it looks really unprofessional.Can anybody please tell me what I can do to change it, and also, get rid of the white shadow?Here is the link herecss ul.cssMenu ul{display:none}ul.cssMenu li:hover>ul{display:block}ul.cssMenu ul{position: absolute;left:-1px;top:98%;}ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}ul.cssMenu,ul.cssMenu ul { margin:0px; list-style:none; padding:0px 2px 2px 0px; background-color:#000000; background-repeat:repeat; border-color:#cccccc #111111 #111111 #cccccc; border-width:1px; border-style:solid;}ul.cssMenu table {border-collapse:collapse}ul.cssMenu { display:block; zoom:1; float: left;}ul.cssMenu ul{ width:155.4px;}ul.cssMenu li{ display:block; margin:2px 0px 0px 2px; font-size:0px;}ul.cssMenu a:active, ul.cssMenu a:focus {outline-style:none;}ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover { display:block; vertical-align:middle; background-color:#000000; border-width:1px; border-color:#000000; border-style:solid; text-align:left; text-decoration:none; padding:2px 5px 2px 10px; _padding-left:0; font:14px Arial; color: #FFFFFF; text-decoration:none; cursor:default;}ul.cssMenu span{ overflow:hidden;}ul.cssMenu li { float:left;}ul.cssMenu ul li { float:none;}ul.cssMenu ul a { text-align:left; white-space:nowrap;}ul.cssMenu li.sep{ text-align:left; padding:0px; line-height:0; height:100%;}ul.cssMenu li.sep span{ float:none; padding-right:0; width:0px; height:100%; display:inline-block; background-color:#cccccc #111111 #111111 #cccccc; background-image:none;}ul.cssMenu ul li.sep span{ width:100%; height:3px;}ul.cssMenu li:hover{ position:relative;}ul.cssMenu li:hover>a{ background-color:#00ff00; border-color:#000000; border-style:solid; font:14px Arial; color: #FFFFFF; text-decoration:none;}ul.cssMenu li a:hover{ position:relative; background-color:#00ff00; border-color:#000000; border-style:solid; font:14px Arial; color: #FFFFFF; text-decoration:none;}ul.cssMenu li.dis a { color: #666 !important;}ul.cssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;height:16px;}ul.cssMenu ul img {width:16px;height:16px;}ul.cssMenu img.over{display:none}ul.cssMenu li.dis a:hover img.over{display:none !important}ul.cssMenu li.dis a:hover img.def {display:inline !important}ul.cssMenu li:hover > a img.def {display:none}ul.cssMenu li:hover > a img.over {display:inline}ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover a:hover ul img.def,ul.cssMenu a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover img.over,ul.cssMenu a:hover a:hover a:hover a:hover img.over{display:inline}ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover a:hover ul img.over,ul.cssMenu a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover img.def,ul.cssMenu a:hover a:hover a:hover a:hover img.def{display:none}ul.cssMenu a:hover ul,ul.cssMenu a:hover a:hover ul,ul.cssMenu a:hover a:hover a:hover ul{display:block}ul.cssMenu a:hover ul ul,ul.cssMenu a:hover a:hover ul ul{display:none}ul.cssMenu span{ display:block; background-image:url(./images/arr_white.gif); background-position:right center; background-repeat: no-repeat; padding-right:12px;}ul.cssMenu li:hover>a>span{ background-image:url(./images/arrv_white.gif);}ul.cssMenu a:hover span{ _background-image:url(./images/arrv_white.gif)}ul.cssMenu ul span,ul.cssMenu a:hover table span{background-image:url(./images/arr_white.gif)}HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!--Design by Free CSS Templateshttp://www.freecsstemplates.orgReleased for free under a Creative Commons Attribution 2.5 License--><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>McCarthy (Contractors) SW Limited</title><meta content="Render, Plaster, Builder, South West, Contractors, Devon, " name="keywords" /><meta content="Contractors" name="description" /><link href="default.css" rel="stylesheet" type="text/css" /><style type="text/css">.style1 { font-size: xx-large; font-family: Arial, Helvetica, sans-serif; margin-top: 0;}.style2 { text-align: center;}.style3 { font-size: medium;}.style5 { font-size: large; color: #FF0000;}body *{line-height:1.22em}.style7 { color: #FFFFFF;}.style9 { color: #00FF00;}.style11 { font-family: Eurostile;}.style13 { color: #FF0000; font-size: medium;}a { color: #FFFFFF;}a:visited { color: #FFFFFF;}a:active { color: #FFFFFF;}a:hover { color: #FFFFFF;}.style16 { margin-bottom: 0;}.style17 { text-align: center; font-size: small;}.style18 { color: #FFFFFF; font-size: medium; font-family: Arial, Helvetica, sans-serif;}.style20 { text-decoration: none;}.style21 { font-family: Arial, Helvetica, sans-serif;}</style></head><body><div id="header" style="width: 835px" class="style16"> <h1 style="width: 365px; height: 89px" class="style1"><span class="style9">Mc</span>Carthy (Contractors) <span class="style1">SW Limited</span></h1> <h2 class="style11">Menu</h2> <ul class="cssMenu cssMenum"> <li class=" cssMenui"><a href="index.html">Home</a></li> <li class=" cssMenui"><a class=" cssMenui" href="#"><span>Services</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class=" cssMenum"> <li class=" cssMenui"><a class=" cssMenui" href="external.html">External</a></li> <li class=" cssMenui"><a class=" cssMenui" href="throughcolour.html">Through Colour Renders</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class=" cssMenui"><a class=" cssMenui" href="products.html">Products</a></li> <li class=" cssMenui"><a class=" cssMenui" href="#"><span>Contact</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class=" cssMenum"> <li class=" cssMenui"><a class=" cssMenui" href="contactus.html">Contact Details</a></li> <li class=" cssMenui"><a class=" cssMenui" href="enquiry.html">General Enquiry</a></li> <li class=" cssMenui"><a class=" cssMenui" href="subenq.html">Subcontractor Enquiry</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div>Please help!!??? Link to comment Share on other sites More sharing options...
thescientist Posted December 18, 2009 Share Posted December 18, 2009 is that all just for a list!? phew! Here, try this outhttp://www.cssplay.co.uk/you can do a lot more with a lot less.I would encourage you to read (or reread) the HTML and CSS tutorials on this site. Your page happens to have a lot of HTML validation errors too. Link to comment Share on other sites More sharing options...
mrkidd85 Posted December 18, 2009 Author Share Posted December 18, 2009 is that all just for a list!? phew! Here, try this outhttp://www.cssplay.co.uk/you can do a lot more with a lot less.I would encourage you to read (or reread) the HTML and CSS tutorials on this site. Your page happens to have a lot of HTML validation errors too.Can you tell me what validation errors there are?I have tried CSS Play but I prefer the drop down menu I have.Is there a way to make it stretch and take the white shadow away?I have been on CSS Play and find it to be no use, as it shows you the menu but there is no download. Link to comment Share on other sites More sharing options...
mrkidd85 Posted December 18, 2009 Author Share Posted December 18, 2009 Come on, will someone please help me out I have to finish this site tomorrow.I don't want to use CSSPlay, because I don't know how to get the script from the source, I understand I get the HTML from the "info" div, but I don't know where to get the CSS.Please somebody help with my original question. Link to comment Share on other sites More sharing options...
thescientist Posted December 18, 2009 Share Posted December 18, 2009 the CSS is in the source of the same page. As far as the errors, if you click on the validator link in my signature, you can find out.Maybe try removing some of those border properties. I'm assuming you're trying to get those half-boxes from appearing when you hover? I'm surprised that if you navigate through this code, then you wouldn't be able to adapt some CSSPlay code. And I'm sure they have to have a drop down menu; their entire site is about valid CSS drop down menu's. There are literally hundreds of them there, even drop downs. Here's the second one in their list.http://www.cssplay.co.uk/menus/basic_dd.html Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.