CSS和JavaScript实现右拉菜单

最新推荐文章于 2021-06-16 01:45:21 发布

Ednah

最新推荐文章于 2021-06-16 01:45:21 发布

阅读量5.1k

点赞数 1

分类专栏： Javascript 文章标签： CSS JAVASCRIPT

本文链接：https://blog.csdn.net/Ednah/article/details/53106739

版权

本文介绍如何利用CSS和JavaScript创建兼容各浏览器的右拉菜单。通过CSS的:hover伪类结合JavaScript确保功能的稳定性。同时，文章提到了通过设置<a>标签的border-left属性代替图片作为链接分隔线，以及简化代码结构的技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>右拉菜单</title>
       <style type="text/css">
        body
        {
            margin:0;
	    padding: 0;
        }
        .main
        {
            display: block;
            width: 80px;
            border: 2px solid #e4393c;
            margin: 0;
            padding: 0;
        }
        .main li
        {
            height: 30px;
            line-height: 30px;
            font-size: 11pt;
            list-style-type: none;
            text-align: left;
            padding-left: 8px;
            z-index: 3;
        }
        .main li a
        {
            text-decoration: none;
            color: #313131;
        }
        .main li a:hover
        {
            text-decoration: underline