HTML往下拉导航栏编码款式，可演试

日期：2021-02-12 浏览：

html里边有一个往下拉导航栏，许多情况下都是有采用，今日共享一个往下拉导航栏的款式编码，自然，往下拉导航栏的款式有多种完成方法，空话很少说，立即上编码：

 !DOCTYPE html  
 html xmlns= 1999/xhtml 
 head runat= server 
  title 往下拉导航栏 /title 
 
  style 
 body {
 width: 95%;
 margin: 0 auto;
 background:red;
 }
 
 #header {
 height: 50px;
 width: 95%;
 }
 
 #nav {
 position: absolute; /*莱单肯定精准定位*/
 }
 
 #nav   li {
 list-style-type: none; /*除掉第一层li里边的标记*/
 float: left; /*将第一层的li横着放置*/
 width: 100px; /*设定总宽*/
 font-size: 30px; /*字体样式尺寸*/
 background-color: #16b6fc; /*情况色调*/
 color: white; /*字体样式色调*/
 } 
 
 #nav li   ul   li {
 list-style-type: none; /*除掉第二层li里边的标记*/
 font-size: 15px; /*字体样式尺寸*/
 padding-top: 8px; /*设定上间隔*/
 padding-bottom: 8px; /*设定下间隔*/
 }
 
 #nav li ul {
 margin-left: 0px; /*将第二层的ul都挪到最左侧*/
 padding-left: 0px; /*将第二层的ul都挪到最左侧*/ 
 display: none; /*掩藏ul內容，掩藏子莱单內容*/
 }
 
 #nav   li:hover ul { /*电脑鼠标放到主莱单上，子莱单会显示信息出去*/
 display: block;
 }
 
 #nav   li   ul   li:hover { /*电脑鼠标放到子莱单上，了莱单的情况和字体样式色调会更改*/
 background-color: white;
 color: black;
 }
 
 #content {
 clear: both;
 padding-left: 40px;
 }
  /style  
 /head 
 body 
  form id= form1  runat= server 
  div 
  div id= header 
  ul id= nav 
  li menu1
  ul 
  li menu11 /li 
  li menu12 /li 
  li menu13 /li 
  /ul 
  /li 
 
  li menu2
  ul 
  li menu21 /li 
  li menu22 /li 
  li menu23 /li 
  /ul  
  /li 
 
  li menu3
  ul 
  li menu31 /li 
  li menu32 /li 
  li menu33 /li 
  /ul 
  /li 
  /ul 
  /div 
  div id= content 
  h1 My Page /h1 
  p 点一下检测往下拉导航栏吧!!! /p 
  /div  
  /div 
  /form 
 /body 
 /html

小结关键点：HTML往下拉要留意等级构造，次之是要对核心航的混乱目录ul设定肯定精准定位，但是，无需精准定位也可以完成。

赞 2 赏共享

潜心网站站长发展趋势，发掘SEO排行数据信息登陆密码，推动重庆市seo优化的朋友互相沟通交流！—— 重庆市荣帅SEO本人blog