Use this script to make your underline input. Cool.

A CSS script that changes the appearance of links in a document upon mouse over.

'Highlight' your menu links as the mouse moves over them using this CSS powered script! Thanks to CSS, the effect is very customizable, efficient, does not rely on script, and finally, very small in file size. Visible in IE4+, NS6+, Opera 6/Mozilla, and degrades well with the rest. A good illustration of what CSS alone can accomplish.

DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and additional content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.

This code creates a tabbed menu on the web page by using CSS. Cool and great, enjoy!

This menu is created completely by CSS.

A different code to make menu by CSS.

This menu script displays a cool description of the link the mouse is currently over, gently brought into view. The menu is styled entirely using CSS, even the color change during the mouseover, making the script lightweight and very easy to customize.

This two level CSS Top Menu uses regular lists (<ul>) for the underlining structure, making it search engine friendly and very lightweight. The script is also a breeze to customize. Cool.

Using CSS, you can change the default cursor icon associated with a particular element, even specifying your own cursor image (in IE6+) instead. However, with power comes responsibility. Modify the cursor only when it makes sense to, such as when you're applying it to a custom interface. Like popup windows of JavaScript, changing cursors can quickly become counterproductive and irritating to the user.

Using a simple "arrow" image, this CSS code transforms a regular DIV into a fancy box with sub text appearing beneath it. It's a nice interface to use for your blog's comment boxes, for example.

This is CSS based navigational menu based on a single tab interface. The name 'CF' is taken after our partner site CodingForums.com, which at the time of writing uses a menu based on this code. Four images are used as part of its interface- the two round corners, an indented divider between menu links, and a gradient background image spanning the menu.

This is an inverted version of the original CF Navigation Menu. Four images are used as part of its interface- the two round corners, an indented divider between menu links, and a gradient background image spanning the menu. The name 'CF' is taken after our partner site CodingForums.com, which at the time of writing uses a menu based on this code.

In case you're wondering, this CSS menu retains its structure well when the text is resized.

Breadcrumbs is a term used to describe hierarchical links that tell the visitor where he/she currently is on your site. Visually breadcrumbs are just links with some sort of separator between them, such as a bullet image. This CSS code transforms ordinary looking links into a breadcrumb by giving each link a background image.

There are many different ways to implement breadcrumbs in CSS. Ideally the separator image should not even be part of the link, but dynamically inserted using CSS Generated content. However, since IE6 does not support generated content, that's not feasible at the moment. Then there's the debate over whether breadcrumbs should be implemented as a list, which I personally think is no more appropriate than just using regular elements.

There are countless techniques on the web for adding curly/ round corners to DIV containers. The below shows one way to add a curly lower right corner to any DIV on your page. It does so by using relative positioning to slightly offset a DIV to the right and bottom, so its background image, which is a curly image, falls inline with the border of the outer DIV.