skywalker - 3:40 pm on Jun 23, 2008 (gmt 0)

Hi,

Moving along further with my newly honed CSS skills ;-) acquired from the feedback on my last site, thanks to Suzy and all.

I am trying to template a CSS page which has a simple two level (all horizontal) navigation, I have decided on Spry as that gave me some of the basics already but I am really struggling now to show this how I want it.

Basically I have 7 main nav titles in the first line which are all white out of orange. When you roll over each there are up to seven sub sections which are needed to be all grey text appearing underneath the white list. So if you rollover 'Stuff We Do' the 'Museums & Exhibitions' to 'Signage' list comes up. But I want each one of those selectable and all in one line, not a vertical list.

Sorry, this may be a simple task, but it really is doing my head in ;-(

Here is the code


<div id="topmenu">
<ul id="homemenu" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Big Stuff</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Little Stuff</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Stuff We Do</a>
<ul>
<li><a href="#">Museums &amp; Exhibitions</a> </li>
<li><a href="#">Interiors</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Signage</a></li>
</ul>
</li>
<li><a href="#">Our Stuff</a></li>
<li><a href="#">Stuff Others Say</a></li>
<li><a href="#">Tech Stuff</a></li>
<li><a href="#">Contact Stuff</a></li>
</ul>
</div>


Here is the Spry CSS file


ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10px;
cursor: default;
width: auto;
color: #FFFFFF;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 10em;
float: left;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
background-repeat: repeat;
visibility: inherit;
}
/* 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;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #F7840C;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
}
/* 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
{
background-color: #FFFFFF;
color: #FFF;
}

/*******************************************************************************

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(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* 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(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* 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(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* 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(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}


Thanks in anticipation

EDIT: I put ( ) within this whole post so I showed code within forum rules but it has not worked. Tried to read through all the code posting threads and nothing showed me this was incorrect, can anyone please educate a newbie on this?.

Don't want to upset anyone ;-)

[edited by: tedster at 7:41 pm (utc) on June 23, 2008]
[edit reason] remove link from coded comment [/edit]