Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: arial font makes submenus disappear

  1. #1
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default arial font makes submenus disappear

    Script: jQuery Multi Level CSS Menu #2

    You guys are not gonna believe this. I played with this code for 2 hours. It seems that the following code:

    <HTML>
    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="index.htm">Home</a></li>
    <li><a href="Page2.htm">Team Members</a></li>
    <li><a href="Page3.htm">Past Performances</a></li>
    <li><a href="Page4.htm">This Year </a></li>
    <li><a href="Page5.htm">Dance Videos</a>
    <ul style="width:500px">
    <li><A HREF="locmoti2.rm">Valentine</A></li>
    <li><A HREF="rockit.mpg">Local Motion</A></li>
    <li><A HREF="local.wmv">Local Motion</A></li>
    <li><A HREF="hillbilly.mpg">Hillbilly</A></li>
    <li><A HREF="girls.wmv">Girls Night</A></li>
    <li><A HREF="mib.wmv">Men In Black</A></li>
    <li><A HREF="tango.wmv">Tango</A></li>
    <li><A HREF="west.wmv">WestCoast</A></li>
    <li><A HREF="renegade.wmv">Rengade</A></li>
    <li><A HREF="bluefing.wmv">BlueFingr</A></li>
    <li><A HREF="cotton.wmv">CottonEye</A></li>
    </ul>
    </li>
    <li><a href="Page6.htm">Photo Album</a></li>
    <li><a href="Page7.htm">Contact/Booking</a></li>
    <li><a href="Page8.htm">Dance List</a></li>
    </ul>
    <br style="clear: left" />
    </div>
    </HTML>

    partial css below:
    <CSS>
    .jqueryslidemenu{
    font: bold 16px verdana;
    background: #e5febc;
    width: 100%;
    }
    </CSS>

    it works correctly. However, if I change verdana to arial, the submenus disappear
    whenever I move the mouse on the submenus but overlapping some other code. Can anyone tell me why?

  2. #2
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Sorry I don't understand your reply

  3. #3
    Join Date
    Oct 2008
    Location
    kolkata, india
    Posts
    75
    Thanks
    2
    Thanked 10 Times in 10 Posts

    Default

    have u used more css or javascript.. for this? if yes plz add this with it..
    moreover i have chnaged the font with ur given code..nothing disappear

  4. #4
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    That's because I only included part of the html. Below is all of it. When I change verdana to arial and mouseover the submenu, the submenu disappears when I get to the other code.

    HTML Code:
    <!DOCTYPE HTML>
    
    <HTML>
      <HEAD>
        <TITLE>Team Members</TITLE>
    
    <link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
    
    <!--[if lte IE 7]>
    <style type="text/css">
    html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
    </style>
    <![endif]-->
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="jqueryslidemenu.js"></script>
    
      </HEAD>
    
      <BODY BGCOLOR="#99ffcc" LINK="red" VLINK="blue" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" rightmargin="0">
    
    		<br>
    		<div id="myslidemenu" class="jqueryslidemenu">
    	  <ul>
    			<li><a href="index.htm">Home</a></li>
    			<li><a href="Page2.htm">Team Members</a></li>
      		<li><a href="Page3.htm">Past Performances</a></li>
    			<li><a href="Page4.htm">This Year's Performances</a></li>
    			<li><a href="Page6.htm">Photo Album</a></li>
    			<li><a href="Page7.htm">Contact/Booking Info</a></li>
    			<li><a href="Page8.htm">Dance List</a></li>
    			<li><a href="Page5.htm">Dance Videos</a>
            <ul style="width:500px">
              <li><A HREF="locmotion2.rm">Valentine's Day on Club Dance, Knoxville, TN (.rm)</A></li>
              <li><A HREF="rockit.mpg">Local Motion signature dance, Atlanta, 2002 (.mpg)</A></li>
              <li><A HREF="localmotion.wmv">Local Motion (.wmv)</A></li>
              <li><A HREF="hillbillyshoes.mpg">Hillbilly Shoes (.mpg)</A></li>
              <li><A HREF="girlsnightout.wmv">Girls' Night Out (.wmv)</A></li>
              <li><A HREF="mib.wmv">Men In Black (.wmv)</a></li>
              <li><A HREF="tango.wmv">Tango (.wmv)</A></li>
    				  <li><A HREF="westcoast.wmv">West Coast Swing (.wmv)</A></li>
    				  <li><A HREF="renegademixer.wmv">Renegade Mixer (.wmv)</A></li>
    				  <li><A HREF="bluefingerlou.wmv">Blue Finger Lou (.wmv)</A></li>
    				  <li><A HREF="cottoneyedjoe.wmv">Cotton Eyed Joe (.wmv)</A></li>
    				</ul>
      		</li>
        </ul>
    		<br style="clear: left" /> 
        </div>
    		
        <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
    			<br>
    			<TR>
            <TD VALIGN="BOTTOM" ALIGN="CENTER" WIDTH="40%">
    			    <applet
                  code   = Tracker.class
                  Width  = "250"
                  Height = "40"
              ALT    ="Local Motion">
              <param name=AppBGColor        value = "#99ffcc">
              <param name=TextColor         value = "#0000ff">
              <param name=HighlightColor    value = "#ff0000">
              <param name=TextCount         value="1">
              <param name=text1             value="Local Motion">
              <param name=DelayBetweenChars value="50">
              <param name=DelayBetweenRuns  value="1200">
              <param name=HorizCenter       value="true">
              <param name=VertCenter        value="true">
              <param name=style             value="bold">
              <param name=pointsize         value="40">
              </applet>
            </TD>
            <TD rowspan="3">
              <img src="team-bra2008.jpg" width="512" height="320" ALT="Team Picture">
            </TD>
    
          </TR>
          <TR>
        	  <TD VALIGN="TOP" ALIGN="CENTER">
              <FONT FACE="Arial,sans-serif" SIZE="+2" COLOR="blue">
                Team Members<BR>
    	        </FONT>
    				</TD>
    			</tr>
    			<tr>
    			  <td VALIGN="TOP" ALIGN="LEFT">		
              <FONT FACE="Arial,sans-serif" SIZE="1">
              Standing -*
              </FONT>
              <FONT FACE="Arial,sans-serif" SIZE="1" COLOR="red">
              <U><A HREF="#ED">Ed</A></U>
              <U><A HREF="#VIRGINIA">Virginia</A></U>
              <U><A HREF="#KEN">Ken</A></U>
              <U><A HREF="#MARYNELL">Mary Nell</A></U>
              <U><A HREF="#MARTY">Marty</A></U> 
              <U><A HREF="#DOROTHY">Dorothy</A></U>
              <U><A HREF="#SHERRIE">Sherrie</A></U>
              <U><A HREF="#RICK">Rick</A></U>
              <U><A HREF="#JACKIE">Jackie</A></U>
              <U><A HREF="#BUD">Bud</A></U>
              <U><A HREF="#LISA">Lisa</A></U>
              <U><A HREF="#JIM">Jim</A></U><br><br> 
              </FONT>
              <FONT FACE="Arial,sans-serif" SIZE="1">
              Kneeling -**
              </FONT>
              <FONT FACE="Arial,sans-serif" SIZE="1" COLOR=red>
              <U><A HREF="#NIKKI">Nikki</A></U>
              <U><A HREF="#DEBRA">Debra</A></U>  
              <U><A HREF="#LESLIE">Leslie</A></U><br><br>
    	        </FONT>
              <FONT FACE="Arial,sans-serif" SIZE=1>
              Missing -&nbsp;&nbsp;&nbsp;  
              </FONT>
              <FONT FACE="Arial,sans-serif" SIZE=1 COLOR=red>
              <U><A HREF="#PAM">Pam</A></U> 
              <U><A HREF="#JERRY">Jerry</A></U>
              <U><A HREF="#BILL">Bill</A></U>
              <U><A HREF="#BARRY">Barry</A></U>
          	  </FONT>
            </TD>
          </TR>     
        </TABLE>
        <p>
    		
        <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
          <TR>
            <td width="5%">
              <img src="clecklers.jpg" width="170" height="144">
            </td>
            <TD width="95%">
              <FONT FACE="Arial,sans-serif" COLOR="black">
    	        <A NAME=DEBRA><B>Debra Cleckler&nbsp;&nbsp;    </B></A>
              <A HREF="#TOP" color="red"><U>Top</U></A><br>
    	        Debra is a retired finance manager from BellSouth Telecommunications. She is Executive Vice 
    					President of NTA (National Teacher's Association) for Country and Western dance instructors.<br><br>
    	        <A NAME=JIM><B>Jim Cleckler***</B></A>
              <A HREF="#TOP" color="red"><U>Top</U></A><br>
      	      Jim is Debra's Dancing Dummy.<BR><BR>
    	      </TD>
          </TR>
    			      
          <TR>
            <td width="5%">
              <img src="marty.jpg" width="170" height="137">
            </td>
            <TD width="95%" valign="top">
    	        <A NAME=MARTY><B>Marty Colton***</B></A>
              <A HREF="#TOP" color=red><U>Top</U></A><br>
      	      Marty is a retired computer programmer living in Greensboro, GA. Other interests are tennis, golf, 
    					the Oconee Regional Humane Society, and the Atlanta Braves. He also designed this website and the ORHS'.<br><br>
          	</TD>
          </TR>
          
          
          
          <TR>
            <td width="5%">
              <img src="leslie.jpg" width="170" height="122">&nbsp;&nbsp;
            </td>
            <TD width="95%" valign="top">
    	        <A NAME=LESLIE><B>Leslie Thompson***</B></A>
              <A HREF="#TOP" color=red><U>Top</U></A><BR>
              Leslie dances socially and competitively for fun, travel, and to meet new people. She teaches line dancing at 
              The Club at Towne Lake in Woodstock, Cherokee Recreation and Parks in Woodstock, Cowboy's in Kennesaw, The Wild Mustang 
    					in Atlanta, and Chambrel Assisted Living in Roswell.<BR><BR>  					  
            </TD>	
          </TR>
          
          <TR>
            <td width="5%">
              <img src="lisa.jpg" width="170" height="144">
            </td>
            <TD width="95%" valign="top">
    	        <A NAME=LISA><B>Lisa Morrison</B></A>
              <A HREF="#TOP" color=red><U>Top</U></A><BR>
      	      Lisa is an Entertainment Director of Rocky Branch Railroad And Old West Town in Haralson County. She enjoys Ballroom and Swing dancing. 
    	  			Other interests are horseback riding, diving, and travel. She loves to dance socially and is proud to be a part of the team.<BR><BR>
    	      </TD>
          </TR>
    						      
          <TR>
            <td width="5%">
              <img src="bill.jpg" width="170" height="140">
            </td>
            <TD width="95%" valign="top">
          	  <A NAME=BILL><B>Bill Morrison</B></A>
              <A HREF="#TOP" color=red><U>Top</U></A><BR>
              Bill works as a computer and network security analyst though his passions are dancing and "staying busy". He started ballroom 
    	  			dancing over 10 years ago, and then discovered Swing, Country-Western, Salsa.... His addiction to dance has become much worse 
    		  		over the years. If you happen to know a cure for dancing addiction, don't tell him -- he doesn't want to know.<BR><BR>
    	      </TD>
          </TR>
    
          <TR>
            <td width="5%">
              <img src="virginia.jpg" width="170" height="137">
            </td>
            <TD width="95%" valign="top">
          	  <A NAME=VIRGINIA><B>Virginia Spencer**</B></A>
              <A HREF="#TOP" color=red><U>Top</U></A><BR>
    					By day, Virginia is a mild mannered manager for a manufacturing facility. But by night and weekends and special events, she morphs into 
    					her alter ego, 'Dance Girl'. Using her vast array of disguises and dance powers, she is able to leap, swing, whip, and rockstep her way 
    					in and out of many dancing disasters.  Look for her soon, on a dancefloor near you.<BR><BR>
    	      </TD>
          </TR>
    			
          <TR>
            <td width="5%">
              <img src="dorothy.jpg" width="170" height="137">
            </td>
            <TD width="95%" valign="top">
          	  <A NAME=DOROTHY><B>Dorothy Rothbart**</B></A>
              <A HREF="#TOP" color=red><U>Top</U></A><br>
    	      </TD>
          </TR>
    			
          <TR>
            <td width="5%">
              <img src="porters.jpg" width="170" height="113">
            </td>
            <TD width="95%" valign="top">
          	  <A NAME=JACKIE><B>Jackie Porter</B></A>
              <A HREF="#TOP" color=red><U>Top</U></A><BR>
              <BR><BR>
          	  <A NAME=BUD><B>Bud Porter</B></A>
              <A HREF="#TOP" color=red><U>Top</U></A><BR>
    	        <BR><BR>
    				</TD>
        </TABLE>
    
        <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
          <TR VALIGN="TOP" ALIGN="LEFT">
            <TD NOWRAP VALIGN="TOP" ALIGN="RIGHT" WIDTH=335>
              <IMG SRC="SPACER.gif" WIDTH=1 HEIGHT=240 BORDER=0 ALT="spacer">
    	      </TD>
          </TR>
        </TABLE>
    
      </BODY>
    </HTML>

  5. #5
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.


    To properly analyze the problem, we will have to be able to see it in action... The HTML you posted above does not help as it does not include the CSS and accompanying script which creates the drop down menus to begin with...

    If you would like help with this problem, please post a link to a demo page so that we can find what is causing the issue.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  6. #6
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    ok. I put the form online.
    www.localmotiondanceteam.com
    go to "Team Members" and mouseover "Dance Videos"
    as you mouse down over the submenus, if you go near the team picture, the submenu disappears. If I change arial to verdana on line 3, it works fine. Here is the css

    Code:
    .jqueryslidemenu{
    font: bold 16px arial;
    background: #e5febc;
    width: 100%;
    }
    
    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    } 
    
    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    color: black;
    padding: 12px 15px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    text-decoration: none;
    width: 100%;
    }
    
    .jqueryslidemenu ul li a:hover{
    background: white; /*tab link background during hover state*/
    }
    	
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    text-indent: 15px;
    display: block;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none; /* allows 2 submenu tabs in 1 horiz line */
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    /*.jqueryslidemenu ul li ul li ul{
    top: 0;
    }*/
    
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 16px verdana;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-left: 1px solid black;
    background-color: #eff8d2;
    color: red;
    }
    
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 10px;
    }
    .rightarrowclass{
    position: center;
    top: 6px;
    right: 5px;
    }
    Last edited by Snookerman; 08-04-2009 at 06:04 AM.

  7. #7
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    Hmm, I'm not getting the same results... If I move the mouse down onto the submenu after changing the submenu font-family to arial in firebug, and move my mouse towards the team picture, the submenu still stays there for me.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  8. #8
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    ok I changed it to verdana and put it online. Now it works correctly

  9. #9
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    Glad its working for you now, and sorry I couldn't be of more help
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  10. #10
    Join Date
    May 2009
    Location
    Greensboro, GA
    Posts
    163
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    but why should a font change make a difference. It works with verdana and doesn't work with arial. That doesn't make sense

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
  •