CSS技巧分享：如何用css制作横排二级下拉菜单

2023-12-02 11:37 云知道

工具/材料notepad
浏览器
操作方法01、打开Notepad，先输入个页面框架
<！DOCTYPE html>

CSS技巧分享：如何用css制作横排二级下拉菜单

02、框架好了，那么就该定义页面的title，关键词keyword ，和描述description

纯css二级导航下拉菜单

这些内容只能在中完成。
【CSS技巧分享：如何用css制作横排二级下拉菜单】03、定义页面使用的css样式，也是需要在里定义的。

* {
margin:0;
padding:0;
}
.jiao ul li a:hover{
color:#red;
}

ul, li {
list-style:none;
}

a {
text-decoration:none;
}

.jiao {
border:5px solid #pink;
border-right:none;
overflow:hidden;
float:left;
margin:200px 0 0 600px;
}
.jiao ul li ul li a {
border-right:solid;
border-top:2px dotted #666;
background:#black;
}
.jiao>ul>li { float:left;}

.jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}

.jiao ul li ul { position:absolute; display:none;}

.jiao ul li:hover ul{ display:block; }
.jiao>ul>li>ul>li { float:none;}

04、添加一个DIV标签，在页面中划分出一个块来，用来显示。
div中所用的样式为刚才咱们声明的样式“jiao”这个盒子来描述
05、然后使用无序标签

来实现模块。
- 搜狗略懂
  - 搜狗问问
  - 搜狗输入法
  - 搜狗浏览器
  - 搜狐
  06、放上全部的代码吧，可以参考一下?。?br>
  
  //允许你通过一个网址来识别你的标记
  
  css实现下拉导航栏菜单
  
  * {
  margin:0;
  padding:0;
  }
  .jiao ul li a:hover{
  color:#red;
  }
  
  ul, li {
  list-style:none;
  }
  
  a {
  text-decoration:none;
  }
  
  .jiao {
  border:5px solid #pink;
  border-right:none;
  overflow:hidden;
  float:left;
  margin:200px 0 0 600px;
  }
  .jiao ul li ul li a {
  border-right:solid;
  border-top:2px dotted #666;
  background:#black;
  }
  .jiao>ul>li { float:left;}
  
  .jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}
  
  .jiao ul li ul { position:absolute; display:none;}
  
  .jiao ul li:hover ul{ display:block; }
  .jiao>ul>li>ul>li { float:none;}
  - 搜狗略懂
    - 搜狗问问
    - 搜狗输入法
    - 搜狗浏览器
    - 搜狐
  07、如果要添加更多的菜单，只需要后边继续添加
  - 即可
    特别提示写代码过程中一定要记得换行，开头留空，否则过后找东西，连你自己都不知道写的是什么。何谈从哪里找起？
    推荐阅读

上一篇：温州市住房公积金如何打印异地贷款证明?

下一篇：家庭房屋纠纷律师费一般怎么收