web前端，html+css+jquery实现水平菜单_zhaihaohao1的博客-程序员宅基地

用到的知识点：

1 列表,常用属性

2 a元素，常用属性

3 显示隐藏

4 jquery点击事件，划过事件

html:

<!DOCTYPE html>
<!--水平菜单-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>菜单</title>
    <!--引入所有的文件-->
    <link href="menu02.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="menu02.js"></script>

</head>
<body>
<ul>
    <li class="hmain">
        <a  class="mya" href="#">菜单1</a>
        <ul>
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
        </ul>
    </li>
    <li class="hmain">
        <a class="mya" href="#">菜单2</a>
        <ul>
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
        </ul>
    </li>
    <li class="hmain">
        <a class="mya" href="#">菜单3</a>
        <ul>
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
        </ul>
    </li>
    <li class="hmain">
        <a class="mya" href="#">菜单4</a>
        <ul>
            <li><a href="#">子菜单1</a></li>
            <li><a href="#">子菜单2</a></li>
        </ul>
    </li>

</ul>
</body>
</html>

css:

ul,li{
    /*去掉菜单前面的点*/
    list-style: none;
}
ul{
    /*去掉缩进*/
    padding: 0;
    margin: 0;
}
.mya{
    background-image: url("images/bg.jpg");
    /*规定只能在x轴方向重复，否则会给子菜单也加上背景*/
    background-repeat: repeat-x;
}
a{
    /*去掉a的下划线*/
    text-decoration: none;
    /*居左20*/
    padding-left: 20px;
    /*设置为块级元素*/
    display: block;
    /*宽度80*/
    width: 80px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.hmain a{
    color: darkgreen;
    /*加上向右的箭头图标*/
    /*图标太大覆盖了背景*/
    background-image: url("images/right.jpg" );
    /*不允许重复*/
    background-repeat: no-repeat;

}
.hmain li a{
    color: #000000;
    /*去掉子菜单的向右图标*/
    background-image: none;
    /*居左3px,垂直居中*/
    background-position: 3px center;
}
.hmain ul{
    /*隐藏子菜单*/
    display: none;
}
.hmain{
    float: left;
}
jquery:

/**
 * Created by hao on 2015/9/27.
 */
$(document).ready(function(){
    //.main下面的直接子元素a
    //鼠标划过时的效果
    $(".hmain").hover(function(){
        //自动判断是否展开
        $(this).children("ul").slideToggle();
        changeIcon($(this).children("a"));
    });
});
//    改变右边小图标
function changeIcon(mainNode){
    if(mainNode.css("background-image").indexOf("right.jpg")>=0){
        mainNode.css("background-image","url('images/bottom.jpg')");
    }else{
        mainNode.css("background-image","url('images/right.jpg')");
    }
}
参考视频：
http://www.jikexueyuan.com/course/758.html

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/48766663

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

xdebug,在浏览器中显示日志信息_xiao_xiaoli的博客-程序员宅基地

在fedora上安装了LAMP集成开发环境，然后在火狐浏览器上访问php文件，结果在firebug中看不到调试信息、日志信息，于是安装了xdebug，$ sudo yum install php-pecl-xdebug 安装程序会自动配置好xdebug 。然后又配置了xdebug.ini 和php.ini，结果依旧无法显示，然后直接配置php.ini;;;;;;;;;;;;;;

vue中Promise的用法_vue promise_kuokay的博客-程序员宅基地

简介promise是什么，它可以说是异步编程的一种解决方法，就拿传统的ajax发请求来说，单个还好，如果是一个请求回来的数据还要被其他请求调用，不断地嵌套，可想而知，代码看起来是很乱的，promise主要是为了解决这种情景而出现的。使用promise是一种异步解决方案。由于ajax异步方式请求数据时，我们不能知道数据具体回来的事件，所以过去只能将一个callback函数传递给ajax封装的方法，当ajax异步请求完成时，执行callback函数。promise对象接受resolve和reject

Flex RIA的ArcIMS WebGIS之路（一）--胸中的那棵竹_Brune的博客-程序员宅基地

在重构流行的年代，有人轻视了最初设计，只想着通过重构来改善设计，这样的重构是没有方向的重构。用Flex开发ArcIMS的一个好处就是C/S的设计方案与模式基本上都可以用上。首先设计好一个Flex的WebGIS结构然后再开发编码的目的就明确的多。三年来做的ArcEngine开发让我感觉到ESRI的接口封的太牛了，但是IMS，似乎除了ActiveX Connector（java 不考

<MEMORY>Project Euler NO33_q2234037172的博客-程序员宅基地

分数 49/98 是一个奇怪的分数：当一个菜鸟数学家试图对其进行简化时，他可能会错误地可以认为通过将分子和分母上的9同时去除得到 49/98 = 4/8。但他得到的结果却是正确的。我们将30/50 = 3/5这样的分数作为普通个例。一共有四个这样的非普通分数，其值小于1，并且包括分子和分母都包括2位数。如果将这四个分数的乘积约分到最简式，分母是多少？public class

浪潮笔试面试经验_浪潮笔试可以抄吗_Texsin的博客-程序员宅基地

先说说浪潮的笔试吧，用的在线笔试，但是其实笔试无所谓面试好就可以，笔试20道选择题，单选多选都有，两道编程题，其中第一道很简单，第二道挺难的没做出来，笔试考了平衡二叉树，包括其旋转和性质，这个当时我忽略了，还有一两道硬件的题目，也给蒙对了，排序考了一个，还考了软件设计模式，具体题目记不起了。编程题目第一道很简单，考的条件判断，10-20,20-40,40-80，80-160输入数据判断在那个区

Lesson 11 迭代器生成器 PHP8代码规范_php8的代码_125﹌✪ω✪Ψ的博客-程序员宅基地

1.可迭代对象可以对list、tuple、dict、set、str等类型的数据使用for…in…的循环语法从其中依次拿到数据进行使用，我们把这样的过程称为遍历，也叫迭代。把可以通过for…in…这类语句迭代读取一条数据供我们使用的对象称之为可迭代对象（Iterable）2.推导式推导式分为列表推导式、字典推导式、集合推导式等。在这里我们主要说其中一种也是用的最多列表推导式列表推导式是Python构建列表（list）的一种快捷方式,可以使用简洁的代码就创建出一个列表简单理解就是由一个旧的列表