Spry Menubar: Trouble with fitting ul submenus to their largest li element
hey there,
i'm new using dreamweaver , spry menubar have used notepad in past build webpages i'm familiar how css , html work.
however, i'm having bear of time trying second- , third-tiered submenus fit largest li item. right best solution has been try set fixed width ul element, leaves room possibility of li elements extending outside border of box, , can clunky submenus have skinny li elements due smaller amounts of text.
i'm looking have no text-wrapping of li elements they're on 1 line , have entire submenu wide widest li element, if makes sense? help.
-------------
here's css code:
@charset "utf-8";
/* sprymenubarhorizontal.css - version 0.6 - spry pre-release 1.6.1 */
/* copyright (c) 2006. adobe systems incorporated. rights reserved. */
/*******************************************************************************
layout information: describes box model, positioning, z-order
*******************************************************************************/
/* outermost container of menu bar, auto width box no margin or padding */
ul.menubarhorizontal
{
margin: 0;
padding: 55px 0 0 30px;
list-style-type: none;
font-size: 9px;
cursor: default;
width: auto;
font-family: sans-serif, arial, verdana;
font-weight: bold;
color: #fff;
}
/* set active menu bar class, setting z-index accomodate ie rendering bug: http://therealcrisp.xs4all.nl/meuk/ie-zindexbug.html */
ul.menubaractive
{
z-index: 1000;
}
/* menu item containers, position children relative container , fixed width */
ul.menubarhorizontal li
{
margin: 0;
list-style-type: none;
font-size: 9px;
position: relative;
text-align: left;
float: left;
color: #fff;
height: 21px;
}
/* submenu list items have light blue background */
ul.menubarhorizontal li li, ul.menubarhorizontal ul
{
background-color: #679ac9;
}
/* submenus should appear below parent (top: 0) higher z-index, off left side of screen (-1000em) */
ul.menubarhorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 9px;
z-index: 1020;
cursor: default;
position: absolute;
width: auto;
display: block;
left: -1000em;
color: #fff;
}
/* submenu showing class designation menubarsubmenuvisible, set left auto comes onto screen below parent menu item */
ul.menubarhorizontal ul.menubarsubmenuvisible
{
left: auto;
}
/* menu item containers same fixed width parent */
ul.menubarhorizontal ul li
{
clear: left;
/*width: 12em;*/
white-space: nowrap;
height: auto;
}
/* submenus should appear right (100%) , (-5%) */
ul.menubarhorizontal ul ul
{
position: absolute;
margin: -5% 0 0 100%;
}
/* submenu showing class designation menubarsubmenuvisible, set left 0 comes onto screen */
ul.menubarhorizontal ul.menubarsubmenuvisible ul.menubarsubmenuvisible
{
left: auto;
top: 0;
}
/*******************************************************************************
design information: describes color scheme, borders, fonts
*******************************************************************************/
/* submenu containers have borders on sides */
ul.menubarhorizontal ul
{
border: 1px solid #ccc;
}
/* menu items light gray block padding , no text decoration */
ul.menubarhorizontal a
{
display: block;
padding: 0.5em 1.25em;
text-decoration: none;
}
/* menu items have mouse on or focus have blue background , white text */
ul.menubarhorizontal a:hover, ul.menubarhorizontal a:focus
{
background-color: #33c;
}
/* menu items open submenus set menubaritemhover blue background , white text */
ul.menubarhorizontal a.menubaritemhover, ul.menubarhorizontal a.menubaritemsubmenuhover, ul.menubarhorizontal a.menubarsubmenuvisible
{
background-color: #33c;
color: #fff;
}
/*******************************************************************************
submenu indication: styles if there submenu under given menu item
*******************************************************************************/
/* menu items have submenu have class designation menubaritemsubmenu , set use background image positioned on far right (100%) , centered vertically (50%) */
ul.menubarhorizontal a.menubaritemsubmenu
{
background-image: url("images/downarrow.gif");
background-repeat: no-repeat;
background-position: 100% 50%;
}
/* menu items have submenu have class designation menubaritemsubmenu , set use background image positioned on far right (100%) , centered vertically (50%) */
ul.menubarhorizontal ul a.menubaritemsubmenu
{
background-image: url("images/sidearrow.gif");
background-repeat: no-repeat;
background-position: 100% 50%;
}
/* menu items open submenus have class designation menubaritemsubmenuhover , set use "hover" background image positioned on far right (100%) , centered vertically (50%) */
ul.menubarhorizontal a.menubaritemsubmenuhover
{
background-image: url("images/downarrow.gif");
background-repeat: no-repeat;
background-position: 100% 50%;
}
/* menu items open submenus have class designation menubaritemsubmenuhover , set use "hover" background image positioned on far right (100%) , centered vertically (50%) */
ul.menubarhorizontal ul a.menubaritemsubmenuhover
{
background-image: url("images/sidearrow.gif");
background-repeat: no-repeat;
background-position: 100% 50%;
}
.menubarhorizontal a:link,
.menubarhorizontal a:visited,
.menubarhorizontal a:hover,
.menubarhorizontal a:active,
.menubarhorizontal a:focus {
color: #fff; /**adjust hex color code req'd**/
font-weight:bold;
}
/*******************************************************************************
browser hacks: hacks below should not changed unless expert
*******************************************************************************/
/* hack ie: make sure sub menus show above form controls, underlay each submenu iframe */
ul.menubarhorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* hack ie: stabilize appearance of menu items; slash in float keep ie 5.0 parsing */
@media screen, projection
{
ul.menubarhorizontal li.menubaritemie
{
display: inline;
f\loat: left;
background: #fff;
}
}
hello austin,
first aid > please have @ thread: http://forums.adobe.com/thread/1059343?tstart=0
... and, if not succeed, please load files server (no matter how like) can better analyze.
hans-günter
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment