Team:SYSU-China/temp/menu.css

From 2011.igem.org

  1. menu {

position:relative; height:75px; background:url(SYSU_main_pages_images_Menu.png ) repeat-x 0 center; z-index: 5; }

  1. menu .menu {

left:50px; position:absolute; }

  1. menu * {
   list-style:none;
   border:0;
   padding:0;
   margin:0;

}

  1. menu a {
   display:block;
   padding-left:33px;

}

  1. menu a span {
   display:block;
   padding:30px 33px 37px 2px;
   white-space:nowrap;

}

  1. menu li {
   float:left;
   background:url(SYSU_main_pages_images_Pix.gif);

}

  1. menu li li { float:none; }
  2. menu div {

display:none; position:absolute; background:url(SYSU_main_pages_images_Pix.gif); margin-top:-35px; width:200px; }

  1. menu div ul { position:relative; }
  2. menu div div {
   margin:-50px 0 0 -9px;
   left:100%;

}

  1. menu li:hover>div { display:block; }

/** ie7 */

  • first-child+html #menu div div { display:block; top:-9999px; }
    first-child+html #menu li:hover>div { top:auto; }
  1. menu div.columns { width:200px; }
  2. menu div.columns ul {
   float:left;
   width:200px;
   position:static;

}

  1. menu div.columns a { white-space:normal; }
  2. menu div.two { width:400px; }
  3. menu div.two ul.one div { margin-left:-209px; }
  4. menu div.two ul.one div div,
  5. menu div.two ul.two div { margin-left:-9px; }
  6. menu div.three { width:600px; }
  7. menu div.three ul.one div { margin-left:-409px; }
  8. menu div.three ul.two div { margin-left:-209px; }
  9. menu div.three ul.one div div,
  10. menu div.three ul.two div div,
  11. menu div.three ul.three div { margin-left:-9px; }
  12. menu div.four { width:800px; }
  13. menu div.four ul.one div { margin-left:-609px; }
  14. menu div.four ul.two div { margin-left:-409px; }
  15. menu div.four ul.three div { margin-left:-209px; }
  16. menu div.four ul.one div div,
  17. menu div.four ul.two div div,
  18. menu div.four ul.three div div,
  19. menu div.four ul.four div { margin-left:-9px; }
  20. menu div.five { width:1000px; }
  21. menu div.five ul.one div { margin-left:-809px; }
  22. menu div.five ul.two div { margin-left:-609px; }
  23. menu div.five ul.three div { margin-left:-409px; }
  24. menu div.five ul.four div { margin-left:-209px; }
  25. menu div.five ul.one div div,
  26. menu div.five ul.two div div,
  27. menu div.five ul.three div div,
  28. menu div.five ul.four div div,
  29. menu div.five ul.five div { margin-left:-9px; }
  1. menu a, #menu a span {
   font-family:'Trebuchet MS', Tahoma, Arial;
   font-size:16px;
   line-height:24px;
   color:#fff;
   text-decoration:none;
   font-weight:normal;

}

  1. menu a {
   text-shadow:rgb(64,49,25) -1px -1px 0;
   background:url(SYSU_main_pages_images_Item.png

) no-repeat left -546px; }

  1. menu a span {

background:url(SYSU_main_pages_images_Item.png ) no-repeat right 0; color: #CCC; font-weight: bold; }

  1. menu li.current>a { background-position:left -637px; }
  2. menu li.current>a span { background-position:right -182px; }
  3. menu a.parent span {
   background-position:right -91px;
   padding-right:60px;

}

  1. menu li.current>a.parent span { background-position:right -273px; }
  2. menu>ul>li:hover>a, #menu a:hover { background-position:left -637px; }
  3. menu>ul>li:hover>a span, #menu a:hover span {

background-position:right -182px; color: #FFF; font-weight: bold; }

  1. menu>ul>li:hover>a.parent span, #menu a.parent:hover span {
   background-position:right -455px;

}

  1. menu div a {
   margin-left:4px;
   padding:4px 0 0 0;
   width:190px;
   background:url(SYSU_main_pages_images_Subitem.png

) no-repeat 0 top;

   text-shadow:#111 -1px -1px 0;

}

  1. menu div a span {
   font-size:14px;
   background:url(SYSU_main_pages_images_Subitem.png

) no-repeat -384px bottom;

   padding:3px 14px 10px 11px;
   white-space:normal;
   color:rgb(195,191,183);

}

  1. menu div a:hover,
  2. menu div ul>li:hover>a.parent, #menu div ul li a.parent:hover {
   background-position:-192px top;

}

  1. menu div a:hover span {
   color:#fff;
   background-position:-768px bottom;

}

  1. menu div a.parent span { background-position:-576px bottom; }
  2. menu div ul>li:hover>a.parent span, #menu div ul li a.parent:hover span {
   color:#fff;
   background-position:-960px bottom;

}

  1. menu div {

background:url(SYSU_main_pages_images_Columns.png ) no-repeat -200px -14px; padding-top:14px; }

  1. menu div ul {
   width:200px;
   background:url(SYSU_main_pages_images_Columns.png

) no-repeat 0 bottom;

   padding-top:11px;
   padding-bottom:17px;

}

  1. menu div div { background-position:-200px top; }
  2. menu div div ul { padding-top:0; }
  1. menu div.columns {
   padding-top:0;
   margin-top:-21px;

}

  1. menu div div.columns { margin-top:-36px; }
  2. menu div.columns>ul {
   padding-top:25px;
   margin-top:-14px;

}

  1. menu div.two { background-position:-1000px bottom; }
  2. menu div.three { background-position:-1400px bottom; }
  3. menu div.four { background-position:-2000px bottom; }
  4. menu div.five { background-position:-2800px bottom; }
  5. menu div.columns ul.two,
  6. menu div.columns ul.three,
  7. menu div.columns ul.four,
  8. menu div.columns ul.five { background-position:-550px -14px; }
  9. menu div.columns ul.one { background-position:-400px -14px; }
  10. menu div.two ul.two,
  11. menu div.three ul.three,
  12. menu div.four ul.four,
  13. menu div.five ul.five { background-position:-800px -14px; }
  1. menu div.columns>ul>li>a {
   margin-left:0;
   width:200px;

}

  1. menu div.columns>ul.one>li>a {
   margin-left:4px;
   width:194px;

}

  1. menu div.two>ul.two>li>a,
  2. menu div.three>ul.three>li>a,
  3. menu div.four>ul.four>li>a,
  4. menu div.five>ul.five>li>a {
   width:194px;

}

  1. menu.active a {
   z-index:780;
   position:relative;

}

  1. menu.active li { z-index:778; }
  2. menu.active div div { z-index:781; }
  3. menu.active div a { position:static; }
  1. menu.active li.back {
   background:url(SYSU_main_pages_images_Item.png

) no-repeat left -637px;

   height:91px;
   position:absolute;
   padding:0;
   margin:0;

}

  1. menu.active li.back .left {
   display:block;
   padding:0;
   width:auto;
   background:url(SYSU_main_pages_images_Item.png

) no-repeat right -182px;

   height:91px;
   margin:0 5px 0 28px;
   position:relative;
   left:5px;
   

}

  1. menu.active li.current-back, #menu.active li.current-parent-back { background-position:left -637px; }
  2. menu.active li.current-back .left { background-position:right -182px; }
  3. menu.active li.current-parent-back .left { background-position:right -182px; }
  1. menu.active .spanbox {
   position:absolute;
   display:none;
   background:url(SYSU_main_pages_images_Pix.gif);
   margin-top:-21px;
   width:200px;

}

  1. menu.active div {
   margin-top:-14px;
   display:block;
   position:relative;

}

  1. menu.active div .spanbox {
   margin:0 0 0 -6px;
   left:100%;

}

  1. menu.active .spanbox .spanbox { margin-top:-50px; }
  2. menu.active .spanbox .spanbox div { margin:0; }

/** ie7 */

  • first-child+html #menu.active div div { top:auto; }
    first-child+html .menu-images-preloading { visibility:hidden; }
  1. menu.active div.two ul.one .spanbox { margin-left:-206px; }
  2. menu.active div.two ul.one .spanbox .spanbox,
  3. menu.active div.two ul.two .spanbox { margin-left:-6px; }
  4. menu.active div.three ul.one .spanbox { margin-left:-406px; }
  5. menu.active div.three ul.two .spanbox { margin-left:-206px; }
  6. menu.active div.three ul.one .spanbox .spanbox,
  7. menu.active div.three ul.two .spanbox .spanbox,
  8. menu.active div.three ul.three .spanbox { margin-left:-6px; }
  9. menu.active div.four ul.one .spanbox { margin-left:-606px; }
  10. menu.active div.four ul.two .spanbox { margin-left:-406px; }
  11. menu.active div.four ul.three .spanbox { margin-left:-206px; }
  12. menu.active div.four ul.one .spanbox .spanbox,
  13. menu.active div.four ul.two .spanbox .spanbox,
  14. menu.active div.four ul.three .spanbox .spanbox,
  15. menu.active div.four ul.four .spanbox { margin-left:-6px; }
  16. menu.active div.five ul.one .spanbox { margin-left:-806px; }
  17. menu.active div.five ul.two .spanbox { margin-left:-606px; }
  18. menu.active div.five ul.three .spanbox { margin-left:-406px; }
  19. menu.active div.five ul.four .spanbox { margin-left:-206px; }
  20. menu.active div.five ul.one .spanbox .spanbox,
  21. menu.active div.five ul.two .spanbox .spanbox,
  22. menu.active div.five ul.three .spanbox .spanbox,
  23. menu.active div.five ul.four .spanbox .spanbox,
  24. menu.active div.five ul.five .spanbox { margin-left:-6px; }
  25. menu.active div.columns ul .spanbox div { margin-left:0; }
  26. menu.active div.two,
  27. menu.active div.three,
  28. menu.active div.four,
  29. menu.active div.five { padding-bottom:14px; }

.menu-images-preloading, .menu-images-preloading div {

   top:0;
   left:0;
   width:4px;
   height:2px;
   opacity:0.1;
   overflow:hidden;
   position:absolute;

} .menu-images-preloading { width:2px; } .menu-images-preloading .columns-png { background:url(SYSU_main_pages_images_Columns.png ) no-repeat; } .menu-images-preloading .subitem-png { background:url(SYSU_main_pages_images_Subitem.png ) no-repeat; } .page_content_LsideBar .page_content_textBar #page_content_textBar_enterTEXT h2 { font-family: "Arial Black", Gadget, sans-serif; color: #CE8300; }