CSS

@supports API

Anjanesh Lekshminarayanan — Fri, 23 Jan 2026 07:55:07 GMT

In order to check if some CSS property is supported in a browser or not we can make use of the @supports API which itself is supported by all browsers except IE and Opera Mini (https://caniuse.com/css-supports-api) - so we’re good here.

So let take one good example of a CSS feature that many front-end developers have been waiting for.

It looks like grid-template-rows: masonry; may come to browsers this year. The latest Safari Technical Preview seems to have support for this though I couldn’t get it to work on my Safari Tech Preview on my macOS Sequoia 15.7.3 - not sure if masonry support is only for Tahoe’s version of Safari Tech Preview.

To check if your browser supports grid-template-rows: masonry we can use it in CSS like this :

@supports (grid-template-rows: masonry)
{

}

We can place any CSS within the block and the good part is we can also apply CSS to browsers that don’t support grid-template-rows: masonry - by using the not keyword.

@supports not (grid-template-rows: masonry)
{

}

You can get Firefox to support grid-template-rows: masonry by enabling layout.css.grid-template-masonry-value.enabled to true in about:config.

Here’s the sample CSS code :

.container
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    grid-template-rows: masonry;
}

.container > div
{      
    padding: 1em;
    background-color: #f0f0f0;
}

@supports (grid-template-rows: masonry)
{
    .container > div
    {
        border: 2px solid red;
    }
}

@supports not (grid-template-rows: masonry)
{
    .container > div
    {
        border: 2px solid green;
    }  
}

And here’s the corresponding HTML:

<div class="container">
    <div>Item 1div>
    <div>Item 2.1<br/>Item 2.2div>
    <div>Item 3.1<br/>Item 3.2<br/>Item 3.3div>
    <div>Item 4div>
div>

This will show like this for no masonry support :

And like this for browsers that do support masonry :

Notice the difference - for one: the colours are different - and most importantly, the layout is as per the height of the content of each item cell and not uniform.

Demo : https://anjanesh.s3.us-east-1.amazonaws.com/demo/supports.html

Reference : https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Masonry_layout

Using the :has selector to display full with of a container

Anjanesh Lekshminarayanan — Sun, 26 Feb 2023 17:03:28 GMT

Finally, today I had a use-case for the :has selector which was first supported by Safari as reported by Jen Simmons.

I have this in my base.html :

<div id="main" class="grow mx-auto px-4">
    {% block content %}{% endblock %}
div>

which has the container to the block content as mx-auto which translates to margin-left: auto; margin-right: auto; for all pages including the events page.

And this in events.html

{% extends 'base.html' %}
{% load static %}

{% block content %}

    <div id="events-page" class="p-7 mt-5 w-full">
        <div>            
            <h2 class="text-4xl pb-4 mb-4 border-b border-gray-200">Eventsh2>
            <div>
                <div class="px-4- sm:px-6- lg:px-8-">
                    <div class="sm:flex sm:items-center">
                        <div class="sm:flex-auto">
                            <h1 class="text-xl font-semibold text-gray-900">Eventsh1>
                            <p class="mt-2 text-sm text-gray-700">Event Calendarp>
                        div>
                    div>
                    <div class="-mx-4 overflow-hidden shadow ring-1 ring-black ring-opacity-5 p-5 sm:-mx-6 md:mx-0 md:rounded-lg w-full">
                        <iframe src="https://calendar.google.com/calendar/embed?src=newsletter%40allcareerguru.com&ctz=Asia%2FKolkata" style="border: 0" width="100%" height="800" frameborder="0" scrolling="no">iframe>
                    div>
                div>
            div>
        div>
    div>    

{% endblock %}

Thing is, with the iframe not being 100% of the page is not exactly aesthetically pleasing. The iframe needs to be 100% of the container, and the container is not the full-width of the page.

So, I want the main DIV not to be margin-left: auto; margin-right: auto; and instead be margin-left: 0; margin-right: 0;

So after {% block content %} all I added was :

<style type="text/css">
#main:has(#events-page)
{
    margin-left:0;
    margin-right:0;
}
style>

