Mon, 2009-04-13 01:05
Hey all, I'm sorry for asking this, I know it's a common question
but I've tried over 5 different scripts and all don't work, they usually
show the menu but the 2'nd menu wont work on mouse over.
I would like to make this menu work here: http://sperling.com/examples/menuh/
I've downloaded and placed the css and csshover file in the same dir.
My site code: **** shows code placement ****
As it is, it just shows the vertical menu, not at all like the example.
Thanks so much!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>----Index----</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="layout.css" rel="stylesheet" type="text/css" /> <script src="maxheight.js" type="text/javascript"></script> **** head code for menu **** [code]<!--[if lt IE 7]> <style type="text/css" media="screen"> #menuh{float:none;} body{behavior:url(csshover.htc); font-size:100%;} #menuh ul li{float:left; width: 100%;} #menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;} </style> <![endif]--> </head> <body id="index" onload="new ElementMaxHeight();"> <div id="header_tall"> <div id="main"> <!--header --> <div id="header"> <div class="h_logo"> <div class="left"> <img alt="" src="images/logo.jpg" /><br /> </div> <div class="right"> <a href="#">RSS</a> </div> <div class="clear"></div> </div> <div id="menu"> <div class="rightbg"> <div class="leftbg"> <div class="padding"> <ul> <li><span>About us</span></li> <li><a href="index-1.html">Solutions</a></li> <li><a href="index-2.html">Products</a></li> <li><a href="index-3.html">Clients</a></li> <li><a href="index-4.html">Services</a></li> <li class="last"><a href="index-5.html">Contacts</a></li> </ul> <br class="clear" /> </div> </div> </div> </div> <div class="content"> <img alt="" src="images/header_t1.jpg" /><br /> <img alt="" src="images/header_t2.jpg" /><br /> <div class="text"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris.<br /> </div> <a href="#"><img alt="" src="images/header_click_here.jpg" /></a><div class="clear"></div> </div> </div> <!--header end--> **** the HTML MENU CODE *** <div id="menuh-container"> <div id="menuh"> <ul> <li><a href="#" class="top_parent">Item 1</a> <ul> <li><a href="#">Sub 1:1</a></li> <li><a href="#" class="parent">Sub 1:2</a> <ul> <li><a href="#">Sub 1:2:1</a></li> <li><a href="#">Sub 1:2:2</a></li> <li><a href="#">Sub 1:2:3</a></li> <li><a href="#">Sub 1:2:4</a></li> </ul> </li> <li><a href="#">Sub 1:3</a></li> <li><a href="#" class="parent">Sub 1:4</a> <ul> <li><a href="#">Sub 1:4:1</a></li> <li><a href="#">Sub 1:4:2</a></li> <li><a href="#">Sub 1:4:3</a></li> <li><a href="#">Sub 1:4:4</a></li> </ul> </li> <li><a href="#" class="parent">Sub 1:5</a> <ul> <li><a href="#">Sub 1:5:1</a></li> <li><a href="#">Sub 1:5:2</a></li> <li><a href="#">Sub 1:5:3</a></li> <li><a href="#">Sub 1:5:</a></li> <li><a href="#">Sub 1:5:5</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><a href="#" >Item 2</a> </ul> ... repeat and alter the list as needed </div> <!-- end the menuh-container div --> </div> <!-- end the menuh div --> *****End HTML Menu Code ***** <div id="middle"> <div class="indent"> <div class="columns1"> <div class="column1"> <div class="border"> <div class="btall"> <div class="ltall"> <div class="rtall"> <div class="tleft"> <div class="tright"> <div class="bleft"> <div class="bright"> <div class="ind"> <div class="h_text"> <img alt="" src="images/1-t1.jpg" /><br /> </div> <div class="padding"> <strong>Lorem ipsum dolor sit am</strong><br /> <p class="p1"> Cectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Pha- sellus porta. Fusce suscipit.<br /> </p> <a href="#"><img alt="" src="images/click_here.gif" /></a><br /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="indent_column"> </div> <div class="column2"> <div class="border"> <div class="btall"> <div class="ltall"> <div class="rtall"> <div class="tleft"> <div class="tright"> <div class="bleft"> <div class="bright"> <div class="ind"> <div class="h_text"> <img alt="" src="images/1-t2.jpg" /><br /> </div> <div class="padding"> <strong>Praesent vestibulum</strong><br /> <p class="p1"> Cum sociis natpenatibus et magnis dis parturient tes, nascetur ridicu- lus mus. Nulla. Fusce feugiat male- suada odio. Morbi nunc odio. <br /> </p> <a href="#"><img alt="" src="images/click_here.gif" /></a><br /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="indent_column"> </div> <div class="column3"> <div class="border"> <div class="btall"> <div class="ltall"> <div class="rtall"> <div class="tleft"> <div class="tright"> <div class="bleft"> <div class="bright"> <div class="ind"> <div class="h_text"> <img alt="" src="images/1-t3.jpg" /><br /> </div> <div class="padding"> <strong>Fusce suscipit</strong><br /> <p class="p1"> Socis natoque penatibus et magnis dis parient montes, nascetur ridicu- lus eugiat malsuada rbi nunc odio, gravida at, cursus nec, luctus.<br /> </p> <a href="#"><img alt="" src="images/click_here.gif" /></a><br /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="clear"></div> </div> <div class="columns2"> <div class="ver_line"> <div class="column1"> <div class="padding"> <img alt="" src="images/1-t4.gif" /><br /> <p class="p1"> <strong class="b_text">Lorem ipsum dolor sit aectetuer adipiscing elit. Praesent vestibulum molestie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis.</strong><br /><br /> Montes, nascetur ridiculus muulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra mnec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermen- tum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dus eget. elemen- tum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat... </p> <div class="more"><a href="#">learn more</a></div> </div> </div> <div class="column2"> <div class="padding"> <img alt="" src="images/1-t5.gif" /><br /> <div class="content"> <span class="date">October 20, 2007</span><br /> <p class="p1"> <a href="#">Time Management Tools</a> </p> Maecenas ttique o ultricies paretra magna. Doec accumsanlesuada... </div> <div class="content"> <span class="date">November 16, 2007</span><br /> <p class="p1"> <a href="#">The New Project Launched</a> </p> Lorem ipsum consectetuer adipisc- ing elit. Mauris fermentum dict... </div> <div class="more"><a href="#">view all news</a></div> </div> </div> <div class="clear"></div> </div> </div> </div> </div> <!--footer --> <div id="footer"> <div class="indent"> ©2008 Solutions Online • <a href="index-6.html">Privacy Policy</a> </div> </div> <!--footer end--> </div> </div> </body> </html>
Mon, 2009-04-13 23:15
#1
The CSS Style
Sorry, you may need the css style code.
/* CSS Document */ * { margin:0; padding:0; } body{ background:#FFFFFF url(images/footer_bg.gif) bottom repeat-x; } a:hover{text-decoration:none;} a img { border:0;} img {vertical-align:top;} ul { list-style:none;} .left { float:left;} .right {float:right;} .clear { clear:both;} html, input, textarea { font-family:Georgia, tahoma; font-size:11px; line-height:17px; color:#868686; } input, select { vertical-align:middle; font-weight:normal;} strong {font-size:12px; color:#444444;} a {color:#3d6f92; font-size:12px;} /*main layout */ .h_logo{ height:92px; width:100%;} #header_tall {background:url(images/header_tall.gif) top repeat-x;} #main { margin:0 auto;} #header .left {padding:26px 0 0 0;} #header .right {padding:46px 11px 0 0;} #header .right a {color:#868686; font-family:arial; font-size:12px; background:url(images/RSS.gif) no-repeat top right; padding:0 29px 2px 0;} #menu {background:url(images/menu_tall.gif) top repeat-x; height:65px;} #menu .rightbg {background:url(images/menu_right.gif) top right no-repeat;} #menu .leftbg {background:url(images/menu_left.gif) top left no-repeat; width:100%; height:65px;} #menu .padding {padding:9px 0;} #menu li {float:left; width:123px; background:url(images/menu_libg.gif) top right repeat-y; font-size:12px; text-align:center; display:block;} #menu li a {color:#919191; text-decoration:none; font-weight:normal; font-size:12px; display:block; padding:8px 0 5px 0;} #menu li span{ display:block; padding:8px 0 5px 0;} #menu li a:hover {color:#000000; text-decoration:underline;} #menu li span {color:#000000; text-decoration:underline;} #menu .last {background:none;} #header .content {background:url(images/header_bg.jpg) top left no-repeat; padding:45px 60px 28px 414px; color:#ffffff;} #header .content .text {padding:2px 0 33px 2px;} #header .content a img {float:right;} #middle { width:100%;} #footer .indent {padding:23px 0 0 17px; color:#868686; font-size:12px;} #footer a {color:#444444; font-weight:bold;} .border {background:url(images/border_tall.gif) top repeat-x;} .border .btall {background:url(images/border_tall.gif) bottom repeat-x;} .border .ltall {background:url(images/border_tall.gif) left repeat-y;} .border .rtall {background:url(images/border_tall.gif) right repeat-y;} .border .tleft {background:url(images/border_tl.gif) top left no-repeat;} .border .tright {background:url(images/border_tr.gif) top right no-repeat;} .border .bleft {background:url(images/border_bl.gif) bottom left no-repeat;} .border .bright {background:url(images/border_br.gif) bottom right no-repeat; width:100%;} .border .ind {padding:4px 4px 15px 2px;} .border a img {float:right;} .h_text {padding-bottom:2px; background:url(images/h_text_bg.gif) bottom repeat-x;} .more {text-align:right;} .more a{background:url(images/more_bg.gif) top right no-repeat; padding-right:13px; color:#000000; font-weight:bold;} .date {background:url(images/date_bg.gif) no-repeat 0 0; padding:2px 0 2px 22px; color:#444444;} li { color:#3d6f92;} li a {color:#3d6f92; font-size:11px;} .bot_line {background:url(images/h_text_bg.gif) bottom repeat-x;} .b_text {color:#3d6f92;} /* index */ #index #middle .indent {padding:17px 0 19px 0;} #index #middle .columns1 .column1 .padding{padding:9px 13px 3px 15px;} #index #middle .columns1 .column2 .padding{padding:9px 13px 3px 15px;} #index #middle .columns1 .column3 .padding{padding:9px 13px 3px 15px;} #index #middle .columns1 .p1 {padding:1px 0 7px 0;} #index #middle .columns2 {padding:21px 0 0 0;} #index #middle .columns2 .column1 .padding {padding:14px 21px 0 17px;} #index #middle .columns2 .column2 .padding {padding:14px 18px 0 21px;} #index #middle .columns2 .column1 .p1 {padding:7px 0 15px 0;} #index #middle .columns2 .column2 .content {padding:10px 0 15px 0;} #index #middle .columns2 .column2 .p1 {padding:2px 0 1px 0;} /* index-1 */ #index_1 #middle .indent {padding:17px 0 20px 0;} #index_1 #middle .column1 .padding1 {padding:16px 20px 0 16px;} #index_1 #middle .column1 .padding1 .content{padding:14px 0 27px 1px;} #index_1 #middle .column1 .padding1 .p1 {padding:1px 0 0 0;} #index_1 #middle .column1 .padding1 .more {padding:0 6px 0 0;} #index_1 #middle .column1 .padding2 {padding:36px 20px 0 16px;} #index_1 #middle .column1 .padding2 .content{padding:16px 0 0 1px;} #index_1 #middle .cols .more {margin-top:-19px;} #index_1 #middle .cols .p1 {padding:21px 0 1px 0;} #index_1 #middle .cols {padding:14px 0 0 0;} #index_1 #middle .column2 .padding{padding:9px 13px 3px 15px;} #index_1 #middle .column2 ul li {font-weight:bold;} #index_1 #middle .column2 .p1 {padding:1px 0 8px 0;} #index_1 #middle .column2 .p2 {padding:12px 0 17px 0;} #index_1 #middle .column2 .p3 {padding:17px 0 17px 0;} /* index-2 */ #index_2 #middle .indent {padding:17px 0 20px 0;} #index_2 #middle .columns1 .column1 .padding{padding:9px 13px 3px 15px;} #index_2 #middle .columns1 .column2 .padding{padding:9px 13px 3px 15px;} #index_2 #middle .columns1 .column1 ul {margin-bottom:7px;} #index_2 #middle .columns1 .column1 .p1 {padding:1px 0 0 0;} #index_2 #middle .columns1 .column2 .p1 {padding:1px 0 7px 0;} #index_2 #middle .columns2 {padding:21px 0 0 0;} #index_2 #middle .columns2 .column1 .padding {padding:14px 21px 0 17px;} #index_2 #middle .columns2 .column2 .padding {padding:14px 18px 0 21px;} #index_2 #middle .columns2 .column1 .p1 {padding:8px 0 10px 0;} #index_2 #middle .columns2 .column1 .p2 {padding:0 0 4px 0;} #index_2 #middle .columns2 .column2 .content {padding:7px 0 15px 0;} #index_2 #middle .columns2 .column2 ul {margin-bottom:1px;} /* index-3 */ #index_3 #middle .indent {padding:17px 0 20px 0;} #index_3 #middle .column1 .padding1 {padding:16px 15px 0 23px;} #index_3 #middle .column1 .padding1 .content{padding:5px 0 5px 1px;} #index_3 #middle .column1 .padding1 .p1 {padding:1px 0 0 0;} #index_3 #middle .column1 .padding1 .pd {padding:14px 0 0 0;} #index_3 #middle .column1 .padding1 .pd2 {padding:10px 0 0 0;} #index_3 #middle .column1 .padding1 .pd3 {padding:13px 0 0 0;} #index_3 #middle .column1 .padding1 .more {padding:0 6px 0 0;} #index_3 #middle .column1 .padding2 {padding:36px 20px 0 16px;} #index_3 #middle .column1 .padding2 .content{padding:16px 0 0 1px;} #index_3 #middle .cols .more {margin-top:-19px;} #index_3 #middle .cols .p1 {padding:21px 0 1px 0;} #index_3 #middle .cols {padding:14px 0 0 0;} #index_3 #middle .column2 .padding{padding:9px 13px 8px 15px;} #index_3 #middle .column2 .p1 {padding:1px 0 11px 0;} #index_3 #middle .column2 .p2 {padding:12px 0 11px 0;} #index_3 #middle .column2 .p3 {padding:13px 0 6px 0;} /* index-4 */ #index_4 #middle .indent {padding:17px 0 20px 0;} #index_4 #middle .column1 .padding1 {padding:16px 22px 0 16px;} #index_4 #middle .column1 .padding1 .content{padding:14px 0 34px 1px;} #index_4 #middle .column1 .padding1 .more {padding:0 2px 0 0; line-height:12px;} #index_4 #middle .column1 .padding2 {padding:34px 23px 0 16px;} #index_4 #middle .column1 .padding2 .content{padding:6px 0 0 1px;} #index_4 #middle .column1 .padding2 .more {margin-top:9px;} #index_4 #middle .column2 .padding{padding:9px 13px 3px 15px;} #index_4 #middle .column2 .margin .padding{padding:9px 12px 2px 15px;} #index_4 #middle .column2 ul {margin:0 0 2px 1px;} #index_4 #middle .column2 .margin {padding-top:6px;} #index_4 #middle .column2 .p1 {padding:0 0 8px 0;} /* index-5*/ #index_5 #middle .indent {padding:17px 0 20px 0;} #index_5 #middle .columns1 .column1 .padding{padding:9px 13px 16px 15px;} #index_5 #middle .columns1 .column2 .padding{padding:9px 13px 0 15px;} #index_5 #middle .columns1 .column1 ul {margin-bottom:7px;} #index_5 #middle .columns1 .column1 .p1 {padding:1px 0 0 0;} #index_5 #middle .columns1 a{color:#868686; font-size:11px; text-decoration:none;} #index_5 #middle .columns1 a:hover {text-decoration:underline;} #index_5 #middle .columns1 .column2 strong{font-size:11px;} #index_5 #middle .columns2 {padding:22px 0 0 0;} #index_5 #middle .columns2 .padding {padding:14px 15px 0 17px;} #index_5 #middle .columns2 .p1 {padding:14px 0 10px 0;} #index_5 #middle .columns2 .p2 {padding:0 0 4px 0;} #form .column1 {width:183px;} #form .column2 {width:521px;} form .row {height:25px;} form .row1 {height:34px;} .input {width:171px; height:18px; border:1px solid #a4a4a4; background:none; padding:0 0 0 5px; font-family:tahoma; line-height:13px; color:#a4a4a4;} textarea {width:516px; height:68px; border:1px solid #a4a4a4; background:none; padding:0 0 0 5px; overflow:auto; font-family:tahoma; line-height:13px; color:#a4a4a4;} form .div {text-align:right; padding:6px 0 0 0;} /* index-6 */ #index_6 #middle .indent {padding:33px 15px 17px 17px;} #index_6 #middle .p1 {padding:6px 0 0 0;}
Mon, 2009-04-13 23:19
#2
I dunno about that script,
I dunno about that script, but I use the jQuery Superfish script and it works great.
Tue, 2009-04-14 01:26
#3
SuperFish
I've tried that one as well, the menu always shows but no dropdowns?
Also, I just upgraded from MX2004 to CS4 and discovered SPRY, I did
a menu in SPRY and it works, except that Firefox does not like it.. ARGG
anyone know why suckerfish is better, why not just use SPRY?
Tue, 2009-04-14 01:44
#4
Here's one that is almost
Here's one that is almost identical to what you want. It uses javascript but only for IE6 and older.