Question

trying to fix a CSS bug for some code that someone else wrote. I’m no CSS expert, so I’m having trouble trying to find what is giving me this problem. This page is supposed to have 4 main menu buttons at the top. The user can hover over each and it will display a sub menu. This work fine in FF and IE, but in Safari and Chrome the buttons end up in the same spot, causing them all to display sub menus when you hover over the first button.

Link to HTML: http://www.blogtrog.com/code.aspx?id=c4c62a1a-af8f-4bfc-a3c3-f1fbf9013b3d

Here’s the chunk of CSS that controls the main menu:

.top-bar {
    background: url('/img/top-gradient.jpg') repeat-x top;
    height : 50px;
}

.top-bar-content {
    width : 1000px;
    margin-left: auto;
    margin-right: auto;
}

.menu-bar {
    background : url('/img/menu-gradient.jpg') repeat-x top;
    height : 25px;
    vertical-align : middle;
}

.menu-bar-content {
    height : 25px;
    width : 1000px;
    color : #ffffff;
    font-weight : bold;
    margin-left: auto;
    margin-right: auto;
}

.footer-bar {
    width : 1000px;
    text-align : right;
    margin-left: auto;
    margin-right: auto;
}

hr {
    border : none 0;
    border-top : 1px dashed #333333;
    width : 100%;
    height : 1px;
}

    /* menu */

ul#menu
    { margin:0; padding:1px 0; list-style:none; width:1000px; height:21px; font:normal 12px arial, verdana, helvetica; font-weight: bold;}
ul#menu li
    { margin:0; padding:0; display:block; float:left; position:relative; width:160px; }
ul#menu li a:link,
ul#menu li a:visited
    { padding:4px 0; display:block; text-align:left; text-decoration:none; color:#ffffff; width:160px; height:13px; }
ul#menu li:hover a,
ul#menu li a:hover,
ul#menu li a:active
    { padding:4px 0; display:block; text-align:left; text-decoration:none; color:#ffffff; width:158px; height:13px; }

    /* sub menu */

ul#menu li ul.sub-menu
    { margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:158px; position:absolute; top:21px; left:-1px; border:1px solid #990000; border-top:none; }
ul#menu li:hover ul.sub-menu
    { display:block; }
ul#menu li ul.sub-menu li
    { width:158px; clear:left; width:158px; }

ul#menu li ul.sub-menu li a:link,
ul#menu li ul.sub-menu li a:visited
    { clear:left; background:#d6d6d6; padding:4px 0; width:158px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; color:#333333;}
ul#menu li ul.sub-menu li:hover a,
ul#menu li ul.sub-menu li a:active,
ul#menu li ul.sub-menu li a:hover
    { clear:left; background:#d6d6d6; padding:4px 0; width:158px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

    /* sub sub menu */

ul#menu li ul.sub-menu li ul.sub-sub-menu
    { display:none; margin:0; padding:0; list-style:none; position:absolute; left:157px; top:-2px; padding:1px 1px 1px 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#menu li ul.sub-menu li:hover ul.sub-sub-menu
    { display:block; }
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:link,
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:visited
    { background:#d6d6d6; }
ul#menu li ul.sub-menu li ul.sub-sub-menu li:hover a,
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:hover,
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:active
    { background:#d6d6d6; }

    /* span style */
ul#menu li ul.sub-menu li a span
    { position:absolute; top:0; left:144px; font-size:12pt; color:#990000; }
ul#menu li ul.sub-menu li:hover a span,
ul#menu li ul.sub-menu li a:hover span
    { position:absolute; top:0; left:144px; font-size:12pt; color:#ffffff; }

Answer 1

Under ul#menu add

position: absolute;