SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Trying to Maintain Hover Effect on Main List

    Hello everyone,

    In my home page menu, the blocks change color on the hover effect just fine and shows the first child menu, but when you hover over the child menu, the hover colors turn off of the main menu. I want to know how to maintain the hover effect through browsing the entire menu.

    Here is my JavaScript:
    Code:
    <script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
    
    function jsddm_open()
    {  jsddm_canceltimer();
       jsddm_close();
       ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
    
    function jsddm_close()
    {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
    
    function jsddm_timer()
    {  closetimer = window.setTimeout(jsddm_close, timeout);}
    
    function jsddm_canceltimer()
    {  if(closetimer)
       {  window.clearTimeout(closetimer);
          closetimer = null;}}
    
    $(document).ready(function()
    {  $('.pMenu > li').bind('mouseover', jsddm_open)
       $('.pMenu > li').bind('mouseout',  jsddm_timer)});
    
    document.onclick = jsddm_close;
    </script>
    My CSS Styles for Menu:

    Code:
    /********************/
    /*PERSONAL NAV MENU**/
    /********************/
    .pWrapper{
    	padding-bottom:53%;	
    }
    .pMenu{
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    
    /*IE 6 & 7 need inline block feature*/
    ul.pMenu ul li a{
    	width:100%;
    	display:inline-block;
    }
    ul.pMenu ul li ul li a{
    	width:100%;
    	display:inline-block;
    }
    ul.pMenu ul li ul li ul li a{
    	width:100%;
    	display:inline-block;
    }
    
    /*top level li specifications*/
    #health{
    	width:8%;
    	padding-left:11%;
    	padding-right:2%;
    }
    
    #insurance{
    	width:14.5%;
    	padding-right:2%;
    }
    
    #shopping{
    	width:14%;	
    	padding-right:2%;
    }
    
    #dating{
    	width:11%;
    	padding-right:2%;
    }
    
    #education{
    	width:15.5%;
    }
    
    /*begin main list attributes*/
    ul.pMenu li{
    	float:left;
    	list-style:none;
    }
    
    ul.pMenu li a{
    	display:block;
    	color:#FFF;
    	background:#900;
    	border:.33em ridge #C30;
    	text-decoration:none;
    	text-shadow:1px 1px 1px #000;
    	white-space:nowrap;
    	padding-top:.7em;
    	padding-left:.3em;
    	padding-right:.3em;
    	padding-bottom:.7em;
    }
    
    ul.pMenu li a:hover{
    	background:#F00;
    	border:.33em ridge #C90;
    	color:#FF0;
    }
    
    /*first sub-list*/
    ul.pMenu li ul{
    	margin:0;
    	padding:0;
    	position:absolute;
    	visibility:hidden;
    }
    
    ul.pMenu li ul li{
    	float:none;
    	top:33px;
    }
    
    ul.pMenu li ul li a{
    	width:auto;
    	background:#CCC;
    	border:.25em outset #999;
    	font-size:95%;
    	height:10%;
    	font-size:12px;
    	padding:2%;
    	padding-left:4%;
    	padding-right:10%;
    	text-shadow:1px 1px 1px #000;
    	color:#000;
    	position:relative;
    }
    
    ul.pMenu li ul li a:hover{
    	background:#999;
    	border:.25em inset #666;
    	text-decoration:blink;
    }
    
    /*second sub-list*/
    ul.pMenu li ul li ul{
    	margin:0;
    	padding:0;
    	position:absolute;
    	visibility:hidden;
    	display:none;
    }
    
    ul.pMenu li:hover > ul{
    	visibility:visible;
    }
    
    ul.pMenu li ul li ul li{
    	float:none;
    	display:inline;
    }
    
    ul.pMenu li ul li ul li a{
    	width:auto;
    	background:#999;
    	border:.15em outset #666;
    	text-shadow:1px 1px 1px #000;
    	color:#FFF;
    }
    
    ul.pMenu li ul li ul li a:hover{
    	background:#999;
    	border:.15em inset #666;
    	text-decoration:blink;
    }
    
    /*third sub-list*/
    ul.pMenu li ul li ul li ul{
    	margin:0;
    	padding:0;
    	position:absolute;
    	visibility:hidden;
    }
    
    ul.pMenu li ul li ul li{
    	float:none;
    	display:inline;
    }
    
    ul.pMenu li ul li ul li a{
    	width:auto;
    	background:#999;
    	border:1% outset #666;
    	text-shadow:1px 1px 1px #000;
    	color:#FFF;
    }
    
    ul.pMenu li ul li ul li a:hover{
    	background:#999;
    	border:1% inset #666;
    	text-decoration:blink;
    }
    /******************/
    /*End Personal Nav*/
    /******************/
    My HTML portion for menu:

    Code:
     <!-- begin Personal navigation menu -->
    <div class="pWrapper">
    <ul>
    <ul class="pMenu">
    	<li id="health" style="width:10%;"><a href="#">health</a>
        	<ul>
            	<li><a href="#">weight loss</a>
                	<ul>
                    	<li><a href="#">fitness</a>
                    		<ul>
                            	<li><a href="#">under construction</a></li>
                            </ul>
                        </li>
                        <li><a href="#">dieting</a>
                        	<ul>
                            	<li><a href="#">under construction</a></li>
                            </ul>
                        </li>
                	</ul>
                </li>   
                <li><a href="#">skin care</a>
                	<ul>
                    	<li><a href="#">under construction</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    
    <ul class="pMenu">
    	<li id="insurance"><a href="#">insurance</a>
        	<ul>
            	<li><a href="#">property insurance</a>
                	<ul>
                    	<li><a href="#">under construction</a></li>
                    </ul>
                </li>
                <li><a href="#">auto insurance</a>
                	<ul>
                    	<li><a href="#">under construction</a></li>
                    </ul>
                </li>
                <li><a href="#">health insurance</a>
                	<ul>
                    	<li><a href="#">under construction</a></li>
                    </ul>
                </li>
                <li><a href="#">annuities</a>
                	<ul>
                    	<li><a href="#">under construction</a></li>
                    </ul>
                </li>
           </ul>
       </li>
    </ul>
    
    <ul class="pMenu">
    	<li id="shopping"><a href="#">shopping</a>
        	<ul>
            	<li><a href="#">electronics</a>
                	<ul>
                    	<li><a href="#">under construction</a></li>
                    </ul>
                </li>
                <li><a href="#">style & fashion</a>
                	<ul>
                    	<li><a href="#">under construction</a></li>
                    </ul>
                </li>
                <li><a href="#">food/dining</a>
                	<ul>
                    	<li><a href="#">under construction</a></li>
                    </ul>
                </li>
                <li><a href="#">cars/auto</a>
                	<ul>
                    	<li><a href="#">under construction</a></li>
                    </ul>
                </li>
           </ul>
       </li>
    </ul>
                       
    <ul class="pMenu">
    	<li id="dating"><a href="#">dating</a>
        	<ul>
            	<li><a href="#">RealMatureSingles</a></li>
                <li><a href="#">SeniorPeopleMeet</a></li>
            </ul>
        </li>
    </ul>
    
    <ul class="pMenu">
    	<li id="education"><a href="#">education</a>
        	<ul>
            	<li><a href="#">under construction</a></li>
            </ul>
        </li>
    </ul>  
    </ul>                  	
    </div>
    	<!-- end Personal navigation menu-->

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    This is really a CSS thing. You haven't followed advice elsewhere about how to structure this menu, but normally you would have a hover rule on the top-level LI, such as

    Code:
    li:hover a {hover styles here}
    If you stick with this menu structure (with each main link as an UL, which is not a good idea) you could refine it with something like

    Code:
    ul.pMenu > li:hover a {hover styles here}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You are correct!

    Now I'm trying to make the first sub-list make the shopping and insurance categories display their four <li>'s right on top of each other. they appear in a square. I want them to sit right on top of each other in a vertical line.


Tags for this Thread

Bookmarks

Posting Permissions

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