CSS 下拉菜单详解-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

CSS 下拉菜单详解

Mar 20, 2017 am 11:44 AM

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;&lt;a href=&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot; target=&quot;_blank&quot;&gt;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&lt;/a&gt;&quot;&gt;
&lt;html xmlns=&quot;&lt;a href=&quot;http://www.w3.org/1999/xhtml&quot; target=&quot;_blank&quot;&gt;http://www.w3.org/1999/xhtml&lt;/a&gt;&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;
&lt;title&gt;CSS菜单－－下拉菜单&lt;/title&gt;
&lt;style&gt;
/*Author:5key.net*/
body{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
#nav{
    width:600px;
    height:30px;
    border-bottom:0px;
    padding:0px 5px;
    position:absolute;
    z-index:1;
    left: 198px;
    top: 25px;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p id=&quot;nav&quot;&gt;
    &lt;ul&gt;
    &lt;li class=&quot;menu2&quot; onMouseOver=&quot;this.className=&#39;menu1&#39;&quot; onMouseOut=&quot;this.className=&#39;menu2&#39;&quot;&gt;我的首页 
    &lt;p class=&quot;list&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;我的CHINAY&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的首页&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的日志&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的日志&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的相册&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的收藏&lt;/a&gt;&lt;br /&gt;
    &lt;/p&gt;
    &lt;/li&gt;
    &lt;li class=&quot;menu2&quot; onMouseOver=&quot;this.className=&#39;menu1&#39;&quot; onMouseOut=&quot;this.className=&#39;menu2&#39;&quot;&gt;社区圈子
    &lt;p class=&quot;list&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;我的CHINAY&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的首页&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的日志&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的相册&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的收藏&lt;/a&gt;&lt;br /&gt;
    &lt;/p&gt;
    &lt;/li&gt;
    &lt;li class=&quot;menu2&quot; onMouseOver=&quot;this.className=&#39;menu1&#39;&quot; onMouseOut=&quot;this.className=&#39;menu2&#39;&quot;&gt;我的短信 
    &lt;p class=&quot;list&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;我的CHINAY&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的相册&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的收藏&lt;/a&gt;&lt;br /&gt;
    &lt;/p&gt;
    &lt;/li&gt;
    &lt;li class=&quot;menu2&quot; onMouseOver=&quot;this.className=&#39;menu1&#39;&quot; onMouseOut=&quot;this.className=&#39;menu2&#39;&quot;&gt;账户管理 
    &lt;p class=&quot;list&quot;&gt;
        &lt;a href=&quot;#&quot;&gt;我的CHINAY&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的首页&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的日志&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的相册&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的收藏&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的日志&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的相册&lt;/a&gt;&lt;br /&gt;
        &lt;a href=&quot;#&quot;&gt;我的收藏&lt;/a&gt;&lt;br /&gt;
    &lt;/p&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
&lt;/p&gt;
&lt;p&gt;查找更多代码，请访问：&lt;a href=&quot;http://www.php.cn&quot; target=&quot;_blank&quot;&gt;php中文网&lt;/a&gt;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

CSS下拉菜单简单制作方法介绍

CSS 下拉菜单

简单带下划线跟随效果的CSS3下拉菜单特效

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn