Creating Horizontal Dropdown Menus Purely with CSS
Horizontal dropdown menus offer an easy-to-navigate experience by allowing users to hover over a primary menu item to reveal sub-menus. Achieving this effect purely with CSS requires some styling prowess.
HTML Structure:
Start by creating an unordered list (<ul>) with
CSS Styling:
<ul>Menu Item Styles:
<ul>Hover Effects:
<ul>Responsive Sub-Menus:
<ul>Example Code:
<ul>
ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #617F8A; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover a { background: #617F8A; } li:hover li a:hover { background: #95A9B1; }
Live Demo:
[Pure CSS Horizontal Dropdown Menu](http://jsfiddle.net/XPE3w/7/)
The above is the detailed content of How Can I Create a Horizontal Dropdown Menu Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!