css 最简单的导航条

最新推荐文章于 2024-08-12 22:06:26 发布

第三个电饭锅

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量843

点赞数

分类专栏： asp.net 文章标签： css 导航条

本文链接：https://blog.csdn.net/w18767104183/article/details/8667716

版权

asp.net 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!--
所学技术：
	1.float属性
	2.css继承
	3.内联的js函数
	4.使用列表创建导航
	5.鼠标改变字体颜色 A：hover
	6.padding-right属性 作用是使子列表向左或向右靠
-->


<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 type="text/css">
    * 
    {
	PADDING-LEFT: 0px;
    padding-right: 0px;
    }
    .hNav UL LI 
    {
	FLOAT: left; OVERFLOW: hidden; WIDTH: 99px; LINE-HEIGHT: 29px; HEIGHT: 29px; TEXT-ALIGN: center; LIST-STYLE-TYPE: none;
     }
    .hNav UL LI A:hover 
    {
	 COLOR: #f33;
    }
    .hNav UL LI.over 
    {
	OVERFLOW: visible
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="hNav">
    <ul>
        <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className='' ">
            <a >网站导航</a>
            <ul>
                <li style="PADDING-LEFT: 0px; padding-right: 0px;"><a>财富</a></li>
                <li><a style="">财富</a></li>
                <li><a>财富</a></li>
            </ul>
        </li>

         <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className='' ">
            <a>网站导航2</a>
            <ul>
               
                <li><a>财富</a></li>
                <li><a>财富</a></li>
            </ul>
        </li>

        <li οnmοuseοver="this.className='over'" οnmοuseοut="this.className='' ">
            <a>网站导航3</a>
            <ul>
                <li><a>财富</a></li>
  
            </ul>
        </li>

    </ul>
    </div>
    </form>
</body>
</html>

第三个电饭锅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 最简单的导航条

 * { PADDING-LEFT: 0px; padding-right: 0px; }
复制链接

扫一扫

专栏目录