...

View Full Version : 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



/* 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.



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


<!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
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 (http://nopeople.com/CSS%20tips/index.html) into a second attempt that might turn out better.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum