I am now setting up the CSS code for a horizontal SOS menu display but am 
having trouble getting the submenus to display on hover. 

Also, in IE, the menu is stretched vertically. Would this be due to the size of 
my background image? Its only 10 pixels in height.

http://www.drkdesign.com/voicebox_demo/index_h.htm

CSS:

#menu-container { 
     position: absolute;
     top: 100px;
  left: 0px;
} 

#menu {
 width: 800px;
 float: left;
 margin: 0;
 background-image: url(../images/vb_linkbkgrd_h.gif);
 border-bottom: 1px solid #F4BA89;
 padding: 3px 0 5px 0;

} 

#menu a {
    font: 70% Verdana, Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-style: italic;
 text-align: center;
 display: block;
 white-space: nowrap;
 margin: 0;
 padding: 0 0 0 5px;
}

#menu a.first {
    padding-left: 5px;
}

#menu a.rightpad {
    padding-right: 30px;
} 

#menu a, #menuh a:visited /* menu at rest */ {
 color: #F4BA89; /*light orange*/
 text-decoration: none;
}

#menu a:hover /* menu at mouse-over  */ {
 color: #7BB5E1; /*light blue*/
}
 
#menu ul {
 list-style: none;
 margin: 0;
 padding: 0;
 float: left;
 width: 100px; /* width of all menu boxes */
}

#menu li {
 position: relative;
}

#menu ul ul {
 position: absolute;
 z-index: 500;
 top: auto;
 display: none;
 padding: 1em;
 margin: -1em 0 0 -1em;
 width: 100px;
}

#menu li ul li {
    padding-left: 3px;
    border-top: .5px solid #F4BA89; /*light orange*/
    border-left: .5px solid #F4BA89; /*light orange*/
    border-bottom: 2px solid #828282; /*dark gray*/
    border-right: 2px solid #828282; /*dark gray*/
}

div#menu li:hover {
 cursor: pointer;
 z-index: 100;}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Popout Menu */



And thanks to Tedd for his wonderful examples of vertical and horizontal 
SOS....they have been very helpful!
http://www.sperling.com/examples/menuv/
http://www.sperling.com/examples/menuh/


Debbie <[EMAIL PROTECTED]>


______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to