When rolling over a number of flyouts quickly, the user sees all the flyouts shown on the screen at once which looks rubbish.  To remove the delay altogether use this css in your page somewhere:

li.hover-off>ul
{
    display:none;
}

The way it works is when you hover over an item in the nav the built in sharepoint javascript adds a css class called “hover” and as soon as your mouse leaves the area it changes the class to “hover-off” for 1 second before removing it completely. This CSS will hide the unordered list directly below the list item that has the class “hover-off” thus hiding the flyout as soon as your mouse leaves the parent.

(P.s. this kind of flyout navigation can be set up by setting the ‘MaximumDynamicDisplayLevels’ attribute of the SharePoint:AspMenu control)

A practical use of this technique is to imagine a high score table with lots of rows each detailing a person’s high score.  You want to highlight the top three to indicate that these people are the ones to be commended and enlarge the top scorer to emphasise their achievement.  You would use this css:

table#highscores tr td {
    background-color: #666; /* default values */
    height: 20px;
}

table#highscores tr:first-child td {
    height: 40px; /* increase the row height of the top scorer */
}

table#highscores tr:nth-child(-n+3) td {
    background-color: #889; /* emphasise the top three */
}

Unforunately and unsurprisingly, this doesn't work in the most popular* browser in the world, Internet Explorer 8 and below.  For those, you'll have to use jQuery and its implementation of nth-child.  Like what was mentioned in the article on css-tricks though, this technique shouldn't really be used for fundamental website design where the layout or usability would be effected by it not being implemented.  Allowing the website to degrade gracefully for browsers with no implementation is key.

* By most popular, I really mean most widely-used.  I doubt that a large proportion of the internet population are using IE8 because they actually prefer IE8 to other browsers or they wouldn't switch if they had the opportunity, such as business users whose systems are locked down

The background colour I’m using is #EFF8F8

Here I have a pseudo-button and actually it’s just a text link within a <p>. Here’s the HTML and css:

<p class="actionbutton"><a href="/BuyingAndSelling/BuyHoliday">Buy Holiday</a></p>

p.actionbutton
{
margin:0 auto 1em auto; /*center the button on the page*/
text-align:center;
width:124px;
height:44px;
}

p.actionbutton a
{
line-height:44px; /* same height as actionbutton element */
font-size:1.2em;
display:block; /* makes the whole area clickable rather than just the text */
text-decoration:none;
color:Black;
background-image: url('smartbutton.gif');
}

/*rollover*/
p.actionbutton a:hover
{
color:DarkOrange;
background-image: url('smartbutton-down.gif');
}

Here are the source images for you to play around with

Normal button state

On mouse rollover

A pie chart of increasing values 0-100% could be stored as 20 separate independent images, named pie-[00-100].gif.  This however is inefficient for both the browser, the server, and the user.  The user will have to wait for the image to download if they haven’t already seen it (and hence cached it).  In my example I have 20 pie charts of increasing values in one image.  The background-position css property will dynamically change via server-side code to show only one of the 20 available pie charts.

Here’s the finished article:

Here’s how it was done…

my models.py:

class Question(models.Model):
[........]
def offset(self, total, votes, full_length, slice_length):
    desired_length = (full_length - slice_length) * (votes/total)
    offset_pixels, remainder = divmod(desired_length,slice_length)
    offset_pixels *= slice_length
    if (remainder > slice_length / 2.0):
        offset_pixels += slice_length
    return str(offset_pixels) + 'px'

def yes_pie_offset(self, full_length, slice_length):
    if self.num_votes > 0:
        return self.offset(self.num_votes, self.num_yes, full_length, slice_length)
    else:
        return "0px"

def no_pie_offset(self, full_length, slice_length):
    if self.num_votes > 0:
        return self.offset(self.num_votes, self.num_no, full_length, slice_length)
    else:
        return "0px"

my views.py

yes_pie = question.yes_pie_offset(630,30)
no_pie = question.no_pie_offset(630,30)

template where it’s in use:

<div class="pie greenpie" style="background-position:-{{yes_pie}} 0"></div>

Basically, the view gives the model’s methods two arguments, the entire length of the sprite, and how long each image is.  The methods will use two of their own values to come up with how much to fill the pie chart.  It will return a positive integer that is a multiple of the individual image length.  Remember to use a negative sign before the template tag if your sprite goes from low to high (as my example below)

I got this image from here but had to add my own 0% pie chart to the very left

(sorry if you didn’t understand this, I’m very tired now and can’t explain myself very well)