driz Posted June 29, 2009 Share Posted June 29, 2009 Hi this website has a drop down menu using CSS: http://www.solidcamuk.com/new_website/However It is broken in Internet Explorer. Can you please help me, as I can't figure what IE needs to get it working properly. Thanks Link to comment Share on other sites More sharing options...
driz Posted June 30, 2009 Author Share Posted June 30, 2009 Any updates thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2009 Share Posted June 30, 2009 Apparently, the element is not expanding to enclose all the items inside it, so once the mouse is removed from the item it is no hovering over the menu anymore.You should go to CSS Play to see examples of hover menus that work in all modern browsers. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 2, 2009 Share Posted July 2, 2009 just gone though your code and came up with this working solution, the javascript fixes the IE problem (based on suckerfish menu) and with a few amendments within the css it works fine, in IE6, IE7, FF , O, and chrome (the shadow effect only works for chrome so you might consider removing the -moz coding for this, ormaybe consider using background image (although IE6 will have a problem with a png transparent shadow type image, 17% users still use IE6). <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=1024" /> <title>SolidCAM UK Ltd - The Leaders in Integrated CAM</title> <base href="http://localhost/WebPageExamples/" /> <meta name="keywords" content="solidcam,solidcmm,solidworks" /> <meta name="description" content="A leading supplier of integrated CAD/CAM Software and associative products, based in Barnsley, South Yorkshire." /> <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="screen2.css" type="text/css" /> <script type="text/javascript"><!--//var sfHover;sfHover = function() {var sfEls = document.getElementById("mainmenu").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } }}if (window.attachEvent) window.attachEvent("onload", sfHover);//--></script> <!--[if IE]> <style type="text/css"> #nav ol li ul li{ line-height:25px !important; margin-left: -16px;} #nav ol li ul li a{ padding-left: 28px;} #nav li ul, #nav ol li ul {width: 191px;} } </style> <script type="text/javascript" charset="utf-8"> document.createElement("article"); document.createElement("nav"); document.createElement("section"); document.createElement("header"); document.createElement("aside"); document.createElement("footer"); </script> <![endif] --> </head> <body id="home" class=""> <!-- HEADER --> <header id="global"> <nav id="nav"> <div class="wrapper"> <h1 id="logo"><a href="/">SolidCAM UK</a></h1> <ol id="mainmenu"> <li id="n-products"><a href="products/solidcam.php" title="Products" accesskey="2">Products</a> <ul> <li><a href="products/solidcam.php" title="SolidCAM">SolidCAM</a></li> <li><a href="products/inventorcam.php" title="InventorCAM">InventorCAM</a></li> <li><a href="products/solidcmm.php" title="SolidCMM">SolidCMM</a></li> <li><a href="products/cimco.php" title="Cimco">Cimco</a></li> <li><a href="products/imold.php" title="iMOLD">iMOLD</a></li> <li><a href="products/sylviexpert.php" title="SylvieXpert">SylvieXpert</a></li> </ul> </li> <li id="n-services"><a href="services/training.php" title="Services" accesskey="3">Services</a> <ul> <li><a href="services/training.php" title="Training">Training</a></li> <li><a href="services/installation.php" title="Installation">Installation</a></li> <li><a href="services/postprocessors.php" title="Post-processors">Post-processors</a></li> <li><a href="services/programming.php" title="Programming">Programming</a></li> <li><a href="services/dnc.php" title="DNC">DNC</a></li> </ul> </li> <li id="n-support"><a href="support/documentation.php" title="Support" accesskey="4">Support</a> <ul> <li><a href="support/documentation.php" title="Documentation">Documentation</a></li> <li><a href="support/feedback.php" title="Feedback">Feedback</a></li> <li><a href="support/esupport.php" title="eSupport">eSupport</a></li> </ul> </li> <li id="n-downloads"><a href="downloads/demos.php" title="Downloads" accesskey="5">Downloads</a> <ul> <li><a href="downloads/demos.php" title="Demos">Demos</a></li> <li><a href="downloads/videos.php" title="Videos">Videos</a></li> <li><a href="downloads/brochures.php" title="Brochures">Brochures</a></li> <li><a href="downloads/presentations.php" title="Presentations">Presentations</a></li> </ul> </li> <li id="n-whyus"><a href="whyus/testimonials.php" title="Why Us?" accesskey="6">Why Us?</a> <ul> <li><a href="whyus/testimonials.php" title="Testimonials">Testimonials</a></li> <li><a href="whyus/stories.php" title="Success Stories">Success Stories</a></li> <li><a href="whyus/reviews.php" title="Reviews">Reviews</a></li> </ul> </li> <li id="n-company"><a href="company/about.php" title="Company" accesskey="7">Company</a> <ul> <li><a href="company/about.php" title="Information">Information</a></li> <li><a href="company/office.php" title="Office">Office</a></li> <li><a href="company/contact.php" title="Contact">Contact</a></li> <li><a href="company/events.php" title="Trade Shows + Events">Trade Shows + Events</a></li> <li><a href="company/press.php" title="Press Releases">Press Releases</a></li> </ul> </li> </ol> </div> </nav> </header> <!-- // HEADER --> <div style="clear:both;"></div> <!-- CONTENT --> <section id="masthead" style="height:350px;margin:0 0 50px 0;"> <div class="wrapper"> <a href="products/solidcam.php" title="SolidCAM"><img style="position:absolute;top:30px;right:0;" src="_img/hero.png" /></a> <h1 style="position:absolute;top:100px;right:350px;text-align:right;">SolidCAM is the complete, ‘best-in-class’<br/>Manufacturing Suite for efficient and profitable CNC-Programming<br/>inside SolidWorks.</h1> </div> </section> <section> <div class="wrapper"> <section id="content"> <h1 style="text-align:left;">Welcome to SolidCAM UK Ltd. A leading supplier of integrated CAD/CAM Software and associative products.</h1> <hr /> <h1>Testimonials</h1> <article> <p><a href="whyus/testimonials.php" title="Read more testimonials">Read more testimonials</a> and/or <a href="support/feedback.php" title="submit your own feedback">submit your own feedback</a>.</p> </article> </section> <section id="sidebar"> <section id="sidebar-press"> <h1>Press Releases</h1> </section> <hr /> <section id="sidebar-events"> <h1>Upcoming Events</h1> </section> </section> </div> </section> <div style="clear:both;"></div> <!-- FOOTER --> <div id="footer-section"> <div class="wrapper"> <nav id="sitemap"> <div class="sitemap"> <ul> <li><a href="products/solidcam.php" title="Products"><strong>Products</strong></a> <ul> <li><a href="products/solidcam.php" title="SolidCAM">SolidCAM</a></li> <li><a href="products/inventorcam.php" title="InventorCAM">InventorCAM</a></li> <li><a href="products/solidcmm.php" title="SolidCMM">SolidCMM</a></li> <li><a href="products/cimco.php" title="Cimco">Cimco</a></li> <li><a href="products/imold.php" title="iMOLD">iMOLD</a></li> <li><a href="products/sylviexpert.php" title="SylvieXpert">SylvieXpert</a></li> </ul> </li> </ul> <ul> <li><a href="services/training.php" title="Services"><strong>Services</strong></a> <ul> <li><a href="services/training.php" title="Training">Training</a></li> <li><a href="services/installation.php" title="Installation">Installation</a></li> <li><a href="services/postprocessors.php" title="Post-processors">Post-processors</a></li> <li><a href="services/programming.php" title="Programming">Programming</a></li> <li><a href="services/dnc.php" title="DNC">DNC</a></li> </ul> </li> </ul> <ul> <li><a href="support/documentation.php" title="Support"><strong>Support</strong></a> <ul> <li><a href="support/documentation.php" title="Documentation">Documentation</a></li> <li><a href="support/feedback.php" title="Feedback">Feedback</a></li> <li><a href="support/esupport.php" title="eSupport">eSupport</a></li> </ul> </li> </ul> <ul> <li><a href="downloads/demos.php" title="Downloads"><strong>Downloads</strong></a> <ul> <li><a href="downloads/demos.php" title="Demos">Demos</a></li> <li><a href="downloads/videos.php" title="Videos">Videos</a></li> <li><a href="downloads/brochures.php" title="Brochures">Brochures</a></li> <li><a href="downloads/presentations.php" title="Presentations">Presentations</a></li> </ul> </li> </ul> <ul> <li><a href="whyus/testimonials.php" title="Why Us?"><strong>Why us?</strong></a> <ul> <li><a href="whyus/testimonials.php" title="Testimonials">Testimonials</a></li> <li><a href="whyus/stories.php" title="Success Stories">Success Stories</a></li> <li><a href="whyus/reviews.php" title="Reviews">Reviews</a></li> </ul> </li> </ul> <ul> <li><a href="company/about.php" title="Company"><strong>Company</strong></a> <ul> <li><a href="company/about.php" title="Information">Information</a></li> <li><a href="company/office.php" title="Office">Office</a></li> <li><a href="company/contact.php" title="Contact">Contact</a></li> <li><a href="company/events.php" title="Trade Shows + Events">Trade Shows + Events</a></li> <li><a href="company/press.php" title="Press Releases">Press Releases</a></li> </ul> </li> </ul> </div> </nav> <div style="padding: 20px 0 20px 0;"> <p style="">© 2009 SolidCAM UK Ltd. All rights reserved. <a href="admin/" title="Admin">admin</a></p> </div> </div> </div> <!-- // FOOTER --> </body></html><!-- // END --> CSS /* @group Defaults *//* DEFAULTS- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */body { font: 62.5% "Lucida Grande", Lucida Sans Unicode, Verdana, Tahoma, sans-serif; text-align: center;}h1, h2, h3, h4, h5, h6 { font-family: "Georgia", Times, Times New Roman, serif; font-weight: normal !important;}.wrapper { width: 960px; margin: 0px auto; text-align: justify; position: relative;}section, article, aside, nav, header, footer { display: block;}#masthead { height: 150px; background: url(_img/masthead.png) bottom center repeat-x; margin: 0 0 30px 0;}#content { min-height: 600px; width: 680px; float: left; border-right: #cccccc 1px solid; padding: 0 30px 0 0;}hr { margin: 30px 0; border: none; border-top: #cccccc 1px solid;}#sidebar { width: 220px; float: right;}#masthead .wrapper { height: 150px; z-index:-1;}#masthead h1 { position: absolute; left: 0; bottom: 0; font-size: 3.4em;}#masthead ul { position: absolute; right: 0; bottom: 1px;}#masthead ul li { float: left; margin: 0 0 0 5px; font-size: 11px; text-transform: uppercase;}#masthead ul li a { padding: 8px 15px; display: block; text-decoration: none; color: #999; font-weight: bold; border: transparent 1px solid; border-bottom: none;}#masthead ul li a:hover { background: #e5e5e5; color: #666;}body.about #masthead ul li.n-about a,body.team #masthead ul li.n-team a,body.office #masthead ul li.n-office a,body.contact #masthead ul li.n-contact a,body.events #masthead ul li.n-events a,body.press #masthead ul li.n-press a { background: #ffffff; border: #ddd 1px solid; border-bottom: none; color: #333;}body.testimonials #masthead ul li.n-testimonials a,body.stories #masthead ul li.n-stories a,body.reviews #masthead ul li.n-reviews a { background: #ffffff; border: #ddd 1px solid; border-bottom: none; color: #333;}body.demos #masthead ul li.n-demos a,body.videos #masthead ul li.n-videos a,body.brochures #masthead ul li.n-brochures a,body.presentations #masthead ul li.n-presentations a { background: #ffffff; border: #ddd 1px solid; border-bottom: none; color: #333;}body.training #masthead ul li.n-training a,body.installation #masthead ul li.n-installation a,body.postprocessors #masthead ul li.n-postprocessors a,body.programming #masthead ul li.n-programming a,body.dnc #masthead ul li.n-dnc a,body.documentation #masthead ul li.n-documentation a,body.feedback #masthead ul li.n-feedback a,body.esupport #masthead ul li.n-esupport a { background: #ffffff; border: #ddd 1px solid; border-bottom: none; color: #333;}body.solidcam #masthead ul li.n-solidcam a,body.inventorcam #masthead ul li.n-inventorcam a,body.solidcmm #masthead ul li.n-solidcmm a,body.cimco #masthead ul li.n-cimco a,body.imold #masthead ul li.n-imold a,body.sylviexpert #masthead ul li.n-sylviexpert a { background: #ffffff; border: #ddd 1px solid; border-bottom: none; color: #333;}/* @end *//* @group Header *//* HEADER- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */header#global { display: block; background: #900 url(_img/nav-dark.png) 0 0 repeat-x; height: 48px;}#logo { position: absolute; top: 0; left: 0; text-indent: -999em; z-index: 10;}#logo a { display: block; background: url(_img/logo.png) 0 0 no-repeat; width: 220px; height: 48px;}#nav ol#mainmenu { list-style:none inside none; padding:0 0px 0 0px; margin: 0px 0 0px 0px; height:48px; min-height:48px; height:auto !important; position:relative; font-size: 11px; font-weight: bold; text-transform: uppercase; font-family: Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif; float: right;}#nav ol li { position:relative; float:left; list-style-image: none; line-height:48px;}#nav ol li a { display:block; padding: 0 0px; color: rgb(255, 255, 255); text-decoration:none; white-space:nowrap; background: transparent; text-align: center;}#nav ol li:hover a { font-weight: bold; color: #fff; background: #900 url(_img/nav-light.png) 0 0 repeat-x;}/* DROP DOWN MENU */#nav li ul { position:absolute; z-index:10; min-width:230px; top:48px; list-style:none; border-top:0px solid #000; margin:0 0 0 -999em; padding:0; background-image:none; padding: 10px 0; text-transform: none; font-size: 11px; background: rgb(0,0,0); background: rgba(0,0,0,0.9); -moz-box-shadow: #111 0px 3px 10px; -webkit-box-shadow: #111 0px 3px 10px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; filter:alpha(opacity=90); opacity: 0.9;}#nav ol li:hover ul, #nav ol li.sfhover ul { margin-left: 0;}#nav ol li ul li { float:none; margin:0; padding:0; white-space:normal; border-bottom:0px solid #000; background-image:none; background:transparent; height:25px; }#nav ol li ul li a { padding: 0 0px 0 25px; background: transparent !important; height:25px; color: #999 !important; border:0px; line-height:25px; display:block; background-image: none; float:none; text-align: left; margin:0; }#nav ol li ul li a:hover { color: #fff !important; background: rgb(63, 81, 107) !important;}/* NEW SMALLER LISTS */#nav ol#mainmenu { margin: 0 0px 0 0;}#n-products { width: 102px;}#n-services { width: 93px;}#n-support { width: 92px;}#n-downloads { width: 114px;}#n-whyus { width: 89px;}#n-company { width: 98px;}#n-company ul { left: -89px;}li#n-products ul { min-width: 195px !important;}li#n-services ul { min-width: 185px !important;}li#n-support ul { min-width: 206px !important;}li#n-downloads ul { min-width: 203px !important;}li#n-whyus ul { min-width: 187px !important;}li#n-company ul { min-width: 187px !important;}body#products #nav ol li#n-products a,body#services #nav ol li#n-services a,body#support #nav ol li#n-support a,body#downloads #nav ol li#n-downloads a,body#whyus #nav ol li#n-whyus a,body#company #nav ol li#n-company a { font-weight: bold; color: #ffffff; background: #c00 url(_img/nav-on.png) 0 0 repeat-x;}/* @end */ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.