您现在的位置是：网站首页> 编程资料编程资料

简单的CSS 下拉导航菜单实现代码_CSS教程_CSS_网页制作_

2021-09-08 980人已围观

简介 这个教程会告诉你如何创建一个简单的CSS下拉菜单.如果你觉得好就请告诉你的一个朋友让他也知道这个网站。

效果图:
 
首先,我们来给这个下拉菜单写一个HTML的代码.先创建一个div来做为容器,然后把这个导航菜单放到这个内器里.正如下面的代码,我们用无序列表来创建这个导航菜单.在这个导航菜单中Portfolio项下有一个子菜单,我用粗体表示出来,最后说一句别忘了关闭(可以看这个:css技巧-清除多余的标签让代码更加有意义)
HTML代码

复制代码
代码如下:

The css
首先,我们来给#nav div设置一个样式,给它一个宽度,高度,字体大小.并把默认的无序列表样式给去掉.

复制代码
代码如下:

*{ margin:0px; padding: 0px; }
#nav {
font-family: arial, sans-serif;
position: relative;
width: 390px;
height:56px;
font-size:14px;
color:#999;
margin: 0 auto;
}
#nav ul {
list-style-type: none;
}

在这一步我们给
  • 设置左浮动让整个导航水平.并且设置相对,记
  • 成为一个祖元素,这样我们下面就可以利用到绝对定位了.

    复制代码
    代码如下:

    #nav ul li {
    float: left
    position: relative;
    }

    在这一步我们给标签设置一个样式被它看起来像一个按扭(div css教程-如何使用css创建一个类似按扭的导航)

    复制代码
    代码如下:

    #nav ul li a {
    text-align: center;
    border-right:1px solid #e9e9e9;
    padding:20px;
    display:block;
    text-decoration:none;
    color:#999;
    }

    最重要的部分
    这部分将展示给你看如何让下拉菜单的显示和隐藏.
    当光标没有移动到WEB项里下拉菜单不显示,当光标移动到WEB项上面时下拉菜单显示,我们用display的属性来实现这个效果.

    复制代码
    代码如下:

    #nav ul li ul {
    display: none
    }
    #nav ul li:hover ul {
    display: block;
    position: absolute;
    }

    我们给下拉菜单的悬停状态设置样式

    复制代码
    代码如下:

    #nav ul li:hover ul li a {
    display:block;
    background:#12aeef;
    color:#ffffff;
    width: 110px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    border-right: none;
    }
    #nav ul li:hover ul li a:hover {
    background:#6dc7ec;
    color:#fff;
    }

    完整的CSS

    复制代码
    代码如下:

    *{ margin:0px; padding: 0px; }
    #nav {
    font-family: arial, sans-serif;
    position: relative;
    width: 390px;
    height:56px;
    font-size:14px;
    color:#999;
    margin: 0 auto;
    }
    #nav ul {
    list-style-type: none;
    }
    #nav ul li {
    float: left;
    position: relative;
    }
    #nav ul li a {
    text-align: center;
    border-right:1px solid #e9e9e9;
    padding:20px;
    display:block;
    text-decoration:none;
    color:#999;
    }
    #nav ul li ul {
    display: none
    }
    #nav ul li:hover ul {
    display: block;
    position: absolute;
    }
    #nav ul li:hover ul li a {
    display:block;
    background:#12aeef;
    color:#ffffff;
    width: 110px;
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    border-right: none;
    }
    #nav ul li:hover ul li a:hover {
    background:#6dc7ec;
    color:#fff;
    }

    演示代码:

    提示：您可以先修改部分代码再运行

    上一篇：Web设计中的黄金分割分析_CSS教程_CSS_网页制作_

    下一篇：Float 菜单水平居中简单方法_CSS教程_CSS_网页制作_

    • 相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网