HTML+CSS导航栏及下拉菜单的实现

这篇具有很好参考价值的文章主要介绍了HTML+CSS导航栏及下拉菜单的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

导航栏是位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,起着链接站点或者软件内的各个页面的作用。

关于位于页面顶部的导航栏究竟是如何实现的,希望下面的代码可以对朋友们有帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书香之家</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        #menu {
            position: relative;
            background-color:#dcc9c1;
            width: 100%;
            height: 60px;
        }
 
        .logo {
            color: #0c0c01;
            display: inline-block;
            line-height: 58px;
            position: absolute;
            padding: 20 40px;
            font-family:"仿宋";
            font-weight: bold;
        }

        ul {
            list-style: none;
            display: inline-block;
            padding-left: 140px;
        }
 
        ul li {
            line-height: 60px;
            text-align: center;
            position: relative;
            float: left;
        }
 
        a {
            text-decoration: none;
            color: rgb(13, 6, 6);
            display: block;
            padding: 0 20px;
            white-space: nowrap;
            font-family:"仿宋";
            font-weight: bold;
        }
 
        a:hover {
            color: #FFF;
            background-color: #ccc;
        }
 
        ul li ul li {
            float: none;
            margin-top: 2px;
            background-color: #dcc9c1;
        }
 
        ul li ul li a:hover {
            color: #FFF;
            background-color: #ccc;
        }
 
        ul li ul {
            position: absolute;
            left: 0;
            top: 60px;
            display: none;
            padding-left: 0;
        }
       
        ul li:hover ul {
            display: block;
        }

    </style>
</head>
<body>
<div id="menu">
    <div class="logo">
       <p style="font-size: 20px;">&#128213;&nbsp;书香之家</p>
    </div>
    <ul >
        <li><a href="#">首页</a></li>
        <li><a href="#">门店服务</a>
            <ul>
                <li><a href="#">服务流程</a></li>
                <li><a href="#">开店时间</a></li>
            </ul>
        </li>
        <li><a href="#">预约中心</a>
            <ul>
                <li><a href="#">新华路店</a></li>
                <li><a href="#">正义路店</a></li>
                <li><a href="#">平安路店</a></li>
            </ul>
        </li>
        <li><a href="#">馆内指南</a>
            <ul>
                <li><a href="#">新华路店</a></li>
                <li><a href="#">正义路店</a></li>
                <li><a href="#">平安路店</a></li>
            </ul>
        </li>
        <li><a href="#">好书推荐</a>
            <ul>
                <li><a href="#">科普类</a></li>
                <li><a href="#">情感类</a></li>
                <li><a href="#">玄幻类</a></li>
                <li><a href="#">历史类</a></li>
                <li><a href="#">教育类</a></li>
                <li><a href="#">儿童读物</a></li>
            </ul>
        </li>
        <li><a href="#">关于我们</a>
            <ul>
                <li><a href="#">书店简介</a></li>
                <li><a href="#">店内详情</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

效果展示

HTML+CSS导航栏及下拉菜单的实现

HTML+CSS导航栏及下拉菜单的实现文章来源地址https://www.toymoban.com/news/detail-515019.html

到了这里,关于HTML+CSS导航栏及下拉菜单的实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • QT实现多级下拉列表导航菜单,可折叠(QTreewidget实现)

    目录 创建多级列表 在ui中拖入一个QTreewidget控件。 双击该控件,打开编辑树窗口部件。​编辑​编辑 进行列表控件设置: 在项目前添加图标: 效果: QT实现多级下拉列表,可折叠 做项目的时候需要实现一个可折叠的多级下拉列表,用QTreewidget就可以实现,而且直接在ui文件

    2024年02月16日
    浏览(52)
  • 通过css实现-让页面的footer始终位于底部

    当页面内容全部占满时,滑动到最下面,显示footer在底部; 当页面内容不满时,footer也是在最底部显示。 具体实现代码如下:

    2024年02月16日
    浏览(36)
  • 如何使用CSS实现一个下拉菜单?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月13日
    浏览(41)
  • html和css写QQ会员页面导航

    目录 1、css代码 2、html代码 效果图 1、css代码 2、html代码 效果图

    2024年02月04日
    浏览(27)
  • bootstrap 导航栏下拉菜单,居右下拉菜单

     缩放300% 样式还是很好看的

    2024年02月09日
    浏览(42)
  • html实现好看的多种风格导航菜单(附源码)

    作者:xcLeigh 文章地址:https://blog.csdn.net/weixin_43151418/article/details/131412565 html实现好看的多种风格导航菜单(附源码) ,导航菜单,源码下载,分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格,总共23种风格,各种风格都

    2024年02月11日
    浏览(58)
  • ​​​​layui 实现左侧菜单栏及子类(二)​​

    目录 ​ 一,分析左侧菜单栏及子类的数据表 ​ 二,实现左侧菜单栏及子类的具体步骤 2.1实体类(与数据库中的字段对应一一!!!) 2.2dao方法 dao类代码: TreeOv工具类代码: 2.3action类 2.4BuildTree(将不具有父子格式的数据转成具有父子格式的数据) 2.5配置mvc文件 2.6jsp页面

    2024年02月15日
    浏览(38)
  • 修改element ui的导航菜单样式,包括下拉菜单

    第一次使用element ui,根据项目需求,选择了NavMenu导航菜单,  Element - The world\\\'s most popular Vue UI framework  首先将代码复制粘贴到vue组件的template/template目标位置,修改相关信息,顺利完成。 但实际目标需求样式不一致,需要修改字体大小和块大小,尝试用添加class,style中添加

    2024年02月16日
    浏览(54)
  • 导航栏以及二级菜单栏(下拉列表)的制作

           作为新手小白,在我们熟悉了HTML , CSS,JS的功能和语法之后,Web前端开发中,更重要的还有界面的美化,主要依据CSS的庞大功能来实现,今天我来给大家分享的是,利用html代码来实现横向导航栏以及下拉菜单列表的实现。 下面是导航栏:   带有下拉列表的导航栏:

    2024年02月03日
    浏览(37)
  • react ant-design实现导航菜单menu的路由设置/切换页面

    ant-design版本是5.1.1,路由版本是v6的 新版本的导航菜单路由设置与旧版的不太一样,刚开始的时候甚至不知道该怎么写 实现效果: 代码: 首先,给导航菜单的menu添加点击事件 修改item,通过设置点击事件获取点击后的key值(key值即路由跳转的页面) 打印出来看看 获取到的

    2024年02月12日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包