CSS Flyout Menu

Question

Here's a link to the
page
When you mouse over "fireplaces", the menu is hidden behind
the flash div in IE and Firefox.
Style sheet attached.

Answer 1

See if this helps:
http://www.projectseven.com/go/127
Ken Ford
Adobe Community Expert - Dreamweaver/ColdFusion
Fordwebs, LLC
http://www.fordwebs.com
"OlDirty" <[email protected]> wrote in message
news:[email protected]...
>
http://olympiafireplace.wmsgroup.com/
>
> When you mouse over "fireplaces", the menu is hidden
behind the flash div in
> IE and Firefox.
>
> Style sheet attached.
>
> /**TOP ELEMENTS**/
> * {
> margin: 0px;
> padding: 0px;
> }
> body {
> background: #253E7A url(images/bg.jpg) repeat-x fixed;
> font: 12px/1.5em "Trebuchet MS";
> text-align: left;
> height: 100%;
> color: #333333;
>
> /**LAYOUT**/
>
> }
> #wrap {
> margin: 0px auto;
> width: 800px;
> position: relative;
> background: #1D315F;
> height: 100%;
> }
> #header {
> height: 120px;
> width: 800px;
> background: url(images/header_bg.jpg) repeat-x left top;
> border-bottom: 8px solid #192B55;
> margin: 0px;
> padding: 0px;
> float: left;
> position: relative;
> }
> #left {
> position: absolute;
> height: 100px;
> width: 200px;
> left: 25px;
> top: 14px;
> font: 11px/1.5em "Trebuchet MS";
> color: #FFFFFF;
> }
> #right {
> font: 11px/1.5em "Trebuchet MS";
> color: #FFFFFF;
> height: 75px;
> width: 208px;
> position: absolute;
> left: 568px;
> top: 15px;
> text-align: right;
> }
> #logo {
> height: 108px;
> width: 198px;
> position: absolute;
> left: 302px;
> top: 10px;
> }
> #headerlinks {
> position: absolute;
> left: 599px;
> top: 107px;
> width: 176px;
> height: 24px;
> color: #FFFFFF;
> text-align: right;
> }
> #navbar {
> background: #B4282E;
> float: left;
> margin: 0px;
> padding: 0px;
> width: 224px;
> height: 285px;
> border-top: 1px solid #FFFFFF;
> }
> #headerphoto {
> padding: 0px;
> float: left;
> height: 287px;
> width: 576px;
> border-top: 2px solid #FFFFFF;
> }
> #leftnav {
> background: #1D305E;
> width: 194px;
> color: #FFFFFF;
> margin: 0px;
> padding: 10px 10px 20px 20px;
> float: left;
> height: auto;
> }
> #main {
> background: url(images/main_bg.jpg) repeat-x left top;
> color: #FFFFFF;
> background-color: #3254A7;
> padding: 25px 20px 3em 25px;
> width: 531px;
> float: left;
> display: block;
> }
> #rightnav {
> background: #FFFFFF repeat-x top;
> width: 150px;
> position: relative;
> height: 284px;
> padding-top: 15px;
> padding-right: 8px;
> padding-left: 20px;
> color: #333333;
> float: left;
> }
> #footerwrap {
> width: 800px;
> clear: both;
> padding: 0px;
> }
> #footer {
> height: 30px;
> width: 800px;
> background: #18284F;
> text-align: center;
> color: #FFFFFF;
> margin: 0px auto;
> padding-top: 18px;
> position: relative;
> overflow: visible;
> clear: both;
> }
> h1.leftnav {
> font-size: 14px;
> font-weight: bold;
> }
> h1 {
> padding-bottom: 14px;
> font: 36px/1em "Trebuchet MS";
> }
> p.main {
> padding-left: 12px;
> padding-right: 6px;
> line-height: 1.5em;
> }
> a, a:visited {
> color: #FFFFFF;
> background: inherit;
> text-decoration: none;
> /*
================================================================
> This copyright notice must be untouched at all times.
> }
> The original version of this stylesheet and the
associated (x)html
> is available at
http://www.cssplay.co.uk/menus/flyoutt.html
> Copyright (c) 2005-2007 Stu Nicholls. All rights
reserved.
> This stylesheet and the assocaited (x)html may be
modified in any
> way to fit your requirements.
>
===================================================================
> /* common styling */
> }
> .menu {
> width:224px;
> height:285px;
> margin:0px;
> font: bold 14px/31px "Trebuchet MS";
> color: #FFFFFF;
> background: #B4282E url(images/nav_bg.jpg);
> float: left;
> }
> .menu ul li a, .menu ul li a:visited {
> display:block;
> text-decoration:none;
> color:#FFFFFF;
> width:204px;
> text-align:left;
> padding-left: 20px;
> border-top: 1px solid #fff;
> border-bottom: 0 solid #fff;
> border-left: 0 solid #fff;
> }
> .menu ul {padding:0; margin:0;list-style-type: none; }
> .menu ul li {float:left; position:relative;}
> .menu ul li ul {display: none;}
>
> /* specific to non IE browsers */
> .menu ul li:hover a {
> color:#fff;
> background-color: #B5282E;
> }
> .menu ul li:hover ul {
> display:block;
> position:absolute;
> top:0;
> left:200px;
> width:204px;
> }
> .menu ul li:hover ul li a.hide {
> color:#000;
> background-color: #B4292E;
> }
> .menu ul li:hover ul li:hover a.hide {width:204px;}
> .menu ul li:hover ul li ul {display: none;}
> .menu ul li:hover ul li a {
> display:block;
> color:#000;
> width:204px;
> background-color: #B4292E;
> }
> .menu ul li:hover ul li a:hover {
> color:#000;
> background-color: #BC2D33;
> }
> .menu ul li:hover ul li:hover ul {display:block;
position:absolute;
> left:151px; top:0; color:#000;}
> .menu ul li:hover ul li:hover ul li a {
> display:block;
> width:200px;
> color:#000;
> background-color: #BC2D33;
> }
> .menu ul li:hover ul li:hover ul li a:hover {
> color:#fff;
> background-color: #B5282E;
> }
>
> a:hover {
> color: #E5E5E5;
> background: inherit;
> padding-bottom: 0;
> text-decoration: none;
> }
> img.float-left {
> margin: 5px 10px 10px 0px;
> float: left;
> border: 1px solid #FFFFFF;
> }
> .headeraddress1 {
> height: 30px;
> width: 200px;
> position: absolute;
>
> }
> img.float-right {
> margin: 5px 10px 10px 0px;
> }
> blockquote {
> padding: 10px 10px 10px 35px;
> background: url(images/quote.jpg) no-repeat 10px 10px;
> color: #FFFFFF;
> font: italic normal 12px/1.5em Georgia, "Times New
Roman", Times, serif;
> margin-right: 0px;
> margin-bottom: 2px;
> margin-left: 0px;
> }
> h2 {
> color: #B5282E;
>
> }
>