Previous Message
Next Message

More SOS issues

Sent by Iorhael on 18 March 2006 20:08


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-REMOVED]>


______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
Previous Message
Next Message

Message thread: