topical media & game development

talk show tell print

basic-css-15-Tr-It-Out-example15-1-chokoloskee-island-style-sheets-menu-system.css / css



  div#nav {
      position: fixed;
      right: 0;
      left: 0;
      top: 0.8em;
  }
  div#nav > div {
      position: relative;
      margin: auto;
      width: 50em;
      text-align: center;
  }
  div#nav > div > a > img {
      position: relative;
      clear: left;
      display: block;
      margin: 0 auto;
      width: 17em; 
      height: auto;
      z-index: 1;
  }
  div#nav ul {
      position: absolute;
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  div#nav > div > ul {
      top: 2.92em;
      width: 50%;
  }
  ul#gifts {
      left: 0;
  }
  ul#food {
      right: 0;
  }
  div#nav span {
      display: block;
      overflow: hidden;   
      height: 2.1em;
      line-height: 2.2em;
  }
  div#nav > div > ul > li {
      position: relative;
      background-color: lightblue;
      padding: 0.5em;
      border: 0.05em solid black;
      font-size: 0.9em;
      padding: 0 0.5em;
      width: 8.35em;
      height: 2.2em;
  }
  div#nav > div > ul > li:hover {
      background-color: lightsteelblue;
  }
  ul#gifts > li {
      float: left;    
  }
  ul#food > li {
      float: right;   
  }
  div#nav > div > ul > li#leftedge {
      border-right-width: 0;
      -moz-border-radius-topleft: 1em;
      -moz-border-radius-bottomleft: 1em;
      margin-left: 0.3em;
  }
  div#nav > div > ul > li#leftedge:hover {
      -moz-border-radius-bottomleft: 0;
  }
  div#nav > div > ul > li#rightedge {
      border-left-width: 0;
      -moz-border-radius-topright: 1em;
      -moz-border-radius-bottomright: 1em;
      margin-right: 0.3em;
  }
  div#nav > div > ul > li#rightedge:hover {
      -moz-border-radius-bottomright: 0;  
  }
  ul.menu {
      top: 2.19em;
      background-color: lightblue;
      width: 15em;
      -moz-border-radius-bottomleft: 1em;
      -moz-border-radius-bottomright: 1em;
      border: 0.05em solid black;
      display: none;
  }
  ul#food ul.menu {
      -moz-border-radius-topleft: 1em;
       right: -0.07em;
  }
  ul#gifts ul.menu {
      -moz-border-radius-topright: 1em;
      left: -0.05em;
  }
  div#nav > div > ul > li:hover > ul.menu,
  ul.menu:hover {
      display: block;
  }
  ul.menu li {
      text-align: left;
      color: black;   
  }
  ul.menu a {
      margin: 0.4em;
      padding: 0.5em;
      color: black;
      display: block;
      border: 0.05em solid lightblue;
  }
  ul.menu a:hover {
      background-color: lightsteelblue;
      -moz-border-radius: 0.8em;
      border: 0.05em solid black;
      text-decoration: none;
  }
  div#nav ul a:active {
      background-color: steelblue;
  }


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.