Html,CSS导航浮动弹出菜单

Html,CSS导航浮动弹出菜 , 单代码如下 , 直接另存为.html文件可运行

<html>
<head>
<title>导航浮动弹出菜单</title>
<style>
div{
    border-radius:10px;
}

.menu_bt_h{
    width:200px; 
    height:50px; 
    cursor:pointer; 
    background-color:#050; 
    text-align:center; 
    line-height:50px; 
    font-size:18px; 
    color:#fff;
}

.menu_item_h{ 
    width:200px; 
    height:50px; 
    margin-left:10px;
    position:relative; 
    background-color:#F80; 
    top:-50px; left:200px; 
    z-index:999; 
    display:none;
}

.menu_bt_h:hover .menu_item_h{ 
    display:block;
}

.trans_fadeout{
   -webkit-transition:all 0.5s linear;
   -moz-transition:all 0.5s linear;
   -ms-transition:all 0.5s linear;
   -o-transition:all 0.5s linear;
   transition:all 0.5s linear;
}

.menu_btn_v{
    width:200px; 
    height:50px; 
    cursor:pointer; 
    background-color:#050; 
    text-align:center; 
    line-height:50px; 
    font-size:18px; 
    color:#fff;
}

.menu_item_v{
    width:200px;
    height:50px;
    margin-top:10px;
    margin-left:0px;
    position:absolute;
    visibility:hidden;
    opacity:0;
    background-color:#F80;
}

.menu_btn_v:hover .menu_item_v{
    visibility:visible;
    opacity:1;
}
</style>
</head>
<body>
<div class="menu_bt_h">导航菜单_水平
    <div class="menu_item_h">弹出菜单_水平</div>
</div>
&nbsp;
<div class="menu_btn_v">导航菜单_竖直
    <div class="menu_item_v trans_fadeout">弹出菜单_竖直</div>
</div>
</body>
</html>

个人网站: Github , 欢迎点击给星

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值