CSS - Test Your CSS Skills Number 15 :

**PicnicTutorials** · Feb 25, 2009, 10:13

Originally Posted by Paul O'B

If you mean :focus in order to try and hold the state so that the days stay displayed then it would be difficult - in fact it would be impossible

. :focus is currently only applied to elements that can receive focus (such as links and form elements).

Morning,

I know you were referring to impossible with CSS, but you can do it with JS. I have no idea if this would work in your guys particular case, but I recently put this together (with help as usual) to go with something I was working on. This gives focus to all browsers but Safari (Safari doesn't support tabindex on other than a couple tags).

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("li").focus(function () {
         $(this).addClass('focus');
    })
    $("li").blur(function () {
         $(this).removeClass('focus');
    })
   })
  </script>
<style type="text/css">
:focus, .focus {
         color:red;
}
</style>
</head>
<body>

<ul>
  <li tabindex="1">hello1</li>
  <li tabindex="2">hello2</li>
  <li tabindex="3">hello3</li>
</ul>

</body>
</html>

**ravi_k47** · Feb 25, 2009, 11:01

can i post the answer here ?? im a newbie.

**AutisticCuckoo** · Feb 25, 2009, 11:16

Send in your submission as a private message to Paul O'B.

If you post your answer, you'll 'ruin' the quiz for those who are going to submit their solutions but have not yet done so. Paul will post the solutions once the quiz finishes (probably on Friday).

**ravi_k47** · Feb 25, 2009, 11:24

never mind i'll wait.. its complicated :P

**ro0bear** · Feb 25, 2009, 12:28

Originally Posted by EricWatson

Morning,

I know you were referring to impossible with CSS, but you can do it with JS. I have no idea if this would work in your guys particular case, but I recently put this together (with help as usual) to go with something I was working on. This gives focus to all browsers but Safari (Safari doesn't support tabindex on other than a couple tags).

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("li").focus(function () {
         $(this).addClass('focus');
    })
    $("li").blur(function () {
         $(this).removeClass('focus');
    })
   })
  </script>
<style type="text/css">
:focus, .focus {
         color:red;
}
</style>
</head>
<body>

<ul>
  <li tabindex="1">hello1</li>
  <li tabindex="2">hello2</li>
  <li tabindex="3">hello3</li>
</ul>

</body>
</html>

Thanks Eric. It could be achieved with JavaScript (as can pretty much anything on a web page) but this is CSS test, testing your knowlege and the limits of what can be achieved with CSS.

I think it could be achieved with pure CSS if you could change the html.

**PicnicTutorials** · Feb 25, 2009, 12:55

Originally Posted by ro0bear

Thanks Eric. It could be achieved with JavaScript (as can pretty much anything on a web page) but this is CSS test, testing your knowlege and the limits of what can be achieved with CSS.

I think it could be achieved with pure CSS if you could change the html.

That is the limits of CSS. As Paul said, you can't apply focus (or rather, it won't work) to anything other than anchors and form elements.

**ro0bear** · Feb 25, 2009, 13:46

Originally Posted by EricWatson

That is the limits of CSS. As Paul said, you can't apply focus (or rather, it won't work) to anything other than anchors and form elements.

You could achieve it using pure CSS with :focus if you could change the html...

I am just PM'ing Paul to see if its ok for me to post what I mean using quiz #14 as an example. It should be ok, but I will just check with Paul first.

**PicnicTutorials** · Feb 25, 2009, 13:50

Originally Posted by ro0bear

You could achieve it using pure CSS with :focus if you could change the html...

I am just PM'ing Paul to see if its ok for me to post what I mean using quiz #14 as an example. It should be ok, but I will just check with Paul first.

Hi,

yes I know it could be accomplished if you change the HTML. I am purely referring to times in which you cannot.

**ro0bear** · Feb 25, 2009, 14:21

Originally Posted by EricWatson

Hi,

yes I know it could be accomplished if you change the HTML. I am purely referring to times in which you cannot.

Oh right, no you can't using this quiz's rules with pure CSS.

