Hi, I have tried my best but I just can't find the solution. I got a horizontal menu from Javascript Kit and am trying to modify it, but no luck. Here is the original script in action: http://www.javascriptkit.com/script/script2/csstopmenu.shtml And here is my modification or fusion, whatever describes it the best: http://byrnecars.com/sandbox/menu.html You can see my problem instantly, I need it all in one line. Here is my CSS: .horizontalcssmenu ul{ margin: 0; padding: 0; list-style-type: none; } /*Top level list items*/ .horizontalcssmenu ul li{ position: relative; display: inline; float: left; } /*Top level menu link items style*/ .horizontalcssmenu ul li a{ display: block; width: 112px; /*Width of top level menu link items*/ padding: 0px 0px; border: 1px solid #202020; border-left-width: 0; text-decoration: none; color: black; font: bold 13px Tahoma; } /*Sub level menu*/ .horizontalcssmenu ul li ul{ left: 0; top: 0; border-top: 1px solid #202020; position: absolute; display: block; visibility: hidden; z-index: 100; } /*Sub level menu list items*/ .horizontalcssmenu ul li ul li{ display: inline; float: none; } /* Sub level menu links style */ .horizontalcssmenu ul li ul li a{ width: 160px; /*width of sub menu levels*/ font-weight: normal; padding: 2px 5px; background: #e3f1bd; border-width: 0 1px 1px 1px; } .horizontalcssmenu ul li ul li a:hover{ background: #cde686; } .horizontalcssmenu .arrowdiv{ position: absolute; right: 0; } * html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/ padding-top: 1em; } /* Holly Hack for IE \*/ * html .horizontalcssmenu ul li { height: 1%; } * html .horizontalcssmenu ul li a { height: 1%; } /* End */ Code (markup): And here is my html: <html><head><link rel="stylesheet" type="text/css" href="csshorizontalmenu.css"> <script type="text/javascript" src="csshorizontalmenu.js"> /*********************************************** * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com) * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ </script> <script language="Javascript"> <!-- www.hypergurl.com if (document.images) { image1 = new Image image2 = new Image image3 = new Image image4 = new Image image5 = new Image image6 = new Image image7 = new Image image8 = new Image image9 = new Image image10 = new Image image11 = new Image image12 = new Image image13 = new Image image14 = new Image image1.src = 'http://byrnecars.com/images/seoff1.jpg' image2.src = 'http://byrnecars.com/images/seon1.jpg' image3.src = 'http://byrnecars.com/images/s2on.jpg' image4.src = 'http://byrnecars.com/images/s2off.jpg' image5.src = 'http://byrnecars.com/images/s3on.jpg' image6.src = 'http://byrnecars.com/images/s3off.jpg' image7.src = 'http://byrnecars.com/images/s4on.jpg' image8.src = 'http://byrnecars.com/images/s4off.jpg' image9.src = 'http://byrnecars.com/images/s5on.jpg' image10.src = 'http://byrnecars.com/images/s5off.jpg' image11.src = 'http://byrnecars.com/images/s6on.jpg' image12.src = 'http://byrnecars.com/images/s6off.jpg' image13.src = 'http://byrnecars.com/images/s7on.jpg' image14.src = 'http://byrnecars.com/images/s7off.jpg' } --> </script> </head><body><div class="horizontalcssmenu"> <ul id="cssmenu1"> <a onmouseover="document.rollover.src=image2.src" onmouseout="document.rollover.src=image1.src" href="http://byrnecars.com"><img src="http://byrnecars.com/images/seoff1.jpg" name="rollover" border="0" height="31"></a> <li><a onmouseover="document.rollover1.src=image3.src" onmouseout="document.rollover1.src=image4.src" href="http://byrnecars.com/carsales/index.php?list/1"><img src="http://byrnecars.com/images/s2off.jpg" name="rollover1" border="0" height="31"></a></li> <li><a onmouseover="document.rollover2.src=image5.src" onmouseout="document.rollover2.src=image6.src" href="about-us.php"><img src="http://byrnecars.com/images/s3off.jpg" name="rollover2" border="0" height="31"></a></li> <li style="z-index: 0;"><a onmouseover="document.rollover3.src=image7.src" onmouseout="document.rollover3.src=image8.src" href="Services.php"><img src="http://byrnecars.com/images/s4off.jpg" name="rollover3" border="0"><span class="arrowdiv"></span></a> <ul style="top: 30px; visibility: hidden; z-index: 100;"> <li><a href="#">NOT SET 1</a></li> <li><a href="#">NOT SET 2</a></li> <li><a href="#">NOT SET 3</a></li> </ul> </li> <li><a onmouseover="document.rollover4.src=image9.src" onmouseout="document.rollover4.src=image10.src" href="Find-Us.php"><img src="http://byrnecars.com/images/s5off.jpg" name="rollover4" border="0"></a></li> <li><a onmouseover="document.rollover5.src=image11.src" onmouseout="document.rollover5.src=image12.src" href="Contact-us.php"><img src="http://byrnecars.com/images/s6off.jpg" name="rollover5" border="0"></a></li> <li style="z-index: 0;"><a onmouseover="document.rollover6.src=image13.src" onmouseout="document.rollover6.src=image14.src" href="shop.php"><img src="http://byrnecars.com/images/s7off.jpg" name="rollover6" border="0"><span class="arrowdiv"></span></a> <ul style="top: 30px; visibility: hidden; z-index: 100;"> <li><a href="#">NOT SET 1</a></li> <li><a href="#">NOT SET 2</a></li> <li><a href="#">NOT SET 3</a></li> </ul></li> </ul> </div> </body></html> Code (markup): Any help, I'm sure it's quite simple, but I cant see it.
This: <a onmouseover="document.rollover.src=image2.src" onmouseout="document.rollover.src=image1.src" href="http://byrnecars.com"><img src="http://byrnecars.com/images/seoff1.jpg" name="rollover" border="0" height="31"></a> ... needs to be in a list item. Didn't try it but it should work. : )
When I include it in a list: <li><a onmouseover="document.rollover.src=image2.src" onmouseout="document.rollover.src=image1.src" href="http://byrnecars.com"><img src="http://byrnecars.com/images/seoff1.jpg" name="rollover" border="0" height="31"></a></li> Code (markup): The following happens: http://byrnecars.com/sandbox/menu.html As there is a value in the style sheet: width: 112px; /*Width of top level menu link items*/ Code (markup): I have 1 image at the beginning that is 60px and the rest are 120px here is my conflict, that's why I attempted to remove it from the list value but a brake ocurres. Thanks for the fast reply!!!
Are you okay with just giving the first item an id, such as: "<li><a id="item1" onmouseover........" Then in your CSS add: #item1{width:60px;} That way it will override the general style.
Take a look!!! Perfect, your my angel, you have saved me from a long night in front of the computer. hehe Thakn you.