html 竖排导航列菜单,Html有子列的导航菜单

导航条

*{

padding: 0px;

margin: 0px;

}

.titlediv {

background-color: white;

height: 60px;

width: 100%;

float: left;

padding: 0px;

text-align: center; /*字体居中*/

margin: auto;

}

.logo {

width: auto;

float: left;

height: auto;

margin-left: 50px;

}

.titlediv_ul {

list-style-image: url(img/5.jpg);

list-style-type: none; /隐藏点/

margin: 0;

margin-left: 100px;

padding: 0;

float: left;

}

.titlediv_ul > li {

/white-space: nowrap;/

/横向/

float: left;

}

.drop-down > a {

display: block; /设置块级/

width: 100px;

line-height: 60px; /保证文字垂直居中/

font-size: 14px;

color: #000000;

text-decoration: none;

}

/悬浮效果/

.drop-down > a:hover {

color: #60baed;

}

/下拉菜单/

.drop-down {

/position: relative;/

/* white-space: nowrap;!*!/

}

.drop-down-content {

padding: 0;

display: none; /1 先隐藏/

}

.drop-down-content > li {

list-style-type: none; /去点样式/

}

.drop-down:hover .drop-down-content {

display: block; /2显示/

background-color: #60baed;

}

.drop-down-content > li > a {

display: block; /设置块级/

width: 100px;

line-height: 60px; /保证文字垂直居中/

font-size: 14px;

color: #110d06;

text-decoration: none;

}

.drop-down-content > li > a:hover {

color: #e5f4fd;

}

• 电脑软件

  • 我是1
  • 我是2
  • 我是3
• 驱动下载
  • 我是1
  • 我是2
  • 我是3
• 网管租赁
  • 我是1
  • 我是2
  • 我是3
• 软件宝库
  • 我是1
  • 我是2
  • 我是3
• 官方论坛
  • 我是1
  • 我是2
  • 我是3