Home > Web Front-end > CSS Tutorial > How Can I Create a Horizontal Dropdown Menu Using Only CSS?

How Can I Create a Horizontal Dropdown Menu Using Only CSS?

Susan Sarandon
Release: 2024-12-06 15:22:15
Original
138 people have browsed it

How Can I Create a Horizontal Dropdown Menu Using Only CSS?

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

  • elements for each menu item. Sub-menus are represented by nested <ul> elements.

    CSS Styling:

    <ul>
  • Positioning: Set the outer <ul> element to display as a block and add floating left to the
  • elements to create a horizontal layout.
  • Sub-Menu Visibility: Initially, hide the sub-menus by setting their display to none.
  • Menu Item Styles:

    <ul>
  • Define background color, padding, text color, and border for menu items.
  • Hover Effects:

    <ul>
  • Add background color changes on hover for menu items.
  • Unhide sub-menus on hover by setting their display to block and positioning them absolutely.
  • Responsive Sub-Menus:

    <ul>
  • Reduce the font size of sub-menu items on hover for easier readablity.
  • Add background color changes to sub-menu items on hover.
  • Example Code:

    <ul>
    Copy after login
    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;
    }
    Copy after login

    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!

    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template