CSS中的导航栏和下拉菜单
时间：2023-03-31 01:12:12
CSS
一、CSS导航栏（一）导航栏的作用熟练使用导航栏对于网站布局来说是非常重要的。使用CSS，您可以将其转换为漂亮的导航栏，而不是无聊的HTML菜单。(2)垂直导航栏<1>代码如下
垂直导航栏垂直导航栏
垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航bar
垂直导航栏
垂直导航栏
垂直导航栏
垂直导航栏
垂直导航栏
p>
垂直导航栏
垂直导航栏
横向导航栏
水平导航栏；水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏；水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏；水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;酒吧;水平导轨导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏；水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
水平导航栏;水平导航栏；水平导航栏；水平导航栏
body{margin:0;}ul{padding:0px;边距：0px；列表样式类型：无；背景色：#333；溢出：隐藏；位置：固定；顶部：0px；宽度：100%；}ul>li{浮动：左；border-right:1pxsolid#fff;显示：内联；}ul>li:last-child{border-right:none;}a{填充：14px16px;显示：块；宽度：60px；文本对齐：居中；文字装饰：无；白颜色;}lia:hover:not(.active){background-color:#111;}lia.active{颜色:白色;background-color:#4CAF50;}.box{padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;}<2>效果图如下：2.下拉菜单（1）下拉菜单的作用下拉菜单可以让你的网页不枯燥，而且可以通过css来改变网页的美观，这也是网页布局必不可少的东西(2)下拉菜单<1>的代码如下：
下拉菜单 正文{边距：0;文本对齐：居中；}.dropdown{背景色：绿色；文本对齐：居中；填充：20px；显示：内联块；光标：指针；位置：相对；}.di{显示：无；位置：绝对；顶部：61px；left:0;}.diul{list-style:none;填充：0；保证金：0；背景色：#f9f9f9；框阴影：0px8px16px0pxrgba(0,0,0,0.2);}.diulli{最小宽度:104px;填充：10px15px；}.dropdown:hover{background-color:#3e8e41}.dropdown:hover.di{display:block;}.diulli:hover{background-color:#f1f1f1}<2>效果图如下，眼睛累了，注意劳逸结合[-_-]
