A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: [RESOLVED] How do I hide the 3rd level menu until the 2nd level item is hovered?

  1. #1
    Member
    Join Date
    Dec 2007
    Posts
    71

    resolved [RESOLVED] How do I hide the 3rd level menu until the 2nd level item is hovered?

    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

  2. #2
    Member
    Join Date
    Dec 2007
    Posts
    71

    I think I've got it now.

    Sorry about that... I've been staring at code too long. It seems that my css for the 3rd menu should have been directed at: #centeredmenu ul li ul li:hover ul

    Not just #centeredmenu ul ul ul...

    It is working now.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center