html下拉菜单怎么竖直,导航条（垂直/水平/下拉菜单）

• home
• about
• Service
• Work
• News
• Contact
  • Teleph
  • MailTo
  • Address

1.准备。

导航条的制作，不管是水平还是垂直，首先必须要有结构清晰的html代码。

常用的一般是无序列表，list标签中包含标签；而下拉列表则是在list列表中嵌套一个新的无序列表。

2.css的设定

//清除自带格式-取消列表样式；

//水平导航条需要list浮动，致使其内容不占据空间；

//清除浮动的方法有：a.添加额外的元素，对其设置clear：both；属性。 b.对父元素设置overflow：hidden属性。

//背景央样式、宽度、悬停等格式设置。详见下面示例代码。

ul.nav,ul{

margin:0;

padding:0;

width:48em;

list-style-type:none;

background:url(img/mainNavBg.gif) repeat-x;

overflow:hidden;//清除浮动}

nav ul{

list-style:none;}

ul.nav>li{

width:8em;//设置水平导航条选项卡宽度时，在list项下(总和可以和ul的宽度保持一致8*6=48)

float:left;}

ul.nav a{

display:block;

line-height:1.6em;//利用行高使垂直居中

padding:0 2em;

color:#2B3F00;

text-decoration:none;

border-left:1px solid #E4ffd3;

border-right:1px solid #486B02;

background:url(img/arrow.gif) norepeat 5% 50%;

}/*在默认状态下隐藏下拉菜单*/

ul.nav li ul{

width:8em;//宽度和菜单选项卡宽度一致

position:absolute;

left:-999em;

}

ul.nav a:hover,

ul.nav a:focus{

color:#E4ffd3;

background-color:#6da203;}/*鼠标悬停时显示*/

ul.nav li:hover ul{

left:auto;}

来源：https://www.cnblogs.com/sinister/p/4600086.html