The code is as follows:

-

& lt！ DOCTYPE html & gt

& lthtml & gt

& lthead & gt

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

& ltstyle type="text/css " >

body { font-size: 12px； }

a { color:# 000； Text-Decoration: None; }

a:hover { color:# F00； }/* main menu pseudo class */

# menu { width: 100 px； Border: 1px solid # ccc}

# Menu ul {list-style: none; Margin: 0px padding: 0px}

# Menu ul li {Background: # eee Fill: 0px height: 26px line height: 26px/* font position in the upper and lower borders */border-bottom:1pxsolid # CCC; Location: relative; }

#menu ul li ul {display: none; /* Hide this ul */position: absolute; Left:100px; top:0px； Width:100px; Border: 1px solid # ccc border-bottom: none; }

# menu ul Li:hover ul { display:block； }/* ul is displayed under }/*ul li */

/* Modify * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *.

#menu ul li ul b{ color: #FF0000}

/* Modify * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *.

& lt/style & gt；

& lt/head & gt；

& ltbody & gt

& ltdiv id = " menu " & gt

& ltul & gt

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

& lt Li>& lta href = "#"> page layout

& ltul & gt

& lt Li>& lta href = "#">& ltb> adaptive width.

& lt Li>& lta href = "#"> Fixed width.