But here is an example of how you could do it if you could change the html which is based on the last quiz (not this one, so its not an answer to this quiz). (as ive done it now I might as well post it

)

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>ro0bear</title>
    <style type="text/css">
	  a {text-align: center; font-size: 100&#37;; width: 5em; background-color: #FFFFCC; border: black 0.25em solid; outline: red 0.1em solid; padding: 0.25em; margin: 0; color: black; text-decoration: none;}
	  a:focus {border: orange 0.25em solid;}
	  ul {list-style: none; font-size: 75%; width: 10em; padding: 0;}
	  ul li {display: block; background-color: blue; color: white; border: 1px solid red; margin-top: -1px; padding-left: 0.5em;}
	  ul li:hover {text-decoration: underline; cursor: pointer;}
	  span {position: absolute; right: 0.5em;}
	  .first {background-color: #FFFF00; color: red;}
	  .second {background-color: #BDBDBD;}
	  .third {background-color: #FFA500;}
	  #container {position: relative;}
	  #tab_1, #tab_2, #tab_3, #tab_4 {font-size: 150%; width: 6em; height: 2em; overflow: visible; padding: 0; margin: 0; cursor: pointer;}
	  #tab_1 {position: absolute; left: 1em; top: 0;}
	  #tab_2 {position: absolute; left: 9em; top: 0;}
	  #tab_3 {position: absolute; left: 17em; top: 0;}
	  #tab_4 {position: absolute; left: 25em; width: 0; height: 0; top: 0;}
	  #tab_1 ul {position: absolute; top: 3em;}
	  #tab_2 ul {position: absolute; top: 3em; left: -10.65em;}
	  #tab_3 ul {position: absolute; top: 3em; left: -21.35em;}
	  #tab_4 ul {position: absolute; top: 3em; left: -32.05em; width: 10.1em;}
	  #tab_4 a {display: none;}
	  #tab_1 a:focus + ul, #tab_2 a:focus + ul, #tab_3 a:focus + ul {z-index: 1;}
    </style>
  </head>
  <body>

  <h1>Here are the Results</h1>
    <div id="container">

      <div id="tab_1">
        <a href="#">Reading</a>
        <ul>
          <li>Angela</li>
          <li class="third">Barry <span>&#171;3rd</span></li>
          <li>Carl</li>
          <li>David</li>
          <li class="first">Edward <span>&#171;1st</span></li>
          <li>Frank</li>
          <li>Gabriel</li>
          <li>Hilary</li>
          <li>Jean</li>
          <li class="second">Karen <span>&#171;2nd</span></li>
        </ul>
      </div>
      
      <div id="tab_2">
        <a href="#">Writing</a>
        <ul>
          <li>Angela</li>
          <li>Barry</li>
          <li>Carl</li>
          <li class="second">David <span>&#171;2nd</span></li>
          <li>Edward</li>
          <li>Frank</li>
          <li class="first">Gabriel <span>&#171;1st</span></li>
          <li class="third">Hilary <span>&#171;3rd</span></li>
          <li>Jean</li>
          <li>Karen</li>
        </ul>
      </div>

      <div id="tab_3">
        <a href="#">Arithmetic</a>
        <ul>
          <li class="second">Angela <span>&#171;2nd</span></li>
          <li>Barry</li>
          <li class="first">Carl <span>&#171;1st</span></li>
          <li>David</li>
          <li>Edward</li>
          <li class="third">Frank <span>&#171;3rd</span></li>
          <li>Gabriel</li>
          <li>Hilary</li>
          <li>Jean</li>
          <li>Karen</li>
        </ul>
      </div>
      
      <div id="tab_4">
        <a>Register</a>
        <ul>
          <li>Angela</li>
          <li>Barry</li>
          <li>Carl</li>
          <li>David</li>
          <li>Edward</li>
          <li>Frank</li>
          <li>Gabriel</li>
          <li>Hilary</li>
          <li>Jean</li>
          <li>Karen</li>
        </ul>
      </div>

    </div>

</html>

Paul also showed me this example that he did a long time ago http://www.pmob.co.uk/temp/hideandshow3-css.htm

ro0bear

**PicnicTutorials** · Feb 25, 2009, 14:33

Nice ro0bear!

**YuriKolovsky** · Feb 26, 2009, 14:30

awww this quiz sounds awesome, but i won't be able to participate.

much too much work, 18 hours work a day with no coffee breaks the last 3 days, and 1 day was 19 hours... : (

i will try it when i finish, but by then the quiz will probably be finished...

**RyanReese** · Feb 26, 2009, 14:31

Your missing out I learned a lot in this quiz, such as the limits of browser suppport for certain types of selectors

.

**sumit1710** · Feb 27, 2009, 04:39

I'm learning css and i feel its a challenge
and would be tough for noob like me....

I must have good look at w3 css tutorials

**YuriKolovsky** · Feb 27, 2009, 05:00

i personally never found the w3 css tutorials useful, especially for pauls quizzes...

**RyanReese** · Feb 27, 2009, 07:40

I basically use w3schools as more of a reference then anything else...anyway answers are going to be posted today or tomorrow so I can't wait

. Paul's quizzes ideas are usually from layouts he has on his site.

**Paul O'B** · Feb 27, 2009, 15:06

Solution Time

As I said in post #1 the days fly by so fast and another quiz is over

I think the size and complexity of this quiz put a few people off but the basic concept wasn't really that hard but very labour intensive.

The quickest entry was Ryan but as it only works in Opera and used CSS3 then it isn't eleigible to win outright but was a good entry considering it was received quite quickly - so well done.

There were only three other entries which were from Centauri, RoObear and Tommy and of the three I would pick Tommy's entry as the winner but only because it scaled better than Centauri's. RoObear would be third as the display was not as clean as the others but worked fine.

In fact the above three all worked in IE7, FF3 and Opera9.5+ so well done to all and thanks for taking part. Tommy has also supplied a CSS3 version with much reduced CSS so I will post that at the end as it shows what can be done when CSS3 is well supported (works in Opera only).

The solution was basically using the adjacent selector to select each of the list items in turn but due to the number of adjacent items the selectors became very long.

The days were shifted to the correct starting position by using a different margin on the start day for each month that was hovered. As the days were floated the rest of the days moved into position automatically.

As the months are different lengths the last few days of each month had to be hidden according to what month it was. That's the reason that I left in the extra class so that days from the 28th of the month onwards could be targeted more easily (although it could have been done without this extra class anyway).

I also said the last-child pseudo class could be used if wanted but most ignored it in order to support IE7 as it wasn't that hard to do without it.

This is my original solution which has a few comments in it to make it easier to understand and I have left the css in a longer version than usual so that is is easier to understand what's going on.

The example works in IE7, Opera9.5+ and Firefox3 (didn't bother checking 2 but probably works there also.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
/* December */
li:hover + li + li ol li {
    margin-left:2.05em
}
li:hover + li + li ol li + li {
    margin-left:0
}
/* November */
li:hover + li + li + li ol li {
    margin-left:12.4em
}
li:hover + li + li + li ol li + li {
    margin-left:0
}
li:hover + li + li + li ol li.m29 + li + li {
    visibility:hidden
}
/* October */
li:hover + li + li + li + li ol li {
    margin-left:6.2em
}
li:hover + li + li + li + li ol li + li {
    margin-left:0
}
/* September */
li:hover + li + li + li + li + li ol li {
    margin-left:2.05em
}
li:hover + li + li + li + li + li ol li + li {
    margin-left:0
}
li:hover + li + li + li + li + li ol li.m29 + li + li {
    visibility:hidden
}
/* August */
li:hover + li + li + li + li + li + li ol li {
    margin-left:10.3em
}
li:hover + li + li + li + li + li + li ol li + li {
    margin-left:0
}
/* July */
li:hover + li + li + li + li + li + li + li ol li {
    margin-left:4.1em
}
li:hover + li + li + li + li + li + li + li ol li + li {
    margin-left:0
}
/* June */
li:hover + li + li + li + li + li + li + li + li ol li {
    margin-left:0
}
li:hover + li + li + li + li + li + li + li + li ol li + li {
    margin-left:0
}
li:hover + li + li + li + li + li + li + li + li ol li.m29 + li + li {
    visibility:hidden
}
/* May */
li:hover + li + li + li + li + li + li + li + li + li ol li {
    margin-left:8.25em
}
li:hover + li + li + li + li + li + li + li + li + li ol li + li {
    margin-left:0
}
/* April */
li:hover + li + li + li + li + li + li + li + li + li + li ol li {
    margin-left:4.1em
}
li:hover + li + li + li + li + li + li + li + li + li + li ol li + li {
    margin-left:0
}
li:hover + li + li + li + li + li + li + li + li + li + li ol li.m29 + li + li {
    visibility:hidden
}
/* March */
li:hover + li + li + li + li + li + li + li + li + li + li + li ol li {
    margin-left:12.4em
}
li:hover + li + li + li + li + li + li + li + li + li + li + li ol li + li {
    margin-left:0
}
/* February */
li:hover + li + li + li + li + li + li + li + li + li + li + li + li ol li {
    margin-left:12.4em
}
li:hover + li + li + li + li + li + li + li + li + li + li + li + li ol li + li {
    margin-left:0
}
li:hover + li + li + li + li + li + li + li + li + li + li + li + li ol li.m29 {
    visibility:hidden
}
li:hover + li + li + li + li + li + li + li + li + li + li + li + li ol li.m29 + li {
    visibility:hidden
}
li:hover + li + li + li + li + li + li + li + li + li + li + li + li ol li.m29 + li + li {
    visibility:hidden
}
/* january*/
li + li + li + li + li + li + li + li + li + li + li + li + li + li ol li {
    margin-left:6.2em
}
li + li + li + li + li + li + li + li + li + li + li + li + li + li ol li + li {
    margin-left:0
}
ol, ul {
    float:left;
    width:14.7em;
    list-style:none;
    clear:both;
    text-align:center;
}
ul {
    border-top:1px solid red;
    border-bottom:1px solid red
}
li {
    float:left;
    width:3.65em;
    cursor:pointer;
}
li a {
    display:block;
    border:1px solid #000;
    text-decoration:none;
    color:#000;
    padding:.2em 0;
}
li:hover a {
    background:orange
}
li li {
    padding:.2em 0;
    cursor:default;
    width:2em;
    border:1px solid #000;
    margin:1px -1px 1px 0;
}

ul,ol,li {background:red}
ol li ol {
    height:12em;
}
/* lets just add some nice styling now */
li a {
    background:green;
    color:#fff;
}
li + li a{background:yellow;color:#000;}
ol:hover  li a{background:yellow;color:#000;}
ol:hover  li a:hover{background:orange;color:#000;}
ul li{border-color:blue!important}
div {
    float:left;
    margin:10px;
    border:5px inset red;
    background:red;
    padding:2px;
}
/* chequerboard effect  form here on*/
li {
    background:#ffffcc;
}
li + li {
    background:#fff
}
li + li + li {
    background:#ffffcc
}
li + li + li + li {
    background:#fff
}
li + li + li + li + li {
    background:#ffffcc
}
li + li + li + li + li + li {
    background:#fff
}
li + li + li + li + li + li + li {
    background:#ffffcc
}
li + li + li + li + li + li + li + li {
    background:#fff
}
li + li + li + li + li + li + li + li + li {
    background:#ffffcc
}
li + li + li + li + li + li + li + li + li + li {
    background:#fff
}
li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc
}
li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff
}
li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc
}
li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff
}
li + li +li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc
}
li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff
}
li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc
}
li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff
}
li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc
}
li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff
}
li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc
}
li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff
}
li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc
}
li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff
}
li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc
}
li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff;
}
li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc;
}
li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff;
}
li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc;
}
li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff;
}
li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc;
}
li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff;
}
li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#ffffcc;
}
li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
    background:#fff;
}
li + li + li + li + li + li + li + li + li + li + li + li + li  {
        width:14.2em;
    background:red;
}
li + li + li + li + li + li + li + li + li + li + li + li + li ol li  {
        width:2em;
    background:#ffffcc;
}
</style>
</head>
<body>
<div>
    <ol>
        <li><a href="#">Jan</a></li>
        <li><a href="#">Feb</a></li>
        <li><a href="#">Mar</a></li>
        <li><a href="#">Apr</a></li>
        <li><a href="#">May</a></li>
        <li><a href="#">Jun</a></li>
        <li><a href="#">July</a></li>
        <li><a href="#">Aug</a></li>
        <li><a href="#">Sep</a></li>
        <li><a href="#">Oct</a></li>
        <li><a href="#">Nov</a></li>
        <li><a href="#">Dec</a></li>
        <li>
            <ul>
                <li>Mon</li>
                <li>Tue</li>
                <li>Wed</li>
                <li>Thu</li>
                <li>Fri</li>
                <li>Sat</li>
                <li>Sun</li>
            </ul>
        </li>
        <li>
            <ol>
                <li>01</li>
                <li>02</li>
                <li>03</li>
                <li>04</li>
                <li>05</li>
                <li>06</li>
                <li>07</li>
                <li>08</li>
                <li>09</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li class="m29">29</li>
                <li>30</li>
                <li>31</li>
            </ol>
        </li>
    </ol>
