PDA

View Full Version : Chrome drop down Menu Link Question



diesel13
08-14-2007, 09:12 PM
I just installed the chrome drop down menu and I've noticed that the root menu links (parent items) do not work if there are children or drop down links below them or associated with them. If I put some drop down links below the "Features" menu item, they will show up and work if "Features" is hovered over, but the "Features" itself no longer functions as a working link.... anybody know how to make it so that the root Menu items will still work as links when they have sub menu or dropdown items associated with them?

Feedback greatly appreciated!!!

The html:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.ipagio.com/">Home</a></li>
<li><a href="http://www.ipagio.com/mortgage-website-features.html" rel="dropmenu1">Features</a></li>
<li><a href="http://www.ipagio.com/mortgage-website-demo.html" >Demos</a></li>
<li><a href="http://www.ipagio.com/mortgage-website-search-engine-optimization.html" rel="dropmenu3">SEO</a></li>
<li><a href="http://www.ipagio.com/mortgage-website-lead-generation.html" rel="dropmenu4">Lead Generation </a></li>
<li><a href="http://www.ipagio.com/mortgage-website-pricing.html" rel="dropmenu5">Pricing</a></li>
<li><a href="http://www.ipagio.com/mortgage-website-purchase.html" rel="dropmenu6">Purchase</a></li>
<li><a href="http://www.ipagio.com/contact-us.html" rel="dropmenu7" >Contact</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.ipagio.com/mortgage-website-features.html">Website Features</a>
<a href="http://www.ipagio.com/mortgage-website-features.html">Technical Features</a>
<a href="http://www.ipagio.com/mortgage-website-content.html">Website Content</a>
<a href="http://www.ipagio.com/mortgage-website-hosting.html">Hosting</a>
<a href="http://www.ipagio.com/mortgage-website-live-chat.html">Live Chat</a>
<a href="http://www.ipagio.com/mortgage-website-email-newsletter-database.html">Newsletter Database</a></div>


<!--2nd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.ipagio.com/mortgage-website-search-engine-optimization.html">On-Page SEO</a>
<a href="http://www.ipagio.com/mortgage-website-search-engine-optimization-services.html">SEO Services</a>
<a href="http://www.ipagio.com/mortgage-website-search-engine-optimization-basics.html">Mortgage SEO Basics</a></div>

<!--3rd drop down menu -->
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="http://www.ipagio.com/mortgage-website-lead-generation.html">Lead Generation</a>
<a href="http://www.ipagio.com/mortgage-website-lead-management.html">Lead Management</a></div>

<!--4th drop down menu -->
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
<a href="http://www.ipagio.com/mortgage-website-pricing.html">Pricing</a>
<a href="http://www.ipagio.com/mortgage-website-competitive-analysis.html">Competitive Analysis</a></div>

<!--5th drop down menu -->
<div id="dropmenu6" class="dropmenudiv" style="width: 150px;">
<a href="http://www.ipagio.com/mortgage-website-purchase.html">Purchase</a>
<a href="http://www.ipagio.com/mortgage-website-build-process.html">Build Process</a></div>

<!--5th drop down menu -->
<div id="dropmenu7" class="dropmenudiv" style="width: 150px;">
<a href="http://www.ipagio.com/contact-us.html">Contact Us</a>
<a href="http://www.ipagio.com/mortgage-website-legal.html">Legal</a></div>
</div>

THE CSS:

.chromestyle{
width: 683px;
font-weight: bold;
height: 20px;
float: left;
text-decoration: none
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100&#37;;
background: url(images/chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-decoration:none;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover{
background: url(images/chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
.chromestyle ul li a:visited{
text-decoration:none;
color: #494949;
}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}

.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
.dropmenudiv a:visited{
text-decoration:none;
color: #494949;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}



/*------Firefox Tweak*-----*/
#chromemenu ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: "";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}

diesel13
08-14-2007, 10:19 PM
turns out it was a javascript setting in js file that can disabel or enable parent links....

jonachan
03-25-2008, 12:43 AM
So, how did you fix this issue?

I would like my parent link to function on my site as well.

Please advise!

Thank you!:)

jonachan
03-25-2008, 12:56 AM
lol! I figured it out the same way....

in the .js file just change

disablemenuclick: true to
disablemenuclick: false

diesel13
03-25-2008, 01:06 AM
yep, that's it!