Using CSS to make a drop-down menu

Source: Internet
Author: User

using CSS to make a drop-down menu

  1. Define a Div, give Div an ID or class, give Div a style.

    eg:<div id= "menu" ></div>


#menu {

width:1024px; //define a width for div

height:40px; //define a height for Div

margin:0 Auto; //Let Div center display

Background-color: #eee; //give div a background color



  2. Create the unordered list (UL) required for the drop-down menu.


<li><a href= "#" > Home </a></li>

<li><a href= "#" > Course Hall </a></li>


<li><a href= "#" >Javascript</a></li>

<li><a href= "#" >jQuery</a></li>


<li><a href= "#" > Learning Center </a></li>

<li><a href= "#" > Classic case </a></li>

<li><a href= "#" > About Us </a></li>


  3. Add a style to the unordered list


Ul{list-style:none;} //Remove default dots for unordered list

UL li{

Float:left; //Let unordered list appear horizontally

line-height:40px; //Let unordered list be centered vertically

Text-align:center; //Let unordered list be centered in horizontal direction

position:relative; //parent element is positioned in order to make the submenu live directly below the top level of the menu



Text-decoration:none; //Remove <a> underline

Color: #000; //color to <a>

Display:block; //Let <a> display as block-level elements

width:90px; //Give <a> a width



Background-color: #666; color: #fff;

} //Slide the mouse over an action

UL Li ul li{

Float:none; //Komi menu is displayed in vertical direction

Background: #eee;

margin-top:2px; //Komi 2px spacing between menus


UL Li ul{


Position:absolute; the//Komi menu is directly below the top level menu

Display:none; //Normal status submenu is hidden


UL Li:hover ul{

Display:block; //When the mouse slides to <li> on the parent menu, the corresponding submenu is displayed



Complete code example:

Using CSS to make a drop-down menu

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.