博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

css导航

Posted on 2013-10-30 21:17  熊孩儿  阅读(243)  评论(0)    收藏  举报

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="menuText.aspx.cs" Inherits="WebApplication1.menuText" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>    

<style>        

body {         width:960px;        margin: 40px auto;         }

        #menu {           height:40px;           width:100%;           background:#1b1717;           list-style:none;           border-radius:5px;         }

        #menu li {              float:left;             list-style:none;             width:130px;             }

       #menu a {  top:10px;

             padding:10px 40px 10px 40px;   

            position:relative; 

            text-transform: uppercase; 

            font: bold 12px/25px Arial, Helvetica;   

              }

            #menu ul {   display:none;    }            

         #menu ul li{  background:#2b2b33;

                position:relative; 

               width:130px; 

               height:40px;  

              left:-40px;   

               top:15px; 

               border-bottom:1px solid;     

            border-bottom-color:white;  

            }

         #menu li:hover > ul    {   display: block;   }

            #menu ul ul li {   position:relative;  top:-25px;   left:90px;   background:#2937a7;   }                      

   /*第一个小三角代码*/         

  #menu ul li:first-child > a:after{  content: '';    display: inline-block; border-left: 6px solid transparent;    border-right: 6px solid transparent;             border-bottom: 6px solid #CCC;   position: absolute;  top: -10px;   left: 60px;             }

           /*第二个小三角代码*/     

#menu ul ul li:first-child a:after{ 

　　　　left: -8px; 

　　　　top: 12px;  

　　　　border-left: 0px; 

　　　　border-bottom: 5px solid transparent; 

　　　　border-top: 5px solid transparent;  

　　　　border-right: 8px solid #444; }

            </style>

</head>

<body>    

<ul id="menu">  <li><a href="#">Hone</a>   <ul>  

　　　<li><a href="#">item11</a>   

　　　　<ul>  <li><a href="#">hhh</a></li>   <li><a href="#">hhh</a></li>   <li><a href="#">hhh</a></li>  </ul>   

  </li>  <li><a href="#">item11</a>  

   <ul> 

<li><a href="#">sds</a></li> 

  <li><a href="#">sdsd</a></li>  

   <li><a href="#">sds</a></li>

</ul>  

</li>  

</ul>

</li>        

<li><a href="#">Graphic</a>   <ul> <li><a href="#">item</a></li>     

   </ul>

</li>

</ul>   

</body>

</html>