新人求助!!做网页做了一个二级菜单,但是一级菜单放不进去盒子,二级菜单不对齐一级菜单

我的style里面的代码是外部镶入的,并不是直接写上去的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
    <script src="../jquery-1.11.1.min.js"></script>
    <style>
    *{/*清除页面原有的边距*/
        margin: 0;
        padding: 0;
    }   

    .wrap{/*定义盒子框架*/
        width:450px;
        height:30px;
        border:1px solid red; 
        margin:100px auto;    /*盒子居中*/ 
    }

    div ul{/*去除列表小圆点*/
        list-style: none;
    }

    div ul li{
        float:left;
        height:50px;
        text-align:center;
    }

    div ul li a{/*一级菜单*/
        text-decoration: none;/*去除下划线*/
        background-color: lightpink;/*块级元素颜色*/
        width:120px;
    }

    div ul li ul li a{/*二级菜单*/  
        display: block;/*让a标签转换为块级元素*/
    }

    div ul li a:hover{/*鼠标悬停时块级元素变橙色*/
        background-color: orange;
    } 

    div ul li ul li{/*二级菜单不浮动*/
        float: none;
    }
</style>
</head> 

<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#">一级菜单1</a>
                <ul style="display: none;">
                    <li><a href="">a</a></li>
                    <li><a href="">b</a></li>
                    <li><a href="">c</a></li>
                </ul>
            </li> 
            <li>
                <a href="#">二级菜单1</a>
                <ul style="display:none;">
                    <li><a href="">d</a></li>
                    <li><a href="">e</a></li>
                    <li><a href="">f</a></li>
                </ul>
            </li>
            <li>
                <a href="#">三级菜单1</a>
                <ul style="display: none;">
                    <li><a href="">g</a></li>
                    <li><a href="">h</a></li>
                    <li><a href="">i</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
    <script>

//      给一级菜单li设置鼠标移入事件,二级菜单显示
        $('.wrap>ul>li').mouseover(function(){
            $(this).children('ul').show();//show本质上还是更新display属性为block
        });

//      给一级菜单li设置鼠标离开事件,二级菜单隐藏
        $('.wrap>ul>li').mouseout(function(){
            $(this).children('ul').hide();//hide本质上还是更新display属性为none
        });

    </script>
</html>

1个回答

<style>
*{/*清除页面原有的边距*/
    margin: 0;
    padding: 0;
}   

.wrap{/*定义盒子框架*/
    width:450px;
    min-height:30px;
    _height:30px;
    border:1px solid red; 
    margin:100px auto;    /*盒子居中*/ 
    overflow: hidden;
}

div ul{/*去除列表小圆点*/
    list-style: none;
    height:100%;
}

div ul li{
    float:left;
    height:50px;
    text-align:center;
     height:100%;
}

div ul li a{/*一级菜单*/
    text-decoration: none;/*去除下划线*/
    background-color: lightpink;/*块级元素颜色*/
    width:120px;
    display:block;
}

div ul li ul li a{/*二级菜单*/  
    display: block;/*让a标签转换为块级元素*/
    border-top:1px solid yellow;
}

div ul li a:hover{/*鼠标悬停时块级元素变橙色*/
    background-color: orange;
} 

div ul li ul li{/*二级菜单不浮动*/
     height:100%;
    float: none;
}

是你想要的么

qq_42200633
少丶客 谢谢你的解答
9 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

1
【新人求助】python在geany编辑好后执行没结果
1
为何我tp5框架下的include 不起作用?
2
新人 人脸识别 python opencv.深度学习 有一些概念性问题 求助一下
2
新人求助 有没有软件可以修改电脑这些参数。
1
新人求助各位大佬,背景动画问题
1
新人求助安卓TV使焦点始终保持在屏幕中间
1
新人,SpringCould求助!谢谢
1
(新人求助各位大佬)网络安全:已知明文和主密钥,依据AES算法求解问题
2
C语言,新人求助,为什么我这个程序选择修改的时候不能一对一修改,一改就把以前的全修改没了!
2
新人求助debain屏幕黑屏问题
3
新人求助:后端知识块如何串联起来?
1
求助void类型函数是如何实现用递归输出1-n个数字
2
新人在坑求助,一天了没有弄对,django做天天生鲜总是无法从注册页跳转到index主页,即使输入对了表单
3
新人求助,python的insert怎么用啊?我这个输入好多次都失败的?
2
微信小程序后端服务选择云开发和腾讯云有什么不一样
1
测试时报错Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required 新人在线等
0
新人求助,请问python如何读取多个表格?
1
新人求助,python如何对月份进行分类?网络案例《990万次骑行:纽约自行车共享系统分析 》
1
新人求助,python中if语句判断未生效
0
新人求助:wxpython在带有背景图的框架上显示静态文本