Now this makes only the event page's container (#main) to not have margin-left: 0; margin-right: 0; which overrides mx-auto

FireFox is yet to support :has (https://caniuse.com/css-has) ! The browser I work on exclusively!

first-of-type

Anjanesh Lekshminarayanan — Fri, 25 Nov 2022 08:40:25 GMT

Let's say we wanted to target DOM Elements of a particular type inside a parent DOM container say a section.

class="plan">

    <div>
        Inner Content not in an inner enclosed DIV or DOM Element.
        <div>Inner Content 1 in 1st plan DIVdiv>
        <div>Inner Content 2 in 1st plan DIVdiv>
    div>

    <div>Content 2 in Reddiv>
    <div>Content 3 in Reddiv>
    <div>Content 4 in Reddiv>
    <div>Content 5 in Reddiv>



<div>Content 1 in Greendiv>
<div>Content 2 in Greendiv>

If we do section.plan div it'll target all DIVs inside section.plan. So a section.plan div { color: blue; } will make text content in all DIVs in color blue.

But if we do section.plan > div it'll target all only DIVs that are direct decendants of section.plan - all first level DIVs under section.plan. So section.plan > div { border: 1px solid red; } will not have red borders for the DIVs with Inner Content 1/2 in 1st plan DIV.

But what about section.plan > div:first-child ? This would select the DIV that's the first child of the parent section.plan. Here's the catch - if the first child of section.plan is a P like

First child is not a DIV

then section.plan > div:first-child will fail to do anything - since the first child of section.plan is not a DIV but a P tag. section.plan > div:first-child does not mean select the first DIV that's the child of section.plan - it means that if the first child is a DIV then apply the CSS. To catch the first DIV that's a child of section.plan we use section.plan > div:first-of-type

HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>fist-of-typetitle>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
section.plan div
{
    color: blue;
}
section.plan > div
{
    border: 1px solid red;
    margin: 10px 0;
}

/* Not used any where since first child of section class="plan" isn't a DIV but a P */
section.plan > div:first-child
{
    background-color: yellow;
}

section.plan > div:last-child
{
    background-color: lightcyan;
}
section.plan > div:first-of-type
{
    border:1px dashed black;
}
section.plan ~ div
{
    border: 1px solid green;
    margin: 10px 0;
}
style>
head>
<body>

<div class="container">

<section class="plan">

    <p>First child is not a DIVp>

    <div>
        Inner Content not in an inner enclosed DIV or DOM Element.
        <div>Inner Content 1 in 1st plan DIVdiv>
        <div>Inner Content 2 in 1st plan DIVdiv>
    div>

    <div>Content 2 in Reddiv>
    <div>Content 3 in Reddiv>
    <div>Content 4 in Reddiv>
    <div>Content 5 in Reddiv>

section>

<div>Content 1 in Greendiv>
<div>Content 2 in Greendiv>

div>

body>
html>

first-of-type is supported on all recent browsers, old and new ones.

Demo : https://s3.amazonaws.com/s3.css.co.in/demo/first-of-type.html

Text Input Validation & Error without JavaScript

Anjanesh Lekshminarayanan — Mon, 11 Jul 2022 18:40:18 GMT

Vanilla CSS:

input.nameValidation + label::after
{
    content:  "Only alphabets and quotes allowed";
    color: orange;
}
input.nameValidation:focus:required:invalid:not(:placeholder-shown)
{
    border: 1px solid red;
    animation: shake 300ms;
}

/* animation inspired by https://www.instagram.com/tv/CfvWUG3jgY */
@keyframes shake
{
    25% { transform: translateX(4px); }
    50% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
input.nameValidation:invalid:not(:placeholder-shown) + label
{
    display: inline-block;    
}
input.nameValidation:invalid:not(:placeholder-shown) + label::after
{
    content: "Invalid Entry for a Full Name";
    color: red;
}

HTML :

<form>
    <div>
        <input type="text" class="nameValidation" required pattern="[a-zA-Z "']*" placeholder="Enter your Full Name" />
        <label></label>
    </div>
    <button type="submit">Submit</button>
</form>

There's a pseudo CSS property called :placeholder-shown which can be used in CSS to fill in styles if the placeholder still there in the text input. If the placeholder still exists then it means that the value is empty.

not(:placeholder-shown) states that the placeholder is not shown in the text input and a result means that it's not empty. The user has entered atleast one character in the text input.

input:invalid gets invoked when the input text is invalid when on the pattern attribute fails to return the input validation as true.

So put together, input.nameValidation:invalid:not(:placeholder-shown) + label::after will show the label content with the style which is just after input text field when the input pattern triggers the user input as a invalid .

Using Bootstrap 5 for some nice looking default styles :

.form-control:focus
{
    box-shadow: none;
}
input.nameValidation:focus
{
    outline:none;
}
input.nameValidation + label::after
{
    content:  "Only alphabets and quotes allowed";
    color: orange;
}
input.nameValidation:focus:required:invalid:not(:placeholder-shown)
{
    border: 1px solid red;
    animation: shake 300ms;
}

/* animation inspired by https://www.instagram.com/tv/CfvWUG3jgY */
@keyframes shake
{
    25% { transform: translateX(4px); }
    50% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
}
input.nameValidation:invalid:not(:placeholder-shown) + label
{
    display: inline-block;
    color: red;
}
input.nameValidation:invalid:not(:placeholder-shown) + label::after
{
    content: "Invalid Entry for a Full Name";
    color: red;
}

HTML :

<form>
    <div>
        <input type="text" class="form-control nameValidation" required pattern="[a-zA-Z "']*" placeholder="Enter your Full Name" />
        <label class="mt-1"></label>
    </div>
    <button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>

Demos :
Vanilla CSS - https://anjanesh.s3.amazonaws.com/demo/input-validation.html
Bootstrap - https://anjanesh.s3.amazonaws.com/demo/input-validation-bs5.html

Mega Menu using CSS only

Anjanesh Lekshminarayanan — Sat, 09 Jan 2021 12:51:47 GMT

Demo : http://s3.css.co.in/demo/mega-menu.html

Code : https://gist.github.com/anjanesh/876b781b69fff9598fd73ffeda4b9318

Sorry for no explanation here.

#top-menu-1 > div > a + div:hover has to be displayed as block too.

For people who know CSS, I think most people just want to copy-paste code and edit for customization. And people who don’t know CSS will just edit the content.

Using ::marker to display content before content

Anjanesh Lekshminarayanan — Sun, 01 Nov 2020 06:39:48 GMT

Ever wanted a piece of content before the content ?

Well …. there is ::before which is what it is used for.

But there is another selector called ::marker which is used for displaying content before a list item.

It is possible to display a non-list item as an item via display: list-item; to a div or p, so you don’t necessarily have to create a list like ul or ol.

According to Mozilla, Only certain CSS properties can be used in a rule with ::marker as a selector and one of them is content which can be used to insert custom content.

What is not possible is, to absolute position the content in the marker as it’s not supported till now. So for now, we have to do with the left alignment with the text.

Marker

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, reprehenderit. Tenetur delectus repellendus eligendi fugit neque nulla adipisci tempora quam, error tempore repellat quibusdam esse officiis consequuntur vel nobis optio?

Using the data URI scheme to reduce an HTTP request

Anjanesh Lekshminarayanan — Sat, 01 Jan 2011 04:08:50 GMT

Ever wanted to include a 1px wide/high background image that repeats (one way), to your existing sprite image just to reduce that one HTTP request, even though it may not have that great an impact on speed ?

Since the image repeats itself (repeat-x or repeat-y, not both-ways), embedding it to a sprite is only useful if image’s width/height spans across the sprite image.
Using the data URI scheme, its possible to embed an image into a background-image property directly. This is supported by almost all browsers except IE7 and below. (Use this to convert an image to base64 format)

This is normally not a good solution because the base64 encoded string of the image is more (1/3 more) in bytes than the image file itself. But for small images that, say, act as a backrgound image for a navigation container, its a good trade-off for that additional HTTP request.
And for IE6 & IE7, use the image itself.

style.css

.nav
{
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAiCAYAAACeLbMRAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMHw4JJ8ytHAkAAAAhSURBVAjXY2DABYyMjP4zMTAwMFCJ+Pr1K4k6GBkZkbgApdoEsBPcDsAAAAAASUVORK5CYII%3D');
}

HTML page

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie67.css" />
<![endif]-->

ie67.css

.nav
{
    background-image:url(images/nav-bg.png);
}

FireFox Specific CSS

Anjanesh Lekshminarayanan — Sat, 04 Dec 2010 08:08:17 GMT

Though the chances of wanting this is pretty slim, but if you want to target a set of CSS attributes just for FireFox instead of using JavaScript to alter the styles, its possible.
Though most -moz- properties get deprecated & later removed, when the official CSS3 one is implemented, the @-moz-document is Mozilla/Gecko-only specific which is used to contain different styles rules based on filtering document URLs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>FireFox Specific CSS</title>
<style type="text/css">
h1
{
    color:red;
}
h2
{
    color:green;
}
@-moz-document url-prefix()
{
    h1
    {
        color:blue;
    }
    h2
    {
        color:black;
    }
}
</style>
</head>
<body>
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>

Example : Mozilla Extensions

Adjusting styles based on a language

Anjanesh Lekshminarayanan — Fri, 26 Nov 2010 16:40:14 GMT

Traditionally, language HTML files would be stored separately and load language specific CSS files.
But now we just store the language strings separately and programmatically print the language strings within the same HTML file.
Very often I find myself adjusting the style attributes a little here and there for different languages just so that it fits nicely inside a container or a navigation bar and looks the same across all languages.
Its actually easy to set style attributes based on the language attribute, lang in the HTML element.

<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
html[lang="en"] h2
{
    color:black;
}

html[lang="hi"] h2
{
    color:red;
}
</style>
</head>
<body>
<h2>The quick brown fox jumps over the lazy dog</h2>
</body>
</html>

This Example doesn’t change the text colour using JavaScript. JavaScript was used to change the lang attribute value in the html element.

CSS only Tabs using :target

Anjanesh Lekshminarayanan — Fri, 15 Oct 2010 12:30:00 GMT

Its highly unlikely that tabs using only CSS would replace JavaScript based ones.

html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>CSS Tabstitle>
<style type="text/css">
.css-tabs
{
    position:relative;
    text-align:center; /* This is only if you want the tab items at the center */
}
.css-tabs ul.menu
{
    list-style-type:none;
    display:inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.menu > li
{
    display:block;
    float:left;
}
.css-tabs ul.menu li > a
{
    color:#000;
    text-decoration:none;
    display:block;
    text-align:center;
    border:1px solid #808080;
    padding:5px 10px 5px 10px;
    margin-right:5px;
    border-top-left-radius:5px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:5px;
    border-top-right-radius:5px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:5px;
    -moz-user-select:none;
    cursor:pointer;
}
.css-tabs ul.menu li > div
{
    display:none;
    position:absolute;
    width:100%;
    left:0;
    margin:-1px 0 0 0;
    z-index:-1;
    text-align:left;
    padding:0;
}
.css-tabs ul.menu li > div > p
{
    border:1px solid #808080;
    padding:10px;
    margin:0;
}
.css-tabs ul.menu li > a:focus
{
    border-bottom:1px solid #fff;
}
.css-tabs ul.menu li:target > a
{
    cursor:default;
    border-bottom:1px solid #fff;
}

.css-tabs ul.menu li:target > div
{
    display:block;
}
style>
head>
<body>
<div id="tab2" class="css-tabs">
    <ul class="menu">
    <li id="item-1">
        <a href="#item-1">Tab 1a>
        <div><p>Tab Content 1p>div>
    li>
    <li id="item-2">
        <a href="#item-2">Tab 2a>
        <div><p>Tab Content 2p>div>
    li>
    <li id="item-3">
        <a href="#item-3">Tab 3a>
        <div><p>Tab Content 3p>div>
    li>
    <li id="item-4" title="click for Tab 4">
        <a href="#item-4">Tab 4a>
        <div><p>Tab Content 4p>div>
    li>
    ul>
div>
body>
html>

I think its safe to say that its a real annoyance when the browser re-positions the page when a fragment (named anchor) link is clicked. We don’t want the page moving up on clicking on a tab button. Example.

Preventing Images From Being Saved on Right-Click

Anjanesh Lekshminarayanan — Fri, 08 Oct 2010 01:09:08 GMT

More often than not, people have asked that if they uploaded their profile picture online, would it be possible to disable downloading of their profile photo by others.

There is no full-proof method of preventing images from being saved by the end user.
The user can hit print-screen and crop the image out of the screenshot, or can directly download the image by knowing the exact image URL from the page’s source code (HTML, CSS JavaScript) or using tools like FireBug, AdBlockPlus to extract the image URL.

Whats mentioned here is a simple common technique to prevent someone from saving the actual image by right-clicking on it & Save As or Get Image Location.

Set the image’s src attribute to a 1 pixel transparent gif
Set the image’s backgound-image property to the actual image you want it to show

All Star Attributes for HTML5 elements in IE

Anjanesh Lekshminarayanan — Tue, 28 Sep 2010 13:07:43 GMT

It is very common to set margin:0 and padding:0 as default to all HTML elements via the star hack.

* { margin:0; padding:0; }

And we get so used to explicitly setting margins and paddings to elements that require them, that we assume no padding & margins at all as default for all elements.

With html5shiv javascript, we can get most HTML5 functionality working in Internet Explorer (6,7,8). And with ie7-js, we can get IE (6,7,8) to behave more-or-less like IE9.
When using HTML5 elements such as header, section, footer, aside, nav, article & figure, the all star hack doesn’t work and hence we need to set them explicitly. (Looks like ie7-js is resetting the margins)

IE6 / IE7 :

IE8 :

margin:0 isn’t applied in IE 6/7/8. So don’t forget to set it explicitly for HTML5 elements.

header, section, footer, aside, nav, article, figure { display:block; margin:0; padding:0; }

Centering Lists

Anjanesh Lekshminarayanan — Tue, 18 May 2010 10:19:43 GMT

One of the most common techniques for creating a menu or some sort of a navigational bar is by using a list. A list is well-structured, uses fewer elements to parse than a table (buzzword tableless) and can always fall back to normal HTML when CSS or JavaScript is used to manipulate it for effects. (i.e, degrade gracefully)

This is probably the easiest way to center.

html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Centering Liststitle>
<style type="text/css">
* { margin:0; padding:0; }
#nav
{
    text-align:center; /* Not meant for centering a block element */
    padding:10px 0;
    background-color:lightblue;
}
#nav ul
{
    display:inline;
    padding:5px 0 5px 5px;
    background-color:green;
}
#nav ul li
{
    display:inline;
    background-color:yellow;
    margin-right:5px;
}
#nav ul li a
{
    display:inline;
    text-decoration:none;
    color:black;
    padding:0 5px;
}
#nav ul li a:hover
{
    background-color:red;
    color:white;
}
style>
head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">Menu 1a>li>
<li><a href="#">Menu 2a>li>
<li><a href="#">Menu 3a>li>
<li><a href="#">Menu 4a>li>
<li class="last"><a href="#">Menu 5a>li>
div>
body>
html>

But this has some drawbacks.

text-align

is meant for aligning text, not block elements, but this works for centering inline blocks on all browsers. But now, all text nodes within all child blocks inherits this text-align alignment property.
height

Because the list and list items are inline, there is no room for adusting or specifying the height of the menu items. height, padding-top, padding-bottom won’t have any effect.

A workaround for inline is by treating the list as a table and the list items as table-cells. But Internet Explorer supports display:table and display:table-cell only from version 8 onwards. So this is a no no solution for IE 6 & IE 7. See the display declaration

html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Centering Liststitle>
<style type="text/css">
* { margin:0; padding:0; }
#nav
{
    padding:10px 0;
    background-color:lightblue;
}
#nav ul
{
    display:table;
    margin-left:auto;
    margin-right:auto;
    background-color:green;
}
#nav ul li
{
    display:table-cell;
    padding:10px 0 10px 5px;
    background-color:green;
}
#nav ul li.last
{
    padding-right:5px;
}

#nav ul li a
{
    text-decoration:none;
    color:black;
    padding:5px;
    background-color:yellow;
}
#nav ul li a:hover
{
    background-color:red;
    color:white;
}
style>
head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">Menu 1a>li>
<li><a href="#">Menu 2a>li>
<li><a href="#">Menu 3a>li>
<li><a href="#">Menu 4a>li>
<li class="last"><a href="#">Menu 5a>li>
ul>
div>
body>
html>

A better option would be float the elements and specify exact widths. This works nicely when you know the exact content and can specify the width of each element.

html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Centering Liststitle>
<style type="text/css">
* { margin:0; padding:0; }
#nav
{
    padding:10px 0;
    background-color:lightblue;
}
#nav ul
{
    display:block;
    padding:5px 0 5px 5px;
    width:370px; /* 30x4 (width of a) + 125 (width of Menu Item 3) + 5x5 (margin right) + 5x10x2 (padding left & right for a) */
    height:30px;
    margin-left:auto;
    margin-right:auto;
    background-color:green;
}
#nav ul li
{
    display:block;
    float:left;
    margin-right:5px;
    background-color:yellow;
}
#nav ul li a
{
    display:block;
    min-width:30px;
    width:30px;
    line-height:30px; /* Align vertically in the middle */
    text-align:center;
    text-decoration:none;
    color:black;
    padding:0 10px;
}
#nav ul li a:hover
{
    background-color:red;
    color:white;
}
style>

head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#" style="width:125px;">Menu Item 3a>li>
<li><a href="#">4a>li>
<li class="last"><a href="#">5a>li>
ul>
div>
body>
html>

For a fully floating list with centering, applying display:inline-block to the list is enough to achieve the desired result. But according to Quirksmode, inline-block is incomplete in IE6 and IE7. I don’t know how incomplete works, but it wierdly seems to work in IE6 when added in IE conditional statements.

<style type="text/css">
#nav-container ul
{
    display:inline-block;
}
style>

Full HTML :

html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Centering Liststitle>
<style type="text/css">
* { margin:0; padding:0; }
#nav
{
    text-align:center;
    padding:10px 0;
    background-color:lightblue;
}
#nav ul
{
    display:inline-block;
    padding:5px 0 5px 5px;
    background-color:green;
}
#nav ul li
{
    display:block;
    float:left;
    background-color:yellow;
    margin-right:5px;
}
#nav ul li a
{
    display:block;
    min-width:30px; /* Wont work in IE6 */
    line-height:30px; /* Align vertically in the middle */
    text-decoration:none;
    text-align:center;
    color:black;
    padding:0 10px;
}
#nav ul li a:hover
{
    background-color:red;
    color:white;
}
style>

head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">Menu Item 3a>li>
<li><a href="#">4a>li>
<li class="last"><a href="#">5a>li>
ul>
div>
body>
html>

And using HTML5’s nav element :

html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Centering Liststitle>

<style type="text/css">
* { margin:0; padding:0; }
header, section, footer, aside, nav, article, figure { display:block; }
#nav
{
    margin-top:0; /* ie7-js's IE9.js seems to add a margin-top */
    text-align:center;
    padding:10px 0;
    background-color:lightblue;
}
#nav ul
{
    display:inline-block;
    padding:5px 0 5px 5px;
    background-color:green;
}
#nav ul li
{
    display:block;
    float:left;
    margin-right:5px;
    background-color:yellow;
}
#nav ul li a
{
    float:left; /* Required for IE6 */
    display:block;
    min-width:30px;
    line-height:30px; /* Align vertically in the middle */
    text-decoration:none;
    text-align:center;
    color:black;
    padding:0 10px;
}
#nav ul li a:hover
{
    background-color:red;
    color:white;
}
style>

head>
<body>
<nav id="nav">
<ul>
<li class="first"><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">Menu Item 3a>li>
<li><a href="#">4a>li>
<li class="last"><a href="#">5a>li>
ul>
nav>
body>
html>

CSS