Sprymenu - submenu visibility problem

Limey10 · 01-01-2013, 10:24 AM

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-->

Excavator · 01-01-2013, 04:26 PM

Hello Limey10,
It would help to see your markup too.

Limey10 · 01-03-2013, 02:11 AM

Can anyone help me with this? Excavator? Ferris Bueller? Anyone, anyone?

Thanks guys and gals :-)

Phil

Excavator · 01-03-2013, 09:01 AM

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>

Limey10 · 01-03-2013, 01:39 PM

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

Excavator · 01-03-2013, 06:20 PM

Quote:

Originally Posted by Limey10

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.

Quote:

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.