Hi there,
I'm very novice to web design. I'm trying to make a pulldown menu, but
the formatting keeps getting screwed up when you roll the mouse over
it.
Please see www.boundarysys.com for what I'm talking about. Before the
mouse touches the pulldown, the vertical height of the menubar is
perfect. As soon as the mouse rolls over it, it expands to about twice
the height.
The other problem is: how do I eliminate the vertical spaces between
the rows of the submenus? Ideally, I'd like them to have sunken
appearance. But I'd settle just for them not looking like individual
cells floating in space.
Thanks so much for any help/guidance/info.
Here is the style sheet I'm using:
BODY
{font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 0px;
margin-left: 2px;
margin-right: 3px;
padding: 0px;}
P /* PADDING AROUND LETTERS IN TOP MENU BAR */
{padding-top: 5px;
margin-left: 5px;}
table.navbar
{font-size: 8pt;
margin: 0px; /* this is an outline around the entire top menu bar */
height: 15px;} /* the height of the main menu bar */
table.menu /* THIS CONTROLS THE GROUPING OF THE WHOLE SUBMENU - EX. A
BORDER HERE WOULD GO AROUND THE WHOLE SUBMENU */
{font-size: 8pt;
margin: 0px;
padding: 0px}
td.menuNormal /* TOP MENU BAR COLORS */
{color: #1E7575;
vertical-align: top;
border: 1px solid #CCCCCC;
background-color: #e5e5e5;}
td.menuHover /* TOP MENU BAR COLORS SELECTED */
{color: #1E7575;
vertical-align: top;
border: 1px solid #CCCCCC;
height: 15px;
background-color: #e5e5e5}
div.menuNormal /* THIS CONTROLS THE ZIPPING UP OF THE PULL DOWN MENUS
*/
{display: none;
position: static;}
div.menuHover /* THIS CONTROLS THE ZIPPING UP OF THE PULL DOWN MENUS
*/
{display: inline;
position: absolute;}
a.menuitem:link /* DROP DOWN BOX MENU */
{background-color: #33CCCC;
display: block;}
a.menuitem:hover /* DROP DOWN BOX SELECTED ITEM */
{color: black;
background-color: #CCFFFF;
display: block;}
a.menuitem:visited /* REDUNDANT BUT NECESSARY - MUST MATCH
A.MENUITEM.LINK - FOR ITEMS ALREADY CLICKED */
{background-color: #33CCCC;
display: block;}
