1 Reply Latest reply on Jun 9, 2008 4:36 PM by Newsgroup_User

    CSS Flyout Menu

    Diventare Creative Level 1
      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.
        • 1. Re: CSS Flyout Menu
          Level 7
          See if this helps:

          http://www.projectseven.com/go/127

          --
          Ken Ford
          Adobe Community Expert - Dreamweaver/ColdFusion
          Fordwebs, LLC
          http://www.fordwebs.com


          "OlDirty" <andrew@wmsgroup.com> wrote in message news:g2ke64$blq$1@forums.macromedia.com...
          > 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;
          >
          > }
          >