非凡资讯

网页设计培训资讯>上海网页美工设计培训机构教你用纯html+css代码制作导航下拉菜单

上海网页美工设计培训机构教你用纯html+css代码制作导航下拉菜单
发布日期:    上海网页美工设计培训机构 4356 分享
今天网页美工设计培训机构老师教你用纯html+css代码制作导航下拉菜单,没有用任何的修饰图片和JavaScript代码,不过兼容性方面做的不是太好,只适用于chrome和firefox浏览器,IE下会有问题,因此测试时除上述两种浏览器外请不要用别的浏览器。
 
网页美工设计培训机构老师整理的下面的代码中,标签中的特殊符号被转换为符号实体,比如 "&lt;" 代表 "<","&gt;" 代表 ">",同学们在调试下面的时候别忘了符号进行转义。
上海网页美工设计培训
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt;非凡教育纯html+css导航&lt;/title&gt;
&lt;!-- mulder --&gt;
&lt;!-- qq:2540202916 --&gt;
&lt;!-- 只支持 chrome firefox --&gt;
&lt;style&gt;
*{
margin:0;
padding:0;
}
.clear:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
nav{
display:inline-block;
border:1px solid #505255;
border-bottom: 1px solid #282C2F;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:50px;
-webkit-box-shadow:1px 1px 3px #292929;
    -moz-box-shadow:1px 1px 3px #292929;
}
li{
list-style:none;
float:left;
border-right: 1px solid #2E3235;
position: relative;
/*background: -moz-linear-gradient(top, #fff, #555D5F 2% ,#555D5F  50%,#3E4245 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #555D5F), color-stop(50%, #555D5F),to(#3E4245));*/
background:#555D5F;
}
li:hover{
/*background: -moz-linear-gradient(top, #fff, #3E4245 2% ,#555D5F  80%,#555D5F 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #3E4245), color-stop(80%, #3E4245),to(#555D5F));*/
background:#3E4245;
-moz-transition: background 1s ease-out;
-webkit-transition: background 1s ease-out;
}
li a{
display:block;
height:40px;
line-height:40px;
padding:0 30px;
font-size:12px;
color:#fff;
text-shadow: 0px -1px 0px #000;
text-decoration:none;
white-space:nowrap;
border-left: 1px solid #999E9F;
    border-top: 1px solid #999E9F;
-moz-border-top-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
z-index:100;
}
li &gt; a{
position:relative;
}
li.first a{
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
}
li.last{
border-right: 0 none;
}
 
 
dl{
position:absolute;
display:block;
top:40px;
left: -25px;
width:165px;
background:#222222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow:1px 1px 3px #292929;
    -moz-box-shadow:1px 1px 3px #292929;
z-index:10;
            
}
li:hover dl{
top:50px;
display:block;
width:145px;
padding:10px;
}
dl a{
background:transparent;
border:0 none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-transition: background 0.5s ease-out;
-webkit-transition: background 0.5s ease-out;
z-index:50;
}
dl a:hover{
color:#FFF;
background:#999E9F;
-moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
dd{
margin-top:-40px;
opacity:0;
width:145px;
-webkit-transition-property:all;
/*-webkit-transition-timing-function: cubic-bezier(5,0,5,0);*/
-moz-transition-property: all;
/*-moz-transition-timing-function: cubic-bezier(5,0,5,0);*/
/*-webkit-transition-delay:5s;
-moz-transition-delay:5s;*/
}
li:hover dd{
margin-top:0;
opacity:1;
}
li dd:nth-child(1){
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
}
li dd:nth-child(2){
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
}
li dd:nth-child(3){
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
}
li dd:nth-child(4){
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
}
dt{
display:none;
margin-top:-25px;
padding-top:15px;
height:10px;
}
li:hover dt{
display:block;
}
.Darrow{
float:right;
margin:18px 10px 0 0;
border-width:5px;
border-color:#FFF transparent transparent transparent;
border-style:solid;
width:0;
height:0;
line-height:0;
overflow:hidden;
cursor:pointer;
text-shadow: 0px -1px 0px #000;
-webkit-box-shadow:0px -1px 0px #000;
    -moz-box-shadow:0px -1px 0px #000;
}
.arrow{
margin:0 auto;
margin-top:-5px;
display:block;
width:10px;
height:10px;
background:#222222;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;nav&gt;
&lt;ul class="clear"&gt;
    &lt;li class="first"&gt;&lt;a href="#"&gt;徐汇网页设计培训&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;
        &lt;span class="Darrow"&gt;&lt;/span&gt;
            &lt;a href="#"&gt;松江网页设计培训&lt;/a&gt;
        &lt;dl&gt;
            &lt;dt&gt;&lt;span class="arrow"&gt;&lt;/span&gt;&lt;/dt&gt;
                &lt;dd&gt;&lt;a href="#"&gt;网页美工设计培训&lt;/a&gt;&lt;/dd&gt;
                &lt;dd&gt;&lt;a href="#"&gt;web前端开发培训&lt;/a&gt;&lt;/dd&gt;
                &lt;dd&gt;&lt;a href="#"&gt;web全栈工程师培训&lt;/a&gt;&lt;/dd&gt;
            &lt;/dl&gt;
        &lt;/li&gt;
效果如图
上海网页美工设计培训
        &lt;li&gt;
        &lt;span class="Darrow"&gt;&lt;/span&gt;
            &lt;a href="#"&gt;虹口网页设计培训&lt;/a&gt;
        &lt;dl&gt;
            &lt;dt&gt;&lt;span class="arrow"&gt;&lt;/span&gt;&lt;/dt&gt;
                &lt;dd&gt;&lt;a href="#"&gt;虹口网页设计培训&lt;/a&gt;&lt;/dd&gt;
                &lt;dd&gt;&lt;a href="#"&gt;Adobe设计培训&lt;/a&gt;&lt;/dd&gt;
                &lt;dd&gt;&lt;a href="#"&gt;PHP动态网页开发培训&lt;/a&gt;&lt;/dd&gt;
            &lt;/dl&gt;
        &lt;/li&gt;
效果如图
上海网页美工设计培训
        &lt;li&gt;
        &lt;span class="Darrow"&gt;&lt;/span&gt;
            &lt;a href="#"&gt;普陀网页设计培训&lt;/a&gt;
        &lt;dl&gt;
            &lt;dt&gt;&lt;span class="arrow"&gt;&lt;/span&gt;&lt;/dt&gt;
                &lt;dd&gt;&lt;a href="#"&gt;PHP开发培训&lt;/a&gt;&lt;/dd&gt;
                &lt;dd&gt;&lt;a href="#"&gt;网页设计师培训&lt;/a&gt;&lt;/dd&gt;
                &lt;dd&gt;&lt;a href="#"&gt;网站建设培训&lt;/a&gt;&lt;/dd&gt;
                &lt;dd&gt;&lt;a href="#"&gt;网页制作培训&lt;/a&gt;&lt;/dd&gt;
            &lt;/dl&gt;
        &lt;/li&gt;
效果如图:
上海网页美工设计培训
        &lt;li&gt;&lt;a href="#"&gt;黄浦网页设计培训&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;浦东网页设计培训&lt;/a&gt;&lt;/li&gt;
   
        
    &lt;/ul&gt;
&lt;/nav&gt;
&lt;/body&gt;
&lt;/html&gt;
相关文章:
免费试听热门课程
在线客服
免费软件
免费试听
最新活动
学费查询
开班查询
就业薪资