Multi-level Navigation Plugin & drop shadows
-
I use the multi-level nav plugin and I would really like a drop-shadow under my drop down menu. Does somebody knows how to do this. I think it’s possible with css.
This is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title>AID INDIA</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="generator" content="WordPress 2.7.1" /> <!-- leave this for stats please --> <link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/style.css" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://localhost/wordpress/feed/" /> <link rel="alternate" type="text/xml" title="RSS .92" href="http://localhost/wordpress/feed/rss/" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://localhost/wordpress/feed/atom/" /> <link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" /> <script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/scripts/mootools.js" type="text/javascript"></script> <script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/scripts/jd.gallery.js" type="text/javascript"></script> <link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/css/jd.gallery.css" type="text/css" media="screen" /> <link rel='archives' title='January 2009' href='http://localhost/wordpress/2009/01/' /> <link rel='archives' title='December 2008' href='http://localhost/wordpress/2008/12/' /> <link rel='archives' title='November 2007' href='http://localhost/wordpress/2007/11/' /> <meta name='robots' content='noindex,nofollow' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" /> <!-- Multi-level Navigation Plugin v2.1 by PixoPoint Web Development ... http://pixopoint.com/multi-level-navigation/ --> <link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/style.php" /> <script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/scripts/hoverIntent.js.php?ver=r5'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/scripts/superfish.js?ver=1.4.8'></script> <script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/multi-level-navigation-plugin/scripts/superfish_settings.js.php?ver=1.0'></script> <meta name="generator" content="WordPress 2.7.1" /> <script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/NiftyCube/niftycube.js" type="text/javascript"></script> <script src="http://localhost/wordpress/wp-content/themes/AID INDIA website/NiftyCube/niftyLayout.js" type="text/javascript"></script> <link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/NiftyCube/css/niftyCorners.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/AID INDIA website/NiftyCube/css/niftyLayout.css" type="text/css" media="screen" /> <script type="text/javascript"> window.onload=function(){ Nifty("li#search","big"); } </script> </head> <body> <div id="wrapper"> <img id="header-logo" src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/header-logo.gif" width="84" height="129" alt="logo AID India"/> <div id="header"> <ul> <li><h1><a href="http://localhost/wordpress">AID INDIA</a></h1></li> <li><h4>Injustice anywhere is a threat to justice everywhere</h4></li> <li><h4>Treat others as you would like to be treated</h4></li> </ul> </div> <!-- Multi-level Navigational Plugin by PixoPoint Web Development ... http://pixopoint.com/multi-level-navigation/ --> <div id="pixopoint_menu_wrapper1"> <div id="pixopoint_menu1"> <ul class="sf-menu" id="suckerfishnav"><li class="current_page_item"><a href="http://localhost/wordpress/">Home</a></li><li class="page_item page-item-10 haschildren"><a href="http://localhost/wordpress/about/" title="Who we are">Who we are</a> <ul> <li class="page_item page-item-62"><a href="http://localhost/wordpress/about/who-we-are/" title="About us">About us</a></li> <li class="page_item page-item-64"><a href="http://localhost/wordpress/about/where-we-work/" title="Where we work">Where we work</a></li> <li class="page_item page-item-66"><a href="http://localhost/wordpress/about/vision-mission/" title="Vision & mission">Vision & mission</a></li> <li class="page_item page-item-68"><a href="http://localhost/wordpress/about/organisation-profile/" title="Organisation profile">Organisation profile</a></li> </ul> </li> <li class="page_item page-item-5"><a href="http://localhost/wordpress/humanism/" title="What we do">What we do</a></li> <li class="page_item page-item-12"><a href="http://localhost/wordpress/the-community/" title="Where we work">Where we work</a> <ul> <li class="page_item page-item-20"><a href="http://localhost/wordpress/the-community/geographical-conditions/" title="Geographical Conditions">Geographical Conditions</a></li> <li class="page_item page-item-22"><a href="http://localhost/wordpress/the-community/population/" title="Population">Population</a></li> <li class="page_item page-item-24"><a href="http://localhost/wordpress/the-community/literacy-level/" title="Literacy Level">Literacy Level</a></li> <li class="page_item page-item-26"><a href="http://localhost/wordpress/the-community/health-status/" title="Health Status">Health Status</a></li> <li class="page_item page-item-28"><a href="http://localhost/wordpress/the-community/beneficiaries/" title="Beneficiaries">Beneficiaries</a></li> <li class="page_item page-item-30"><a href="http://localhost/wordpress/the-community/local-infrastructure/" title="Local Infrastructure">Local Infrastructure</a></li> </ul> </li> <li class="page_item page-item-131"><a href="http://localhost/wordpress/how-you-can-help/" title="How you can help">How you can help</a> <ul> <li class="page_item page-item-138"><a href="http://localhost/wordpress/how-you-can-help/micro-credit-program/" title="Micro Credit Program">Micro Credit Program</a></li> <li class="page_item page-item-140"><a href="http://localhost/wordpress/how-you-can-help/people-with-disabilities/" title="People with disabilities">People with disabilities</a></li> <li class="page_item page-item-136"><a href="http://localhost/wordpress/how-you-can-help/teaching-computer-application/" title="Teaching Computer Application">Teaching Computer Application</a></li> <li class="page_item page-item-134"><a href="http://localhost/wordpress/how-you-can-help/teaching-english/" title="Teaching English">Teaching English</a></li> </ul> </li> <li><a href="">News</a><ul><li><a href="http://localhost/wordpress/2009/01/need-based-training/">Need Based Training to the SHG Members</a></li><li><a href="http://localhost/wordpress/2009/01/children%e2%80%99s-day-celebration-in-island-of-hope/">Children’s Day Celebration in Island of Hope</a></li><li><a href="http://localhost/wordpress/2008/12/unity-in-humanist-orphanage-virudhunagar/">Unity In Humanist Orphanage Virudhunagar</a></li><li><a href="http://localhost/wordpress/2007/11/charity-in-virudhunagar/">Charity in Virudhunagar</a></li></ul></ul> </div> </div> <div id="extra"> <script type="text/javascript"> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true, showArrows: true, showCarousel: false, useThumbGenerator: false, delay: 7000 }); } window.onDomReady(startGallery); </script> <div id="myGallery"> <div class="imageElement"> <h3>A chance for education</h3> <p></p> <a href="#" title="Find out more..." class="open"></a> <img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/photosaid/1.jpg" class="full" alt="Shine" /> </div> <div class="imageElement"> <h3>Farming for support</h3> <p></p> <a href="#" title="Open map" class="open"></a> <img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/photosaid/3.jpg" class="full" alt="Churches" /> </div> <div class="imageElement"> <h3>Micro credit for a better living</h3> <p></p> <a href="#" title="Read latest articles" class="open"></a> <img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/photosaid/4.jpg" class="full" alt="Civic Involvement" /> </div> <div class="imageElement"> <h3>Children are the future</h3> <p></p> <a href="#" title="Read latest articles" class="open"></a> <img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/smoothgallery/images/photosaid/5.jpg" class="full" alt="Action" /> </div> </div> <div id="extra-sidebar"> <div class="sidebar3"> <ul> <li id="text-387420871" class="widget widget_text"> <h2 class="widgettitle">Aid India </h2> <div class="textwidget">Aid India empowers the disadvantaged in one of the poorest parts of India: Tamil Nadu. In this part of India, where 54% of rural people live below the poverty line, life is especially challenging for women, people with disabilities, orphans and deserted children. By means of orphanages, a micro credit program, welfare programs and educational opportunities Aid India enables the poor and disadvantaged to build up a better life! </div> </li> </ul> </div> </div> </div> <br /> <div id="donateblock"> <ul id="donatelist"> <li class="leftfloat"><img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/pipo.jpg" alt="donate button" /></li> <li class="leftfloat"><img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/pipo.jpg" alt="donate button" /></li> <li class="leftfloat"><img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/pipo.jpg" alt="donate button" /></li> <li class="rightfloat"><img src="http://localhost/wordpress/wp-content/themes/AID INDIA website/images/pipo.jpg" alt="donate button" /></li> </ul> </div> <br /> <div id="recentnews"> <h2>News</h2> <ul id="newsblock"> <li><a href="http://localhost/wordpress/2009/01/need-based-training/"><div class="time"><p>24. 01. 2009</p></div>Need Based Training to the SHG Members<br /><div class="more">More</div></a></li> <li><a href="http://localhost/wordpress/2009/01/children%e2%80%99s-day-celebration-in-island-of-hope/"><div class="time"><p>16. 01. 2009</p></div>Children’s Day Celebration in Island of Hope<br /><div class="more">More</div></a></li> <li><a href="http://localhost/wordpress/2008/12/unity-in-humanist-orphanage-virudhunagar/"><div class="time"><p>09. 12. 2008</p></div>Unity In Humanist Orphanage Virudhunagar<br /><div class="more">More</div></a></li> <li><a href="http://localhost/wordpress/2007/11/charity-in-virudhunagar/"><div class="time"><p>20. 11. 2007</p></div>Charity in Virudhunagar<br /><div class="more">More</div></a></li> </ul> </div> </div> </body> </html>And this is the CSS:
#suckerfishnav { background:url("../multi-level-navigation-plugin/images/buttonbalk_2.gif") repeat-x; font-size:12px; font-family:verdana,sans-serif; font-weight:bold; width:100%; } #suckerfishnav, #suckerfishnav ul { float:left; list-style:none; line-height:35px; padding:0; border:none; margin:0; width:100%; z-index: 1000; } #suckerfishnav a { display:block; color:#FFF; text-decoration:none; padding:0px 25px; } #suckerfishnav li { float:left; padding:0; } #suckerfishnav ul { position:absolute; left:-999em; height:auto; width:176px; font-weight:normal; margin:0; line-height:1; -moz-opacity:0.8; opacity:1; khtml-opacity:0.8; border:0; border-top:1px solid #323232; } #suckerfishnav li li { width:174px; border-bottom:1px solid #323232; border-left:1px solid #323232; border-right:1px solid #323232; font-weight:normal; font-family:verdana,sans-serif; } #suckerfishnav li li a { padding:3px 10px; width:125px; font-size:10px; color:#323232; } #suckerfishnav li ul ul { margin:-17px 0 0 175px; } #suckerfishnav li li:hover { background:#FFF; } #suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a { color:#67982D; } #suckerfishnav li:hover a, #suckerfishnav li.sfhover a { color:#323232; } #suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a { color:#323232; } #suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul { left:-999em; } #suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul { left:auto; background:#FFF; } #suckerfishnav li:hover, #suckerfishnav li.sfhover { background:#FFFFFF; } #suckerfishnav .current_page_parent, #suckerfishnav .current_page_ancestor, #suckerfishnav .current-cat-parent { background:#FFF; } #suckerfishnav .current-cat, #suckerfishnav .current_page_item { background:#FFFFFF; } #suckerfishnav .current_page_ancestor a:after, #suckerfishnav .current_page_ancestor li a:after, #suckerfishnav .current_page_ancestor li li a:after, #suckerfishnav .current_page_ancestor li li li a:after, #suckerfishnav .current_page_ancestor li li li li a:after, #suckerfishnav .current-cat-parent a:after, #suckerfishnav .current-cat-parent li a:after, #suckerfishnav .current-cat-parent li li a:after, #suckerfishnav .current-cat-parent li li li a:after, #suckerfishnav .current-cat-parent li li li li a:after, #suckerfishnav .current_page_parent a:after, #suckerfishnav .current_page_parent li a:after, #suckerfishnav .current_page_parent li li a:after, #suckerfishnav .current_page_parent li li li a:after, #suckerfishnav .current_page_parent li li li li a:after { content:""; } #suckerfishnav .current_page_ancestor a:after, #suckerfishnav li .current_page_ancestor a:after, #suckerfishnav li li .current_page_ancestor a:after, #suckerfishnav li li li .current_page_ancestor a:after, #suckerfishnav .current-cat-parent a:after, #suckerfishnav li .current-cat-parent a:after, #suckerfishnav li li .current-cat-parent a:after, #suckerfishnav li li li .current-cat-parent a:after, #suckerfishnav .current_page_parent a:after, #suckerfishnav li .current_page_parent a:after, #suckerfishnav li li .current_page_parent a:after, #suckerfishnav li li li .current_page_parent a:after { color:#000000; content:""; } #suckerfishnav .current-cat a:after, #suckerfishnav li .current-cat a:after, #suckerfishnav li li .current-cat a:after, #suckerfishnav li li li .current-cat a:after, #suckerfishnav li li li li .current-cat a:after, #suckerfishnav .current_page_item a:after, #suckerfishnav li .current_page_item a:after, #suckerfishnav li li .current_page_item a:after, #suckerfishnav li li li .current_page_item a:after, #suckerfishnav li li li li .current_page_item a:after { color:#000000; content:""; }
The topic ‘Multi-level Navigation Plugin & drop shadows’ is closed to new replies.