How to make an Interactive Rounded Navigation Menu with CSS

Jul 30, 2012, by admin

An interactive navigation bar using CSS with rounded corners. Just put the html as an unordered list and your navigation links as list items and the CSS will do the rest! The css will tell the browser to display this special unordered list as the menu. This exploits a method to have one background image with three states: normal, hover and active. The css controls the placement of the background image so when you float, the images is displaced to show only the float state, and likewise for the active and then returns to the normal state.

Steps to make an Interactive Rounded Navigation Menu with CSS

First make the html. An <ul> full of <li> elements.

Make the desired backgrounds. Three part background (or two) . One part ‘Normal’ state and another ‘hover’ state and optionally an ‘active’ state. Add additional backgrounds if you want anything like rounded corners, or just a header.

The CSS to attach the two together