Making multi-level menu with css

& lt！ DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " " http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Strict . DTD " & gt；

& lthtml xmlns = " http://www . w3 . org/ 1999/XHTML " & gt；

& lthead & gt

& ltmeta http-equiv = " Content-Type " Content = " text/html； charset=GB23 12" />

& ltmeta name = " robots " content = " all "/& gt；

< title > The drop-down menu of pure CSS supports IE6IE7Firefox.

& ltstyle type="text/css " >

* {Margin: 0; Fill: 0; }

Text {

Background: # fff

Font series: "Lucida Grande", Helvetica, Arial, sans serif;

font-size: 12px；

}

/* Define the width of styles and other styles */

. Menu {font-size:12px; Bottom: 5px width: 750px margin: 0 automatic; }

/* Know the default padding and margins and style of the list */

. Menu ul {padding: 0; Margin: 0; List-style-type: none; Height: 3em Background: transparent; }

. Menu ul ul {width:7em；; }

/* Defining a floating property allows you to define the location of the next menu */

. Menu ul Li {float:left；; Height: 3em Line Height: 3em Display: Block; }

/* Secondary menu style */

. Menu ul ul li {Display: block width: 7em height: automatic; Line height:1em; }

/* Default style of first-level menu */

. Menu a. Menu a: visited {display:block；; Floating: left; Height:100%; Width: 7em Font size:1em; Text-

Decoration: None; Color: # fff background: # 949e7c filling: 01em; border-left: 1px solid # eee； border-right: 1px solid # 000； }

/* hack IE5.x defines the width of the menu, so that you can get or set the current width */

* html。 Menu a, * html. Menu a: visited {width:7em；; Text-Decoration: None; }

/* Default appearance style of the next link */

. Menu ul ul a, Menu ul ul a: visited

{display: block; Background: # 5b8686

Color: # fff width: 7em height:100%; Line height:1em; Filling: 0.5 em1em; border-bottom: 1px solid # 7aa； }

/* Define the width of the lower menu */

* html。 Menu ul ul a * html. Menu ul ul a: visited {width:7em；; }

/* Define the style of table formation under IE6 */

. Menu table {border-collapse: collapse; Fill: 0; Margin:-1px; Width: 0; Height: 0; Font size:1em; Z index:1; }

/* Secondary menu background */

/* Level 1 link style */

* html。 Menu a: hover {color: # 0066ff; Location: relative; Z index:100; }

/**/

. Menu Lee: Hover {Position: Relative; }

/**/

. Menu: hover a {color:# ff0；; Background: # d4d8bd; }

/* Secondary link style */

* html。 Menu ul ul a: hover {color: # ff0000; Background: # 7aa Location: Relative; Z index:110; }

/* Find the location of the secondary menu and set it to be displayed at the bottom of the main menu. If it is absolute, you can try */

. Menu ul ul li:hover {position: relative; }

. Menu ul ul: hover a {color:# fff；; Background: # 7aa}

. Menu ul ul {Visibility: hidden; Location: absolute; Height: 0; top:3em； Left: 0; Width: 8em}

/* Move to the first level to define whether to display the next menu. If visible: visible; Change to visibility: hidden; Then there are menus above level 2 */

. Menu ul: hover ul {visibility: visible; Height: automatic; Filling: 0 3em 3em 3em Left:-3EM; }

& lt/style & gt；

& lt/head & gt；

& ltbody & gt

& ltdiv class="menu " >

& ltul & gt

& lt Li>& lta href = "#"> Hotel Home Page

& lt！ -[if LTE ie 6] >; & lt table & gt& lttr & gt& lttd & gt& lt! [endif]-& gt；

& ltul & gt

& lt Li>& ltA href="#" title= "hotel environment" > hotel environment.

& lt Li>& ltA href="#" title= "hotel history" > hotel history.

& lt/ul & gt；

& lt！ -[if LTE ie 6] >; & lt/TD & gt； & lt/tr & gt； & lt/table & gt； & lt/a & gt； & lt！ [endif]-& gt；

& lt/ Li>

& lt Li>& lta href = "#"> book a hotel.

& lt！ -[if LTE ie 6] >; & lt table & gt& lttr & gt& lttd & gt& lt! [endif]-& gt；

& ltul & gt

& lt Li>& ltA href="#" title= "room inquiry" > room inquiry.

& lt Li>& ltA href="#" title= "Add room information" > Add room information.

& lt/ul & gt；

& lt！ -[if LTE ie 6] >; & lt/TD & gt； & lt/tr & gt； & lt/table & gt； & lt/a & gt； & lt！ [endif]-& gt；

& lt/ Li>

& lt Li>& lta href = "#"> enterprise management

& lt！ -[if LTE ie 6] >; & lt table & gt& lttr & gt& lttd & gt& lt! [endif]-& gt；

& ltul & gt

& lt Li>& ltA href="#" title= "move in" > move in.

& lt Li>& ltA href="#" title= "Check the room" > Check the room.

& lt/ul & gt；

& lt！ -[if LTE ie 6] >; & lt/TD & gt； & lt/tr & gt； & lt/table & gt； & lt/a & gt； & lt！ [endif]-& gt；

& lt/ Li>

& lt Li>& lta href = "#"> Hotel Forum

& lt！ -[if LTE ie 6] >; & lt table & gt& lttr & gt& lttd & gt& lt! [endif]-& gt；

& ltul & gt

& lt Li>& ltA href="#" title= "My Forum" > My Forum.

& lt/ul & gt；

& lt！ -[if LTE ie 6] >; & lt/TD & gt； & lt/tr & gt； & lt/table & gt； & lt/a & gt； & lt！ [endif]-& gt；

& lt/ Li>

& lt Li>& lta href = "#"> Guest message.

& lt！ -[if LTE ie 6] >; & lt table & gt& lttr & gt& lttd & gt& lt! [endif]-& gt；

& ltul & gt

& lt Li>& ltA href="#" title= "My message" > My message.

& lt/ul & gt；

& lt！ -[if LTE ie 6] >; & lt/TD & gt； & lt/tr & gt； & lt/table & gt； & lt/a & gt； & lt！ [endif]-& gt；

& lt/ Li>

& lt Li>& lta href = "#"> Today's activities.

& lt！ -[if LTE ie 6] >; & lt table & gt& lttr & gt& lttd & gt& lt! [endif]-& gt；

& ltul & gt

& lt Li><A href = "#" title = "colour wheel" > user points.

& lt/ul & gt；

& lt！ -[if LTE ie 6] >; & lt/TD & gt； & lt/tr & gt； & lt/table & gt； & lt/a & gt； & lt！ [endif]-& gt；

& lt/ Li>

& lt/ul & gt；

& lt/div & gt；

& lt/body & gt；

& lt/html & gt；

I hope I can help you. .

Network standard alliance