一个简单的CSS菜单

最新推荐文章于 2024-10-10 22:24:37 发布

atls

最新推荐文章于 2024-10-10 22:24:37 发布

阅读量586

点赞数

CC 4.0 BY-SA版权

分类专栏：个人整理的资料文章标签： css function filter microsoft float service

本文链接：https://blog.youkuaiyun.com/atls/article/details/1828433

个人整理的资料专栏收录该内容

1 篇文章

订阅专栏

源码：

<%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="ISASSTUDY.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
  <title>WebForm2</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <style type="text/css"> *{margin:0;padding:0;border:0;}
body { font-family: arial, 宋体, serif; font-size:12px; }
#nav { line-height: 24px; list-style-type: none; background:#666; }
#nav a { display: block; width: 80px; text-align:center; }
#nav a:link { color:#666; text-decoration:none; }
#nav a:visited { color:#666;text-decoration:none; }
#nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; }
#nav li { float: left; width: 80px; background:#CCC; }
#nav li a:hover{ background:#000; }
#nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50) }
#nav li ul li{ float: left; width: 160px; background: #F6F6F6; }
#nav li ul a{ display: block; width: 160px;text-align:left;padding-left:16px; }
#nav li ul a:link { color:#666; text-decoration:none; }
#nav li ul a:visited { color:#666;text-decoration:none; }
#nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#001; }
#nav li:hover ul { left: auto; }
#nav li.sfhover ul { left: auto; }
#content { clear: left; }

</style>

  <script type="text/javascript">
   <![CDATA[//><!]]>
  </script>
</HEAD>
<body MS_POSITIONING="GridLayout" bgcolor=f0f8ff>
  <form id="Form1" method="post" runat="server">
  <ul id="nav">
     <li><a href="#">INTRODUCE</a>
    <ul>
     <li><a href="#">PROD1</a></li>
     <li><a href="#">PROD2</a></li>
     <li><a href="#">PROD3</a></li>
     <li><a href="#">PROD4</a></li>
    </ul>
   </li>
   <li><a href="#">SERVICE</a>
    <ul>
     <li><a href="#">SERVICE1</a></li>
     <li><a href="#">SERVICE2</a></li>
    </ul>
   </li>
   <li><a href="#">CASE</a>
    <ul>
     <li><a href="#">CASE1</a></li>
     <li><a href="#">CASE2</a></li>
     <li><a href="#">CASE3</a></li>
    </ul>
   </li>
   <li><a href="#">ABOUT US</a>
    <ul>
     <li><a href="#">TEAM1</a></li>
     <li><a href="#">TEAM2</a></li>
     <li><a href="#">TEAM3</a></li>
     <li><a href="#">TEAM4</a></li>
    </ul>
   </li>
   <li><a href="#">SHOW</a>
    <ul>
     <li><a href="#">SAMPLE1</a></li>
     <li><a href="#">SAMPLE2</a></li>
     <li><a href="#">SAMPLE3</a></li>
    </ul>
   </li>
   <li>
    <a href="#">CONTACT US</a>
   </li>
</ul>

</form>
</body>
</HTML>