CSS making simple drop-down menu

Important: Locate, hide, display.

(i) First build a two-time list

<ulID= "UL1">        <Li>Home</Li>        <Li>second page<ul>                        <Li><ahref= ' # '>One</a></Li>                        <Li><ahref= ' # '>Both</a></Li>                        <Li><ahref= ' # '>Three</a></Li>                </ul>        </Li>        <Li>Third page</Li></ul>

(b) Set the style in CSS: Display the border of list items, set width and height, and set a background image for good looking.

Li {        border:1px solid gray;                width: 80px;         height: 35px;         background-image: url (a1.png);}

Very ugly.

(c) Remove the dots.

Li {List-style-type: none;}

(d) Let the head list items float horizontally

#ul1 >li {float: left;}   " > "refers to only the LI element under the UL1 list, excluding the next-level LI element in the child element.

(v) Reposition the level two menu and align the second page

#ul1  ul{position:absolute;         Top: 52px;           Left: 90px;            }

(vi) Hide the level two menu

#ul1 ul {display:none}

(vii) When the mouse over the corresponding menu, the level two menu shows the red

{Display:block;}

(eight) in order to look good, you can set the mouse across colors.

{background:Gray;                cursor:pointer;}

You can also set style center alignment, remove link underline, etc.

The final code is as follows:

<style>li{Border:1px solid Gray;width:80px;Height:35px;Background-image:URL (a1.png);List-style-type:None;text-align:Center;Padding-top:8px;}#ul1 >li{float: Left;}#ul1 ul{position:Absolute;Top:60px; Left:90px;Display:None; }#ul1 Li:hover ul{Display:Block;}#ul1 Li:hover{background:Gray;cursor:Pointer;}a{text-decoration:None;}</style>

CSS making simple drop-down menu