<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd" > < Html > < Head > < Title > Adaptive diagonal horizontal menu </ Title > < Style Type = "Text/CSS" > . Menu { Font-family : Arial ; Font-size : 14px ; } . Menu A,. Menu A: visited { Display : Block ; Float : Left ; Position : Relative ; Background-color : # Cc0000 ; Color : # Ffffff ; Text-Decoration : None ; Padding : 6px ; Margin : 1px 0 0 1px ; } . Menu A. Corner { Position : Absolute ; Height : 0 ; Width : 0 ; Overflow : Hidden ; Border-bottom : Solid 6px # cc0000 ; Border-left : Solid 6px # ffffff ; Top : 0 ; Left : 0 ; } . Menu A: hover { Background-color : # Ff9900 ; Color : #333333 ; } </ Style > </ Head > < Body > < Div Class = "Menu" > < A Href = "#" > < Span Class = "Corner" > </ Span > Home </ A > < A Href = "#" > < Span Class = "Corner" > </ Span > Connect </ A > < A Href = "#" > < Span Class = "Corner" > </ Span > Web Dev </ A > < A Href = "#" > < Span Class = "Corner" > </ Span > Web design </ A > < A Href = "#" > < Span Class = "Corner" > </ Span > Map</ A > </ Div > </ Body > </ Html >