Compare to JavaScript or a JQuery menu pure CSS menu gives better performance. Are you looking to create a horizontal menu with sub-menu for your web applications without using any third-party plugins? If so this example will help you. In this demo app we Created a responsive horizontal navigation menu using pure CSS. This menu works for all browsers like Google Chrome, Firefox and Safari. You can customize this source codes as per your business need.
Desktop View:
Mobile View:
Example of Menu with Sub-menu using pure CSS
In this example I have tabs like Home, About Us, Services, News & Career. You can add or update tags as you want. This menu is supporting sub menu feature. Under About Us & Services I added some sub menu items for demo purpose.
Technically to design this horizontal menu I used UL element of HTML. Using pure CSS I am defining color & theme to the menu. For responsive I used CSS3 media queries. In media query I configured the menu max-width to 750px. 750px is nothing but the total width of my horizontal menu (including all tabs).
This menu is designed using pure CSS, so according to your requirement you can Configure this menu easily. You can change width, height, font style, font color or font size as you want. To update colors & theme you can update background for li & anchor elements. To present mouse over effect here I used CSS hover. To update hover related changes you need to update li:hover related classes.
Horizontal Navigation menu with sub-menu
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Responsive horizontal menu using CSS</title> </head> <body> <label for="display-menu" class="our-menu">Our Menu</label> <input type="checkbox" id="display-menu" role="button" /> <ul id="hor-menu"> <li><a href="#">Home</a></li> <li> <a href="#">About Us</a> <ul class="sub-menu"> <li><a href="#">Our Mission</a></li> <li><a href="#">Technology</a></li> <li><a href="#">Success Stories</a></li> </ul> </li> <li> <a href="#">Services</a> <ul class="sub-menu"> <li><a href="#">CMS</a></li> <li><a href="#">UI Designing</a></li> <li><a href="#">Logo Designing</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">SEO Optimization</a></li> </ul> </li> <li><a href="#">News</a></li> <li><a href="#">Career</a></li> <li> <a href="#">Products</a> <ul class="sub-menu"> <li><a href="#">Off-page Optimization</a></li> <li><a href="#">Blog Writing</a></li> <li><a href="#">MyCMS</a></li> <li><a href="#">WordPress Blogs</a></li> <li><a href="#">Mobile Apps</a></li> </ul> </li> </ul> </body> </html>
CSS Source Code for Navigation menu
<style type="text/css">
.our-menu { font-family: Arial, "Times New Roman", Georgia; text-decoration: none; color: #ffffff; background: #054372; text-align: center; padding: 6px 0; display: none; }
#display-menu { display: none; }
#display-menu:checked ~ #hor-menu{ display: block; }
/*Style for horizontal CSS menu*/
ul { list-style-type:none; position: absolute; margin:0px; padding:0px; }
li { float: left; margin-right: 1px; display:inline-block; }
li a { display: block; text-decoration: none; height: 35px; min-width: 145px; text-align: center; line-height: 35px; font-family: Arial, "Times New Roman", Georgia; color: #ffffff; background: #197DCB; }
li:hover a { background: #054372; }
li:hover ul a { background: #f3f3f3; color: #2f3036; line-height: 35px; height: 35px; }
li:hover ul a:hover { background: #054372; color: #ffffff; }
li ul { display: none; }
li ul li { display: block; float: none; }
li ul li a { width: auto; min-width: 120px; padding: 0 15px; }
ul li a:hover + .sub-menu, .sub-menu:hover { display: block; }
/*Media Query for Responsive Design*/
@media screen and (max-width : 750px){
.our-menu { display:block; }
ul { position: static; display: none; }
li { margin-bottom: 1px; }
ul li, li a { width: 100%; }
}
</style>
Benefits of Horizontal Navigation
1. Space Efficiency Horizontal menus occupy minimal vertical space, allowing more room for content. This is particularly useful for landing pages and blogs where screen real estate is valuable.
2. User-Friendly Design Users are accustomed to horizontal menus, as they mimic traditional reading patterns (left to right). This familiarity enhances usability and reduces cognitive load.
3. Mobile Responsiveness With proper design techniques, horizontal menus can adapt to smaller screens, often transforming into hamburger menus on mobile devices.
4. Aesthetic Appeal A well-designed horizontal menu contributes to a clean, professional layout, reinforcing brand identity and visual hierarchy.
Best Practices for Designing Horizontal Navigation
1. Keep It Simple Limit the number of menu items to avoid clutter. Seven or fewer links are ideal for optimal usability.
2. Prioritize Important Links Place high-priority pages (e.g., Home, About, Contact) on the far left, as users typically scan from left to right.
3. Use Clear Labels Avoid jargon—menu labels should be concise and descriptive (e.g., “Services” instead of “What We Offer”).
4. Ensure Responsiveness Test the menu on various devices to ensure it collapses or adjusts appropriately on smaller screens.
5. Highlight Active Pages Use visual cues (e.g., bold text, underlines) to indicate the current page, helping users orient themselves.
Common Horizontal Navigation Styles
1. Standard Menu A basic row of text links, often with hover effects for interactivity.
2. Mega Menu An expanded dropdown that displays multiple columns of links, useful for large websites with many categories.
3. Sticky Menu A fixed menu that remains visible as users scroll, ensuring constant access to navigation.
4. Centered Menu Links are aligned to the center rather than the left, creating a balanced aesthetic.
Conclusion
Horizontal navigation menus remain a staple in web design due to their efficiency, familiarity, and adaptability. By following best practices in design and development, they can significantly enhance user experience while maintaining a sleek, professional appearance. Whether for a corporate site or a personal blog, a well-structured horizontal menu ensures seamless navigation and engagement.
