Slice-friendly horizontal navigation with hover states, active tab styling, and rounded corners for modern website headers.

Step 1: Nav Bar Dimensions

Create 960×50px strip. Fill with gradient from #2d3748 to #1a202c.

Step 2: Tab Shapes

Draw 6 nav items as rounded rectangles (4px radius), evenly spaced with 2px gaps.

Step 3: Default State

Default tabs: transparent fill, white text (#ffffff) at 14px, uppercase tracking 1px.

Step 4: Hover State

Duplicate nav. On hover variant, add lighter background (#4a5568) and underline accent.

Step 5: Active State

Active tab: solid accent color (#e85d04), bold text, bottom border 3px.

Step 6: Dropdown Submenu

Below active item, design 200px dropdown with 4 sub-links, shadow, and border.

Step 7: Slice for Export

Slice each state separately. Export as PNG for CSS background-image technique.

That's it! You've completed this tutorial. Experiment with the techniques and share your results with the Designstacks community.