Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder Limey10's Avatar
    Join Date
    Sep 2009
    Location
    Malaysia
    Posts
    52
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Sprymenu - submenu visibility problem

    Hi all.

    I'm having problems with the submenu items of a sprymenu. They won't display unless the mouse is directly over the top of them, although there is a border when i hover over the parent menu item.

    Hope this code is enough for someone to help me out.

    Thanks in advance, Phil

    Code:
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    {
    	list-style-type: none;
    	font-size: 140%;
    	cursor: default;
    	width: auto;
    	padding: 0;
    	margin: 0;
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    {
    	z-index: 1000;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
    	padding: 0;
    	list-style-type: none;
    	font-size: 100%;
    	position: relative;
    	text-align: center;
    	cursor: pointer;
    	width: auto;
    	float: left;
    	margin-top: 5;
    	margin-right: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    }
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: 100%;
    	z-index: 1020;
    	cursor: default;
    	width: 8.2em;
    	position: absolute;
    	left: -1000em;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    {
    	left: auto;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
    	width: 8.2em;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    {
    	position: absolute;
    	margin: -5% 0 0 95%;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    {
    	left: auto;
    	top: 0;
    	margin: 0px;
    }
    
    /**************************************************************/*******************************************************************************
    
     DESIGN INFORMATION: describes color scheme, borders, fonts
    
     *******************************************************************************/
    
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    {
    	border: 1px solid #CCC;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
    	display: block;
    	cursor: pointer;
    	color: #FFF;
    	text-decoration: none;
    	padding-top: 0.55em;
    	padding-right: 0.75em;
    	padding-bottom: 0.6em;
    	padding-left: 0.75em;
    	border-left-width: thin;
    	border-left-style: solid;
    	border-left-color: #604A7B;
    	border-right-width: thin;
    	border-right-style: solid;
    	border-right-color: #604A7B;
    	margin: 0px;
    	border-bottom-width: thin;
    	border-bottom-style: solid;
    	border-bottom-color: #604A7B;
    	height: 18px;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
    	color: #FFF57F;
    	background-image: url(../images/bg%20normal.gif);
    	background-repeat: repeat-x;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
    	color: #FFFF00;
    	background-image: url(../images/bg%20hover.gif);
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: none;
    	border-left-style: solid;
    	border-right-width: thin;
    	border-left-width: thin;
    	border-left-color: #FFF57F;
    	border-right-color: #FFF57F;
    	background-repeat: repeat-x;
    }
    
    /**************************************************************/*******************************************************************************
    
     SUBMENU INDICATION: styles if there is a submenu under a given menu item
    
     *******************************************************************************/
    
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    {
    	background-image: url(SpryMenuBarDownHover.gif);
    	background-repeat: no-repeat;
    	background-position: 99%;
    }
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    {
    	background-image: url(../images/bg%20normal.gif);
    	background-repeat: repeat-x;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    {
    	background-image: url(../images/bg%20hover.gif);
    	background-repeat: repeat-x;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    {
    	background-image: url(../images/backgroundb.png);
    	background-repeat: repeat-x;
    }
    
    /**************************************************************/*******************************************************************************
    
     BROWSER HACKS: the hacks below should not be changed unless you are an expert
    
     *******************************************************************************/
    
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    {
    	position: absolute;
    	z-index: 1010;
    	filter:alpha(opacity:0.1);
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    {
    	ul.MenuBarHorizontal li.MenuBarItemIE
    	{
    	display: inline;
    	f\loat: left;
    	background-image: url(../images/backgrounda.png);
    	}
    }
    And here is the HTML.

    Code:
    <!--Begin main navigation menu-->
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="../index.html" id="home">HOME</a>    </li>
      <li><a href="../students.html" class="MenuBarItemSubmenu" id="students">PROOFREADING</a>
        <ul>
          <li><a href="../students.html">Students</a></li>
          <li><a href="../corporate.html">Corporate</a></li>
        </ul>
      </li>
      <li><a href="../editing.html" id="corporate">EDITING PLUS</a></li>
      <li><a href="../translation.html" id="translation">TRANSLATION</a>    </li>
      <li><a href="../payment.html" id=payment">PAYMENT &amp; SUBMISSION</a></li>
      <li><a href="../faq.html" id="faq">FAQ</a></li>
      <li><a href="../contact.html" id="contact">CONTACT</a></li>
    </ul>
    <!-- <div id="menu">
    
    <ul>
    
    <li><a id="first" title="Return to Home Page" href="/index.html">HOME</a></li>
    <li><a title="Corporate Proofreading Services" href="../corporate.html">&nbsp;CORPORATE  <FONT COLOR="#FFFF00"><em>PLUS</em></FONT></a></li>
    <li><a title="Translation - Malay to English" href="../translation.html">TRANSLATION</a></li>
    <li><a title="Services only for Students" href="../students.html">STUDENTS</a></li>
    <li><a title="Fees and Payment" href="/payment.html">PAYMENTS</a></li>
    <li><a title="Submitting material for Editing" href="../submit.html">SUBMISSION</a></li>
    <li><a title="Frequently asked Questions" href="/faq.html">FAQ</a></li>
    <li><a title="Contact Us" href="/contact.html">CONTACT</a></li>
    
    </ul>
    
    </div>-->
    <!--End main navigation menu-->
    Last edited by Limey10; 01-02-2013 at 12:36 PM. Reason: I forgot to include the HTML
    "I'm still smiling because they haven't found the bodies yet.....muhahaha (evil laugh)"
    GrammarProofing
    Students Section
    GrammarProofingUK

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Limey10,
    It would help to see your markup too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder Limey10's Avatar
    Join Date
    Sep 2009
    Location
    Malaysia
    Posts
    52
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Can anyone help me with this? Excavator? Ferris Bueller? Anyone, anyone?

    Thanks guys and gals :-)

    Phil
    "I'm still smiling because they haven't found the bodies yet.....muhahaha (evil laugh)"
    GrammarProofing
    Students Section
    GrammarProofingUK

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You seem to be missing the bit that makes the dropped menu appear on hover. You can see the missing bits highlighted in red below.

    I changed a few things in your code, both the CSS and the markup. You should just copy/paste this entire thing into a new html document and compare it with your original version.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	height: 600px; /*demo only*/
    	width: 1210px;
    	margin: 30px auto;
    	background: #ccc;
    }
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal {
    	list-style-type: none;
    	font-size: 140%;
    	cursor: default;
    	width: auto;
    	padding: 0;
    	margin: 0;
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive { z-index: 1000; }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li {
    	padding: 0;
    	list-style-type: none;
    	font-size: 100%;
    	position: relative;
    	text-align: center;
    	cursor: pointer;
    	width: auto;
    	float: left;
    	margin-top: 5 0 0 0;
    	position: relative;
    }
    ul.MenuBarHorizontal li:hover ul{left: 0;}
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	font-size: 100%;
    	z-index: 1020;
    	cursor: default;
    	width: 8.2em;
    	position: absolute;
    	left: -1000em;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li { width: 8.2em; }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul {
    	position: absolute;
    	margin: -5% 0 0 95%;
    }
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
    	left: auto;
    	top: 0;
    	margin: 0px;
    }
    
    /*  DESIGN INFORMATION: describes color scheme, borders, fonts  */ 
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul {
     border: 1px solid #CCC;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a {
    	display: block;
    	cursor: pointer;
    	color: #FFF;
    	text-decoration: none;
    	padding-top: 0.55em;
    	padding-right: 0.75em;
    	padding-bottom: 0.6em;
    	padding-left: 0.75em;
    	border-left-width: thin;
    	border-left-style: solid;
    	border-left-color: #604A7B;
    	border-right-width: thin;
    	border-right-style: solid;
    	border-right-color: #604A7B;
    	margin: 0px;
    	border-bottom-width: thin;
    	border-bottom-style: solid;
    	border-bottom-color: #604A7B;
    	height: 18px;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
    	color: #FFF57F;
    	background-image: url(../images/bg%20normal.gif);
    	background-repeat: repeat-x;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, 
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, 
    ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
    	color: #FFFF00;
    	background-image: url(../images/bg%20hover.gif);
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: none;
    	border-left-style: solid;
    	border-right-width: thin;
    	border-left-width: thin;
    	border-left-color: #FFF57F;
    	border-right-color: #FFF57F;
    	background-repeat: repeat-x;
    }
    
    /* SUBMENU INDICATION: styles if there is a submenu under a given menu item */ 
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu {
     background-image: url(SpryMenuBarDownHover.gif);
     background-repeat: no-repeat;
     background-position: 99%;
    }
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
    	background-image: url(../images/bg%20normal.gif);
    	background-repeat: repeat-x;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
    	background-image: url(../images/bg%20hover.gif);
    	background-repeat: repeat-x;
    }
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
    	background-image: url(../images/backgroundb.png);
    	background-repeat: repeat-x;
    }
    </style>
    </head>
    <body>
        <div id="container">
        <!--Begin main navigation menu-->
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="../index.html" id="home">HOME</a>    </li>
      <li><a href="../students.html" class="MenuBarItemSubmenu" id="students">PROOFREADING</a>
        <ul>
          <li><a href="../students.html">Students</a></li>
          <li><a href="../corporate.html">Corporate</a></li>
        </ul>
      </li>
      <li><a href="../editing.html" id="corporate">EDITING PLUS</a></li>
      <li><a href="../translation.html" id="translation">TRANSLATION</a>    </li>
      <li><a href="../payment.html" id="payment">PAYMENT &amp; SUBMISSION</a></li>
      <li><a href="../faq.html" id="faq">FAQ</a></li>
      <li><a href="../contact.html" id="contact">CONTACT</a></li>
    </ul>
    <!-- <div id="menu">
    
    <ul>
    
    <li><a id="first" title="Return to Home Page" href="/index.html">HOME</a></li>
    <li><a title="Corporate Proofreading Services" href="../corporate.html">&nbsp;CORPORATE  <FONT COLOR="#FFFF00"><em>PLUS</em></FONT></a></li>
    <li><a title="Translation - Malay to English" href="../translation.html">TRANSLATION</a></li>
    <li><a title="Services only for Students" href="../students.html">STUDENTS</a></li>
    <li><a title="Fees and Payment" href="/payment.html">PAYMENTS</a></li>
    <li><a title="Submitting material for Editing" href="../submit.html">SUBMISSION</a></li>
    <li><a title="Frequently asked Questions" href="/faq.html">FAQ</a></li>
    <li><a title="Contact Us" href="/contact.html">CONTACT</a></li>
    
    </ul>
    
    </div>-->
    <!--End main navigation menu-->
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder Limey10's Avatar
    Join Date
    Sep 2009
    Location
    Malaysia
    Posts
    52
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi Excavator. Thanks for your efforts.

    I did as you suggested, but the background image (../images/bg%20normal.gif) is missing from the menu children (hope that is the right terminology)

    I input the red text only into my site and the same problem occurs.

    I'm thinking that I should just delete the entire menu and start again from scratch.

    Your thoughts?

    Thanks, Phil
    "I'm still smiling because they haven't found the bodies yet.....muhahaha (evil laugh)"
    GrammarProofing
    Students Section
    GrammarProofingUK

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Limey10 View Post
    I input the red text only into my site and the same problem occurs.
    Like I said, I made other changes as well. I only highlighted that bit of CSS to point out the bit that makes your dropped menu appear on hover.

    I'm thinking that I should just delete the entire menu and start again from scratch.

    Your thoughts?

    Thanks, Phil
    This menu is a bit more complicated than it needs to be. Maybe you could adapt one of these into a second attempt that might turn out better.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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