Navigation bar (Vertical/horizontal/drop-down menu)

<ul class= "nav" ><li><a href= "home.html" >home</a></li><li><a href= " about.html ">about</a></li><li><a href=" service.html ">Service</a></li> <li><a href= "work.html" >work</a></li><li><a href= "News.html" >News</a> </li><li><a href= "contact.html" >Contact</a>    <ul class= "Contact" ><li>< A href= "" >Teleph</a></li>    <li><a href= "" >MailTo</a></li>    <li ><a href= "" >Address</a></li>    </ul></li></ul>

1. Prepare.

The creation of the navigation bar, whether horizontal or vertical, must first have a clear structure of HTML code.

Commonly used are unordered lists, the list tag contains <a> tags, and a drop-down list is a new unordered list nested in the list.

2.CSS Settings

Clear self-formatting-cancels list style;

The horizontal navigation bar needs the list to float, causes its content not to occupy the space;

//The method of clearing floats is :A. Add extra elements, set clear:both; properties. B. Sets the Overflow:hidden property on the parent element.

Formatting such as background style, width, hover, and so on. See the sample code below.

ul.nav,ul{margin:0; padding:0;    Width:48em; List-style-Type:none; Background:url (img/mainnavbg.gif) Repeat-x;overflow:hidden;//Clear Float
}nav ul{List-Style:none;} Ul.nav>li{width:8em;//When setting the horizontal navigation bar tab width, under the list item (the sum can be consistent with the width of the UL 8*6=48)float: Left;}    Ul.nav a{Display:block; Line-height:1the. 6em;//uses the row height to center the padding vertically:02em;    Color: #2B3F00; Text-Decoration:none; Border-left:1px solid #E4ffd3; Border-right:1px solid #486B02; Background:url (img/arrow.gif) norepeat 5% 50%;    }
/* Hides the drop-down menu by default */ul.nav li ul{width:8em;//Width and menu tab width are consistent position:absolute; Left:-999em;}ul.nav a:hover,ul.nav a:focus{color: #E4ffd3; Background-Color: #6da203;}
/* Display */ul.nav li:hover ul{Left:auto when hovering over the mouse;} 

Navigation bar (Vertical/horizontal/drop-down menu)