Hi,
I considered myself a mid-level CSS person until today. I am officially demoted to basic. I don't get it...
I checked, validated the code and have been trying to employ everything I could think of to get the 3rd level menu to only appear/display when a particular item in the drop down has been hovered. The code has been done by a former co-worker, but I have done many tweaks along the way.
I've only managed to get the menu to dissappear when the item is hovered over, and that only adds to my frustration, because now I am totally confused as to how to reverse that behavior and get the 3rd menu to display instead of dissappearing.
The html is a simple nested unordered list.
Code:
<ul>
<li class="active"><a href="/Default.asp">HOME</a></li>
<li class="active"><a href="#">COMPANY</a>
<ul>
<li><a href="/CompanyOverview.asp">Overview</a></li>
<li><a href="/Demo.asp">Flash Demo</a></li>
<li><a href="/Mkt_USA.asp">Markets</a></li>
<li><a href="/News.asp">News</a>
<ul>
<li><a href="/news.asp">2010</a></li>
<li><a href="/news.asp">2011</a></li>
</ul>
</li>
<li><a href="/Careers.asp">Careers</a></li>
<li><a href="/Partners.asp">Partners</a></li>
</ul>
</li>
<li class="active"><a href="#">SERVICES</a>
<ul>
<li><a href="/LocalCable.asp">Cable</a></li>
<li><a href="/Radio.asp">Radio</a></li>
<li><a href="/BroadcastTV.asp">TV</a></li>
<li><a href="/QualitativeResearch.asp">Qualitative Research</a></li>
<li><a href="/Newspaper.asp">Newspaper</a></li>
<li><a href="/FreeTrial.asp">Free Trial</a></li>
</ul>
</li>
<li class="active"><a href="#">TRAINING</a>
<ul>
<li><a href="/TrainingOverview.asp">Overview</a></li>
<li><a href="/Schedule.asp">Schedule</a></li>
</ul>
</li>
<li class="active"><a href="#">CONTACT</a>
<ul>
<li><a href="/Sales.asp">Sales</a></li>
<li><a href="/Support.asp">Support</a></li>
<li><a href="/MediaInquiry.asp">Media Inquiry</a></li>
<li><a href="/WorldHeadquarters.asp">World Headquarters</a></li>
</ul>
</li>
</ul>
I'm quite sure that this is OK. The CSS is where I ran into problem.
Code:
#centeredmenu
{
clear:both;
float:left;
margin:0;
padding:0;
border-bottom:1px solid #c1c1c1; /* logo blue line below menu #c1c1c1 */
width:100%;
font-size:100%;
font-family:Verdana, Geneva, sans-serif; /* Menu font */
z-index:2; /* dropdown menus appear above the page content below */
position:relative;
text-align:center;
}
/* Top menu items */
#centeredmenu ul
{
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li
{
margin:0 0 0 1px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
text-align:left;
}
#centeredmenu ul li a
{
display:block;
margin:0;
padding:1em 1em .5em;
font-size:1.1em;
line-height:1em;
background:#ffffff;
text-decoration:none;
color:#444;
font-weight:bold;
border-bottom:0px solid #000; /* Normal state Top menu underline colour */
}
#centeredmenu ul li.active a {
color:#000; /* Normal state Top menu items font colour */
background:transparent; /* Normal state Top menu items background colour (logo blue)#1a7bb7 */
}
#centeredmenu ul li a:hover
{
background:white; /* Top menu items background colour */
color:#000;
border-bottom:0px solid #1a7bb7;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a
{ /* This line is required for IE 6 and below */
background:transparent; /* Hovered Top menu items background colour */
color:#88bbd4; /* Hovered Top menu text background colour */
border-bottom:0px solid #1a7bb7; /* Hovered state Top menu underline colour */
}
/* Submenu items */
#centeredmenu ul ul
{
display:none; /* Sub menus are hiden by default */
position:absolute;
top:2.6em; /* distance between main menu and sub menu */
left:0;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li
{
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a
{ /* This line is required for IE 6 and below */
font-size:1em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#fff; /* sub-menu background color */
color:#444;
line-height:1.5em; /* overwrite line-height value from top menu */
border-bottom:1px solid #88bbd4; /* sub menu item horizontal lines */
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover
{ /* This line is required for IE 6 and below */
background:#88bbd4; /* Hovered Sub menu items background colour */
color:#fff;
}
/* 3rd Tier Submenu items */
#centeredmenu ul ul ul
{
display:none; /* Sub menus are hiden by default */
position:absolute;
top:0; /* distance between main menu and sub menu */
left:120px;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul ul li
{
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
width:100%;
}
#centeredmenu ul ul ul li a,
#centeredmenu ul ul li.active ul li a,
#centeredmenu ul ul li:hover ul li a,
#centeredmenu ul ul li.hover ul li a
{ /* This line is required for IE 6 and below */
font-size:1em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#fff; /* sub-menu background color */
color:#444;
line-height:1.5em; /* overwrite line-height value from top menu */
border-bottom:1px solid #88bbd4; /* sub menu item horizontal lines */
}
#centeredmenu ul ul ul li a:hover,
#centeredmenu ul ul li.active ul li a:hover,
#centeredmenu ul ul li:hover ul li a:hover,
#centeredmenu ul ul li.hover ul li a:hover
{ /* This line is required for IE 6 and below */
background:#88bbd4; /* Hovered Sub menu items background colour */
color:#fff;
}
/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul ul li:hover ul,
#centeredmenu ul li.hover ul
{ /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}
Thank you for helping.
Tired & frustrated