</div>
</body>
</html>

Well done to all and keep a look out for the next quiz which I will post over the weekend.

All the entries to follow in the next posts.

**Paul O'B** · Feb 27, 2009, 15:06

Tommy's 2 solutions:

IE7, Opera and FF3

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0}
body {margin:1em}
a {display:block; padding:0.25em 0; color:#000; text-decoration:none}
li {list-style-type:none}
div {width:14.7em; height:20em; border:6px inset #900; padding:2px; background-color:#f00}
div>ol>li {float:left; width:3.5em; border:0.05em solid #000; background-color:#ff0; text-align:center}
  div>ol>li:first-child {background-color:#090; color:#fff}
    div>ol>li:first-child a {color:#fff}
  div>ol:hover>li:first-child {background-color:#ff0; color:#000}
    div>ol:hover>li:first-child a {color:#000}
    div>ol>li a:hover {background-color:#f90; color:#000}
  div>ol>li:first-child+li+li+li+li+li+li+li+li+li+li+li+li {float:none; clear:left; width:100&#37;; border:0; padding-top:1px; background-color:transparent}
    ul li {float:left; width:2em; margin-right:-1px; border:0.05em solid #00f; padding:0.25em 0; background-color:#ffc}
      ul li:first-child+li,
      ul li:first-child+li+li+li,
      ul li:first-child+li+li+li+li+li {background-color:#fff}
  div>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li {float:none; clear:left; overflow:hidden; width:100%; border:0; padding-top:1px; background-color:transparent}
  ol ol li {float:left; width:2em; margin:1px -1px 0 0; border:0.05em solid #000; padding:0.25em 0; background-color:#ffc}
    ol ol li:first-child+li,
    ol ol li:first-child+li+li+li,
    ol ol li:first-child+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {background-color:#fff}
    ol ol li:first-child {margin-left:6.2em}
    li:hover+li+li+li+li+li+li+li+li ol li:first-child {margin-left:0}
    li:hover+li+li+li+li+li+li+li ol li:first-child,
    li:hover+li+li+li+li+li+li+li+li+li+li ol li:first-child {margin-left:4.1em}
    li:hover+li+li ol li:first-child,
    li:hover+li+li+li+li+li ol li:first-child {margin-left:2.05em}
    li:hover+li+li+li+li+li+li+li+li+li ol li:first-child {margin-left:8.3em}
    li:hover+li+li+li+li+li+li ol li:first-child {margin-left:10.3em}
    li:hover+li+li+li ol li:first-child,
    li:hover+li+li+li+li+li+li+li+li+li+li+li ol li:first-child,
    li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol li:first-child {margin-left:12.4em}
    li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol .m29,
    li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol .m29+li,
    li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol .m29+li+li,
    li:hover+li+li+li ol .m29+li+li,
    li:hover+li+li+li+li+li ol .m29+li+li,
    li:hover+li+li+li+li+li+li+li+li ol .m29+li+li,
    li:hover+li+li+li+li+li+li+li+li+li+li ol .m29+li+li {display:none}</style>
</head>
<body>
<div>
    <ol>
        <li><a href="#">Jan</a></li>
        <li><a href="#">Feb</a></li>
        <li><a href="#">Mar</a></li>
        <li><a href="#">Apr</a></li>
        <li><a href="#">May</a></li>
        <li><a href="#">Jun</a></li>
        <li><a href="#">July</a></li>
        <li><a href="#">Aug</a></li>
        <li><a href="#">Sep</a></li>
        <li><a href="#">Oct</a></li>
        <li><a href="#">Nov</a></li>
        <li><a href="#">Dec</a></li>
        <li>
            <ul>
                <li>Mon</li>
                <li>Tue</li>
                <li>Wed</li>
                <li>Thu</li>
                <li>Fri</li>
                <li>Sat</li>
                <li>Sun</li>
            </ul>
        </li>
        <li>
            <ol>
                <li>01</li>
                <li>02</li>
                <li>03</li>
                <li>04</li>
                <li>05</li>
                <li>06</li>
                <li>07</li>
                <li>08</li>
                <li>09</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li class="m29">29</li>
                <li>30</li>
                <li>31</li>
            </ol>
        </li>
    </ol>
</div>
</body>
</html>

CSS3 Opera only

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0}
body {margin:1em}
a {display:block; padding:0.25em 0; color:inherit; text-decoration:none}
li {list-style-type:none}
div {width:14.7em; height:20em; border:6px inset #900; padding:2px; background-color:#f00}
div>ol>li {float:left; width:3.5em; border:0.05em solid #000; background-color:#ff0; text-align:center}
  div>ol>li:first-child {background-color:#090; color:#fff}
  div>ol:hover>li:first-child {background-color:#ff0; color:#000}
    div>ol>li a:hover {background-color:#f90; color:#000}
  div>ol>li:nth-child(13) {float:none; clear:left; width:100%; border:0; padding-top:1px; background-color:transparent}
    ul li {float:left; width:2em; margin-right:-1px; border:0.05em solid #00f; padding:0.25em 0; background-color:#ffc}
      ul li:nth-child(even) {background-color:#fff}
  div>ol>li:nth-child(14) {float:none; clear:left; overflow:hidden; width:100%; border:0; padding-top:1px; background-color:transparent}
  ol ol li {float:left; width:2em; margin:1px -1px 0 0; border:0.05em solid #000; padding:0.25em 0; background-color:#ffc}
    ol ol li:nth-child(even) {background-color:#fff}
    ol ol li:first-child {margin-left:6.2em}
    li:nth-child(6):hover~li ol li:first-child {margin-left:0}
    li:nth-child(4):hover~li ol li:first-child, li:nth-child(7):hover~li ol li:first-child {margin-left:4.1em}
    li:nth-child(9):hover~li ol li:first-child, li:nth-child(12):hover~li ol li:first-child {margin-left:2.05em}
    li:nth-child(5):hover~li ol li:first-child {margin-left:8.3em}
    li:nth-child(8):hover~li ol li:first-child {margin-left:10.3em}
    li:nth-child(2):hover~li ol li:first-child, li:nth-child(3):hover~li ol li:first-child, li:nth-child(11):hover~li ol li:first-child {margin-left:12.4em}
    li:nth-child(2):hover~li ol li:nth-last-child(-n+3),
    li:nth-child(4):hover~li ol li:last-child,
    li:nth-child(6):hover~li ol li:last-child,
    li:nth-child(9):hover~li ol li:last-child,
    li:nth-child(11):hover~li ol li:last-child {display:none}
        </style>
</head>
<body>
<div>
    <ol>
        <li><a href="#">Jan</a></li>
        <li><a href="#">Feb</a></li>
        <li><a href="#">Mar</a></li>
        <li><a href="#">Apr</a></li>
        <li><a href="#">May</a></li>
        <li><a href="#">Jun</a></li>
        <li><a href="#">July</a></li>
        <li><a href="#">Aug</a></li>
        <li><a href="#">Sep</a></li>
        <li><a href="#">Oct</a></li>
        <li><a href="#">Nov</a></li>
        <li><a href="#">Dec</a></li>
        <li>
            <ul>
                <li>Mon</li>
                <li>Tue</li>
                <li>Wed</li>
                <li>Thu</li>
                <li>Fri</li>
                <li>Sat</li>
                <li>Sun</li>
            </ul>
        </li>
        <li>
            <ol>
                <li>01</li>
                <li>02</li>
                <li>03</li>
                <li>04</li>
                <li>05</li>
                <li>06</li>
                <li>07</li>
                <li>08</li>
                <li>09</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li class="m29">29</li>
                <li>30</li>
                <li>31</li>
            </ol>
        </li>
    </ol>
</div>
</body>
</html>

Centauri:
IE7, OPera and FF3:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    font-size: 16px;
}
div {
    background-color: #FF0000;
    padding: 1px;
    border: 5px solid;
    border-color: #A90000 #FF8E8E #FF8E8E #A90000;
    margin: 10px auto;
    width: 246px;
    overflow: hidden;
}
ul, ol {
    float: left;
    padding-left: 1px;
    width: 245px;
    overflow: hidden;
}
li ol, li ul {
    margin-left: -1px;
}
li ol {
    margin-top: 1px;
}
li {
    height: 24px;
    line-height: 24px;
    list-style: none;
    float: left;
    border: 1px solid black;
}
a {
    float: left;
    height: 24px;
    width: 59px;
    background-color: #FFFF00;
    color: #000000;
    text-decoration: none;
    text-align: center;
}
li:first-child a {
    background-color: #008000;
    color: #FFFFFF;
}
ol:hover li:first-child a {
    background-color: #FFFF00;
    color: #000000;
}
ol:hover li a:hover {
    background-color: #FFA500;
}
li li {
    width: 34px;
    text-align: center;
    background-color: #FFFFCC;
    margin: 1px 0 0 -1px;
}
li:first-child+li,li:first-child+li+li+li, li:first-child+li+li+li+li+li,
li:first-child+li+li+li+li+li+li+li, li:first-child+li+li+li+li+li+li+li+li+li,
li:first-child+li+li+li+li+li+li+li+li+li+li+li, li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li,
li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFFF;
}
li ul li {
    border-color: #0000FF;
}
div>ol>li+li+li+li+li+li+li+li+li+li+li+li+li {
    height: auto;
    background-color: #FF0000 !important;
    border: 0;
    width: 245px;
}
li ol li:first-child {
    margin-left: 104px;
}
li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol li:first-child,
li:hover+li+li+li+li+li+li+li+li+li+li+li ol li:first-child,
li:hover+li+li+li ol li:first-child {
    margin-left: 209px;
}
li:hover+li+li+li+li+li+li ol li:first-child {
    margin-left: 174px;
}
li:hover+li+li+li+li+li+li+li+li+li ol li:first-child {
    margin-left: 139px;
}
li:hover+li+li+li+li+li+li+li+li+li+li ol li:first-child,
li:hover+li+li+li+li+li+li+li ol li:first-child {
    margin-left: 69px;
}
li:hover+li+li+li+li+li ol li:first-child,
li:hover+li+li ol li:first-child {
    margin-left: 34px;
}
li:hover+li+li+li+li+li+li+li+li ol li:first-child {
    margin-left: -1px;
}
li:hover+li+li+li ol li.m29+li+li,
li:hover+li+li+li+li+li ol li.m29+li+li,
li:hover+li+li+li+li+li+li+li+li ol li.m29+li+li,
li:hover+li+li+li+li+li+li+li+li+li+li ol li.m29+li+li {
    display: none;
}
li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29,
li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29+li,
li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29+li+li {
    display: none;
}
li:hover ol {
}
</style>
</head>
<body>
<div>
    <ol>
        <li><a href="#">Jan</a></li>
        <li><a href="#">Feb</a></li>
        <li><a href="#">Mar</a></li>
        <li><a href="#">Apr</a></li>
        <li><a href="#">May</a></li>
        <li><a href="#">Jun</a></li>
        <li><a href="#">July</a></li>
        <li><a href="#">Aug</a></li>
        <li><a href="#">Sep</a></li>
        <li><a href="#">Oct</a></li>
        <li><a href="#">Nov</a></li>
        <li><a href="#">Dec</a></li>
        <li>
            <ul>
                <li>Mon</li>
                <li>Tue</li>
                <li>Wed</li>
                <li>Thu</li>
                <li>Fri</li>
                <li>Sat</li>
                <li>Sun</li>
            </ul>
        </li>
        <li>
            <ol>
                <li>01</li>
                <li>02</li>
                <li>03</li>
                <li>04</li>
                <li>05</li>
                <li>06</li>
                <li>07</li>
                <li>08</li>
                <li>09</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li class="m29">29</li>
                <li>30</li>
                <li>31</li>
            </ol>
        </li>
    </ol>
</div>
</body>
</html>

**Paul O'B** · Feb 27, 2009, 15:06

RoObear:
IE7, Opera and FF3:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
    padding: 0;
    margin: 0;
    text-align: center;
}
div {
    width: 22.9em;
    border: outset 5px red;
    background-color: red;
    height: 29em;
    margin: 3em;
    padding: 1em;
}
ol, ul {
    padding: 0;
    margin: 0;
}
li {
    float: left;
    margin: 0.1em 0 0.1em 0;
}
li, a, ul, ol {
    display: block;
}
ol li a {
    width: 5em;
    background-color: yellow;
    border: 0.05em solid black;
    text-align: center;
}
ol li ol li {
    width: 3em;
    padding: 0.5em 0 0.5em 0;
    background-color: white;
    border: solid black 0.1em;
}
ol li ul li {
    width: 3em;
    padding: 0.5em 0 0.5em 0;
    background-color: white;
    border: solid blue 0.1em;
}
ol>li+li+li+li+li+li+li+li+li+li+li+li+li {
    width: 22.9em;
}
ol>li>ol>li {
    width: 3em !important;
}
a {
    background-color: yellow;
    text-decoration: none;
    color: black;
    padding: 0.5em 0 0.5em 0;
}            /* background color for months */
ol>li:first-child a:hover {
    background-color: green;
    color: white;
}                                     /* hover background color for Jan */
a:hover {
    background-color: orange;
}                                                                     /* hover background color for months */
ol>li:first-child:hover+li+li+li+li+li+li+li+li+li+li+li+li+li>ol>li:first-child {
    margin-left: 9.3em;
}  /* Jan */
ol>li+li:hover+li+li+li+li+li+li+li+li+li+li+li+li>ol>li:first-child {
    margin-left: 18.6em;
}             /* Feb */
ol>li+li:hover+li+li+li+li+li+li+li+li+li+li+li+li .m29 {
    display: none;
}                                /* Feb 29th */
ol>li+li:hover+li+li+li+li+li+li+li+li+li+li+li+li .m29+li {
    display: none;
}                             /* Feb 30th */
ol>li+li:hover+li+li+li+li+li+li+li+li+li+li+li+li .m29+li+li {
    display: none;
}                          /* Feb 31st */
ol>li+li+li:hover+li+li+li+li+li+li+li+li+li+li+li>ol>li:first-child {
    margin-left: 9.3em;
}              /* Mar */
ol>li+li+li+li:hover+li+li+li+li+li+li+li+li+li+li>ol>li:first-child {
    margin-left: 6.2em;
}              /* Apr */
ol>li+li+li+li:hover+li+li+li+li+li+li+li+li+li+li .m29+li+li {
    display: none;
}                          /* Apr 31st */
ol>li+li+li+li+li:hover+li+li+li+li+li+li+li+li+li>ol>li:first-child {
    margin-left: 12.4em;
}             /* May */
ol>li+li+li+li+li+li:hover+li+li+li+li+li+li+li+li>ol>li:first-child {
    margin-left: 0;
}                  /* Jun */
ol>li+li+li+li+li+li:hover+li+li+li+li+li+li+li+li .m29+li+li {
    display: none;
}                          /* Jun 31st */
ol>li+li+li+li+li+li+li:hover+li+li+li+li+li+li+li>ol>li:first-child {
    margin-left: 6.2em;
}              /* Jul */
ol>li+li+li+li+li+li+li+li:hover+li+li+li+li+li+li>ol>li:first-child {
    margin-left: 15.5em;
}             /* Aug */
ol>li+li+li+li+li+li+li+li+li:hover+li+li+li+li+li>ol>li:first-child {
    margin-left: 3.1em;
}              /* Sept */
ol>li+li+li+li+li+li+li+li+li:hover+li+li+li+li+li .m29+li+li {
    display: none;
}                          /* Sept 31st */
ol>li+li+li+li+li+li+li+li+li+li:hover+li+li+li+li>ol>li:first-child {
    margin-left: 9.3em;
}              /* Oct */
ol>li+li+li+li+li+li+li+li+li+li+li:hover+li+li+li>ol>li:first-child {
    margin-left: 18.7em;
}             /* Nov */
ol>li+li+li+li+li+li+li+li+li+li+li:hover+li+li+li .m29+li+li {
    display: none;
}                          /* Nov 31st */
ol>li+li+li+li+li+li+li+li+li+li+li+li:hover+li+li>ol>li:first-child {
    margin-left: 3.1em;
}              /* Dec */
/* Alteraltive Background Color */

ol>li>ul>li:first-child {
    background-color: #FFFFCC;
}
ol>li>ul>li+li {
    background-color: white;
}
ol>li>ul>li+li+li {
    background-color: #FFFFCC;
}
ol>li>ul>li+li+li+li {
    background-color: white;
}
ol>li>ul>li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ul>li+li+li+li+li+li {
    background-color: white;
}
ol>li>ul>li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li:first-child {
    background-color: #FFFFCC;
}
ol>li>ol>li+li {
    background-color: white;
}
ol>li>ol>li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: white;
}
ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
    background-color: #FFFFCC;
}
</style>
</head>
<body>
<div>
    <ol>
        <li><a href="#">Jan</a></li>
        <li><a href="#">Feb</a></li>
        <li><a href="#">Mar</a></li>
        <li><a href="#">Apr</a></li>
        <li><a href="#">May</a></li>
        <li><a href="#">Jun</a></li>
        <li><a href="#">July</a></li>
        <li><a href="#">Aug</a></li>
        <li><a href="#">Sep</a></li>
        <li><a href="#">Oct</a></li>
        <li><a href="#">Nov</a></li>
        <li><a href="#">Dec</a></li>
        <li>
            <ul>
                <li>Mon</li>
                <li>Tue</li>
                <li>Wed</li>
                <li>Thu</li>
                <li>Fri</li>
                <li>Sat</li>
                <li>Sun</li>
            </ul>
        </li>
        <li>
            <ol>
                <li>01</li>
                <li>02</li>
                <li>03</li>
                <li>04</li>
                <li>05</li>
                <li>06</li>
                <li>07</li>
                <li>08</li>
                <li>09</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li class="m29">29</li>
                <li>30</li>
                <li>31</li>
            </ol>
        </li>
    </ol>
</div>
</body>
</html>

Ryan:
Opera only and some CSS3

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
*{margin:0;padding:0;}
a
{
    color:black;
    text-decoration:none;
}
div
{
    background:white;
    overflow:hidden;
    width:399px;
}
ol
{
    width:388px;
    height:500px;
    overflow:hidden;
    background:red;
    border-left:5px solid red;
    border-right:5px solid red;
    border-top:5px solid pink;
}
ol,li,ul
{
    list-style-type:none;
}
div>ol>li
{
    width:93px;
}
ol li
{
    float:left;
    background:yellow;
    color:black;
    text-align:center;
    line-height:40px;
    height:40px;
    border:2px solid black;
    list-style-type:none;
}
ol li ul
{
    width:400px;
    position:relative;
    z-index:1;
    border:none;
    padding:0;
}
ol li ul li
{
    background:white;
    border:1px solid blue;
    width:54px;
    position:relative;
    z-index:3;
    padding:0;
}
ol li ol
{
    border:none;
    position:relative;
    top:42px;
    left:-94px;
}
ol li ol li
{
    background:white;
    display:inline;
    padding:0;
    width:51px;
    float:left;
}
ol li:last-child ol li:first-child
{
    margin-left:164px;
}
div>ol>li:nth-child(1)
{
    background:green;
    color:white;
}
div>ol>li:nth-child(2):hover
{
    background:orange;
}
div>ol>li:nth-child(3):hover
{
    background:orange;
}
div>ol>li:nth-child(4):hover
{
    background:orange;
}
div>ol>li:nth-child(5):hover
{
    background:orange;
}
div>ol>li:nth-child(6):hover
{
    background:orange;
}
div>ol>li:nth-child(7):hover
{
    background:orange;
}
div>ol>li:nth-child(8):hover
{
    background:orange;
}
div>ol>li:nth-child(9):hover
{
    background:orange;
}
div>ol>li:nth-child(10):hover
{
    background:orange;
}
div>ol>li:nth-child(11):hover
{
    background:orange;
}
div>ol>li:nth-child(12):hover
{
    background:orange;
}
div>ol>li:hover:nth-child(2)+li+li+li+li+li+li+li+li+li+li+li+li ol li:first-child
{
    margin-left:330px;
}
div>ol>li:hover:nth-child(3)+li+li+li+li+li+li+li+li+li+li+li ol li:first-child
{
    margin-left:330px;
}
div>ol>li:hover:nth-child(4)+li+li+li+li+li+li+li+li+li+li ol li:first-child
{
    margin-left:110px;
}
div>ol>li:hover:nth-child(5)+li+li+li+li+li+li+li+li+li ol li:first-child
{
    margin-left:219px;
}
div>ol>li:hover:nth-child(6)+li+li+li+li+li+li+li+li ol li:first-child
{
    margin-left:0px;
}
div>ol>li:hover:nth-child(7)+li+li+li+li+li+li+li ol li:first-child
{
    margin-left:110px;
}
div>ol>li:hover:nth-child(8)+li+li+li+li+li+li ol li:first-child
{
    margin-left:276px;
}
div>ol>li:hover:nth-child(9)+li+li+li+li+li ol li:first-child
{
    margin-left:53px;
}
div>ol>li:hover:nth-child(11)+li+li+li ol li:first-child
{
    margin-left:330px;
}
div>ol>li:hover:nth-child(12)+li+li ol li:first-child
{
    margin-left:50px;
}
div>ol>li>ol li:nth-child(odd), div>ol>li>ul li:nth-child(even)
{
    background:pink;
}
div>ol>li:hover:nth-child(9)+li+li+li+li+li ol li.m29+li+li, div>ol>li:hover:nth-child(6)+li+li+li+li+li+li+li+li ol li.m29+li+li, div>ol>li:hover:nth-child(4)+li+li+li+li+li+li+li+li+li+li ol li.m29+li+li, div>ol>li:hover:nth-child(2)+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29, div>ol>li:hover:nth-child(2)+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29+li, div>ol>li:hover:nth-child(2)+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29+li+li
{
    visibility:hidden;
}

</style>
</head>
<body>
<div>
    <ol>
        <li><a href="#">Jan</a></li>
        <li><a href="#">Feb</a></li>
        <li><a href="#">Mar</a></li>
        <li><a href="#">Apr</a></li>
        <li><a href="#">May</a></li>
        <li><a href="#">Jun</a></li>
        <li><a href="#">July</a></li>
        <li><a href="#">Aug</a></li>
        <li><a href="#">Sep</a></li>
        <li><a href="#">Oct</a></li>
        <li><a href="#">Nov</a></li>
        <li><a href="#">Dec</a></li>
        <li>
            <ul>
                <li>Mon</li>
                <li>Tue</li>
                <li>Wed</li>
                <li>Thu</li>
                <li>Fri</li>
                <li>Sat</li>
                <li>Sun</li>
            </ul>
        </li>
        <li>
            <ol>
                <li>01</li>
                <li>02</li>
                <li>03</li>
                <li>04</li>
                <li>05</li>
                <li>06</li>
                <li>07</li>
                <li>08</li>
                <li>09</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li class="m29">29</li>
                <li>30</li>
                <li>31</li>
            </ol>
        </li>
    </ol>
</div>
</body>
</html>

Well done to all - I'm using my calendar as we speak

**chopsticks** · Feb 27, 2009, 18:01

I would of never thought to attempt it like that (your original solution), but as far as that goes, I didn't even get very far anyway. Shows my lack of understanding of CSS still.

Very cool though to see how it was done.

**RyanReese** · Feb 27, 2009, 21:55

I thought I'd be a bit creative with my CSS3 as it would merely have taken a bit more code to produce the results using CSS2. I'm just lazy: I admit

. When's the next quiz?

**Paul O'B** · Feb 28, 2009, 12:02

NEW Quiz Posted

**RyanReese** · Feb 28, 2009, 13:40

And what a great quiz it is indeed

.

The SitePoint Forums have moved.

User Tag List

Thread: CSS - Test Your CSS Skills Number 15 :

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions