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%;
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*/
}
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%;
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*/
}