首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

正在尝试在此css菜单中居中显示此子菜单

在CSS菜单中居中显示子菜单,可以使用以下步骤:

  1. 首先,确保父菜单容器具有相对定位的属性。可以使用CSS的position属性来设置,例如:position: relative;
  2. 然后,为子菜单容器添加绝对定位的属性。可以使用CSS的position属性来设置,例如:position: absolute;
  3. 接下来,使用left和top属性将子菜单容器定位到父菜单容器的中心位置。可以使用CSS的transform属性来设置,例如:transform: translate(-50%, -50%);
  4. 最后,使用z-index属性确保子菜单在父菜单之上显示。可以使用CSS的z-index属性来设置,例如:z-index: 9999;

以下是一个示例代码:

HTML代码:

代码语言:txt
复制
<div class="menu">
  <ul>
    <li>菜单项1
      <ul class="submenu">
        <li>子菜单项1</li>
        <li>子菜单项2</li>
        <li>子菜单项3</li>
      </ul>
    </li>
    <li>菜单项2</li>
    <li>菜单项3</li>
  </ul>
</div>

CSS代码:

代码语言:txt
复制
.menu {
  position: relative;
}

.submenu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

这样,子菜单就会在父菜单中居中显示。你可以根据实际情况调整样式和位置。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

butterfly-heo主题反编译日记

点击查看更新记录 更新记录 2021-07-28:菜单栏解析 将菜单从纵向变成横向 添加内联样式,根据菜单数量调整偏移量 菜单居中 点击查看参考教程 参考方向 教程原贴 hexo-theme-butterfly-heo...有必要声明的一点是,请各位在反编译的过程尊重他人的劳动成果,尤其需要注意站点的版权协议,抄UI就差不多了,可别把洪哥设计的各种图标也抠走了。那我可就成罪人了。...顶栏菜单 洪哥的顶栏菜单菜单是横向排布的,且菜单居中。 解析过程 最终改动 菜单横向排布很好解决。...在添加以下样式 改成横向之后,会出现一个现象,因为菜单的显隐是由父元素的hover属性控制的,所以当我们改动UI以后,为了按菜单,鼠标势必会有一瞬间离开父菜单。...为此,我们需要调整一下菜单的偏移量,让他始终相对父元素保持居中。同时适当上调子菜单位置,让他能更好的和父菜单接合。 新建,添加样式 打开,修改内容。参数记得自己计算。

81610
  • 用AI快速生成一个网页(名侦探柯南~灰原哀主题网页),适合大学生web期末大作业

    导航栏的背景颜色为#D7719B,字体大小为24px,链接颜色为白色,鼠标悬停时菜单项背景色变为橙色。以下是使用 HTML 和 CSS 实现上述要求的导航栏的示例代码:HTML:<!...成果展示2、生成一个页面头部元素,宽度1300px,高度700px,左右居中布局。头部元素内包括一张背景图,下边距30px以下是使用 HTML 和 CSS 实现上述要求的示例代码:HTML:<!...通过background属性设置背景图像,并使用center center将图像居中显示,no-repeat确保图像不重复,background-size: cover;使图像完全覆盖元素。...此外,确保将图片文件正确放置在相应的路径,以便在页面上正确显示图片。成果展示4、创建一个区域,宽1300px高300px,背景是一张图片,内容里面有几行文字,在最左侧50px的地方,上下居中。...main-container 元素设置了宽度、高度和背景图片,并使用相对定位来定位其元素.content。.content 元素使用绝对定位,将其放置在左侧 50px 并垂直居中。.

    15710

    html、css 实现二级菜单「建议收藏」

    内容区(默认情况下,height、width决定的区域) 填充盒 padding-box = 内容区 + 填充区 边框盒 border-box = 内容区 + 填充区 + 边框 所以效果上来看就是:一级菜单的...position: absolute; 绝对定位元素的包含块:找祖先元素第一个定位元素,改元素的填充盒;若找不到,则它的包含块为整个网页(初始化包含块) 这样,二级菜单就会相对于其对应的一级菜单的内容盒进行定位了...三:实现二级菜单 以免篇幅拖沓,本文只给一级菜单的第四个li元素设计了二级菜单 一般,页面上只显示一级菜单,需要点击一级菜单,才会出现相应的二级菜单 需要用到伪类:hover 鼠标悬停在元素上时的样式...(在html,我给一级菜单的第四个li元素设置了一个选择器.submenu) css: nav .topnav>li:hover{ color: #f40; font-weight...书写选择器时,比如: nav .topnav>li:hover 选中nav元素下的.topnav元素的元素li,并且有鼠标悬停在上面 空格,选后代元素 >,选元素 自此,本文结束,虽然比较简陋,但是二级菜单的基本结构是搭建起来了

    2.6K50

    JavaFX+Jfoenix 学习笔记(四)–MenuBar菜单

    Override public void start(Stage stage) throws Exception { // 创建一个标签,用于存放我们的Hello World文本,并设置让它在父容器居中...,,这两行如果不屑,一般电脑默认是居中屏幕显示,但在有些电脑会跑偏 // stage.setX(0);stage.setY(4); // stage和Scene不再注释...,这样其他组件就都可以使用了(哲理注意替换斜杠\,不能会报错找不到路径) scene.getStylesheets().add((Constants.CSS + "app.css").replace...,,这两行如果不屑,一般电脑默认是居中屏幕显示,但在有些电脑会跑偏 // stage.setX(0);stage.setY(4); // stage和Scene不再注释 stage.setTitle(Constants.TITLE...,这样其他组件就都可以使用了(哲理注意替换斜杠\,不能会报错找不到路径) scene.getStylesheets().add((Constants.CSS + "app.css").replace(

    2.6K20

    【建议收藏】用AI快速生成一个网页(名侦探柯南~灰原哀主题网页),适合大学生web期末大作业

    导航栏的背景颜色为#D7719B,字体大小为24px,链接颜色为白色,鼠标悬停时菜单项背景色变为橙色。 以下是使用 HTML 和 CSS 实现上述要求的导航栏的示例代码: HTML: <!...通过background属性设置背景图像,并使用center center将图像居中显示,no-repeat确保图像不重复,background-size: cover;使图像完全覆盖元素。...此外,确保将图片文件正确放置在相应的路径,以便在页面上正确显示图片。...然后在这块区域外的下方30px额外创建一个页脚,和上面的区域无关,页脚宽1300px,高100px,内容是版权所有,背景色#D7719B,字体白色且上下左右居中 好的,以下是使用 HTML 和 CSS....main-container 元素设置了宽度、高度和背景图片,并使用相对定位来定位其元素.content。.content 元素使用绝对定位,将其放置在左侧 50px 并垂直居中

    12510

    下划线和上划线菜单悬停效果| CSS 项目

    在本教程,我们将学习如何创建一个简单而引人注目的链接悬停效果。要创建效果,我们需要 HTML 和纯 CSS。不仅本教程速度快,而且非常简单,适合初学者。...我们将项目文件夹命名为“菜单链接悬停效果”。在此文件夹,我们有两个文件 - index.html 和 style.css。...为此,我们需要 CSS。我们从所有元素移除边距和填充。此外,我们将每个元素的 box-sizing 设置为 'border-box'。接下来,我们为 body 设置背景颜色,并为 nav 设置尺寸。...然后,我们使用 flex 布局来居中和间隔 Nav 的内容。现在对于 'a' 标签,我们将位置设置为相对位置,并将文本装饰设置为无。我们进一步设置了文本样式,并添加了左右填充为 10px。...{ right: 0; top: -10px;}a:hover { color: #ffffff;}a:hover:after,a:hover:before { width: 100%;}我正在参与

    10610

    接口测试平台代码实现9:菜单常显

    菜单作为后台唯一能返回的html,也就是唯一的render函数内的那个html参数。然后在菜单welcome.html 把其他各个页面都当作一个页面 一个来引入。....+) 的值,也就是我们welcome.html的 {{ whichHTML }} ,也就是我们后台函数返回的页面html的真实名字。...让我们切换到浏览器,等待django重启(若中间报错停止了,就手动点击运行),再刷新页面看看效果: 可以看到,左侧的菜单成功显示了。但是我们发现。...我们打开home.html,发现我们设置居中的属性在body,但是作为一个页面加入了welcome.html后,bodycss设置被无视了 既然body不行了,那我弄个div 装这些东西吧,div...然后把下面的内容 剪切到这个div来 变成如下图所示: 然后我们把body居中样式 给挪到div上: 然后回去刷新页面看看吧。

    83320

    一个Web二级菜单的实现(俺新手随便写的)

    (position: relative) (2)给二级菜单设置绝对定位(position: absolute),并设置左侧位移(left)的值为一级菜单的宽度,上放位移(top)的值为0 3、一级菜单的文字和二级菜单的文字水平居中显示...4、一级菜单的文字和二级菜单的文字垂直居中显示 5、一级菜单的每一项和二级菜单的每一项有下边框,边框为点线(dotted) 6、一级菜单的最后一项和二级菜单的最后一项没有下边框(可以使用li:last-child...规范 1、要求页面整洁、美观,与提供的页面效果图、结构保持一致,文字、背景的颜色不统一要求 2、要求HTML代码和CSS代码书写、命名符合规范 整体 1、鼠标移入一级菜单时,二级菜单显示,鼠标移出一级菜单时...,二级菜单隐藏 2、二级菜单显示在一级菜单的右侧 一级菜单 1、一级菜单的文字水平居中显示 2、一级菜单的文字垂直居中显示 3、一级菜单的每一项有下边框,边框为点线(dotted) 4、一级菜单的最后一项没有下边框...二级菜单 1、二级菜单的文字水平居中显示 2、二级菜单的文字垂直居中显示 3、二级菜单的每一项有下边框,边框为点线(dotted) 4、二级菜单的最后一项没有下边框 效果 <!

    1.4K20

    六、WebApp 二手信息站点页面制作(IVX 快速开发教程)

    在 iVX 遵循越下部元素越靠前显示的规则,左右显示左为先右为后、上下显示上为先下为后;若你需要一个元素显示在一个另外一个元素左侧,就需要这个元素在在另一个元素之下。...在这里我们需要注意,该部分距离左侧与右侧有一定距离,此时我们需要创建一个行,命名为广告块;接下来设置这个 海报块行 的 水平对齐 为居中,在其内部创建一个组件 行容器 命名为 广告内容,设置宽度为 90%...,这样这个行就可以居中进行显示;最后两步则是在这个 海报内容行 创建两个行,一个命名为 广告左侧 一个命名为 广告右侧 并且 广告左侧行 宽度为 30% 广告右侧 宽度为 70%,广告左侧 内创建一个...商品发布页制作 商品发布页与登录/注册页大致类似: 商品发布页的 对象树 图如下: 下拉选项组件 位于扩展组件之中,我们点击 扩展组件 进行 下拉选项组件 的添加: 下拉菜单组件 在此作为类型的选择菜单...,添加完 下拉菜单组件 后,我们在 下拉菜单组件 属性栏修改选项列表即可,不同选项之间使用逗号间隔即可完成: 富文本编辑器组件 位于 组件栏 右侧中部,点击即可添加到 富文本行 之中: 6.2.3

    1.9K30

    CSS绝对定位7大应用场景实战案例分享

    今天我们来分享web前端CSS定位的position:absolute绝对定位的应用场景案例的相关场景!...绝对定位是CSS中非常啊哟的知识点,接下来我我们会通过7个不同的层面结合7个不同的案例来展开讲解!...bottom以及left、right 优先级(案例1) 相对于直接父元素定位(案例2) 相对父元素的父元素定位(案例3) 相对于body定位(案例4) 元素自适应父元素宽高(案例5) 设置元素水平垂直居中.../li> 4、相对于body定位-右击显示桌面菜单 当鼠标在浏览器窗口右击时,会在右击的位置显示对应的桌面菜单。...top tag.style.left=x+'px'; tag.style.top=y+'px'; /*右键后,显示右侧桌面菜单

    89020

    「资深前端工程师总结」前端面试知识点大全——html篇

    渲染引擎: 负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。...nav:专门用于菜单导航、链接导航的元素,是 navigator 的缩写。 article:用于表现一篇文章的主体内容,一般为文字集中显示的区域。...在兼容模式(在混杂模式,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 你知道多少种Doctype文档类型?...; } 只需设置父节点属性,无需设置元素 flex有兼容性问题 垂直居中 垂直居中:vertical-align:middle; 父元素高度不确定的文本,图片,块级元素的竖直居中:给父元素设置相同的上下边距实现...transform 为 CSS3 属性,有兼容性问题 同水平居中,这也可以用margin-top实现,原理水平居中 3)、flex + align-items 如果说absolute强大,那flex是最强的

    2K31

    皮肤引擎(HTMLayout)特性说明文档

    主界面的皮肤文件没有使用css文件. HTMLayout 的 Demo 文件包 html_samples\form\ 目录下有大部分控件的范例文件....状态: ・         option:current  –  当前选定的条目. behavior: menu; 菜单行为.此行为定义了一个菜单元素.元素包含的 元素和具有 role=”...菜单元素被调用时, 它的父元素会被设置为调用它的元素. behavior: menu-bar; 菜单栏行为.此行为与菜单的唯一不同. behavior: popup-menu; 打开弹出菜单.具有该行为的元素在点击后会打开元素的第一个...behavior: menu; 菜单行为.此行为定义了一个菜单元素.元素包含的 元素和具有 role=”menu-item” 属性的元素会被当作菜单项对待....behavior: popup-menu; 打开弹出菜单.具有该行为的元素在点击后会打开元素的第一个 或元素作为菜单.

    31640

    前端入门学习--CSS

    class选择器在HTML以class属性表示,在CSS,类选择器以一个点“.”号显示: 下面的例子,所以拥有center类的HTML元素均为居中。...属性有三个值: 正常-正常显示文本 斜体-以斜体显示的文字 倾斜的文字-文字向一边倾斜 p.normal{font-style:normal;} p.italic{font-style:italic...也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和元素。 IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。...使用 clear 属性往文本添加图片廊: .text_line { clear:both; } CSS 布局 - 水平 & 垂直对齐 元素居中对齐 要水平居中对齐一个元素(如 div), 可以使用....dropdown-content 类是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。

    27.7K20

    一、首页第一个首页栏制作【仿淘票票系统前后端完全制作(除支付外)】

    logo 可以暂时给予一个背景色,这个行的高宽为 30px,设置背景色为红色: 此时页面显示如下: 也可以重命名这个行为 logo ,方便之后添加 logo 内容: 接着我们添加下拉菜单列表...,下拉菜单列表在扩展组件,点击需要添加下拉菜单的容器,然后点击扩展组件,点击下拉菜单即可添加: 在下拉菜单的属性,,更改当前选中值,设置选项列表的内容,更改大小即可完成: 接着在右侧的行更改水平对齐属性选择靠右...,此时添加的元素才有靠右显示: 接着添加一个正在热映文本,该文本需要设置其排版,上下左右内边距,否则无法设置其边距框: 接着在这个文本的边框与圆角处设置下边距的颜色为主题色(紫红色...宽度,在此需要主要的是,右侧的购票信息按钮为垂直居中,那么此时就需要给予这个购票信息的高度为撑开,再设置垂直对其为居中(如果你父容器没有设置高度,那么撑开无效): 接着在左侧添加文本,文本的宽度都为...100%,这样就会占据整个行,使其他元素可以自动换行进行显示在此需要注意的是电影评分这一节,我们发现会有颜色的分数,此时可以直接给予一个行,分文本进行显示: 若觉得这个行挨的太近,那么此时只需要给予这些行的内边距一定大小即可

    8.6K20

    Protel99SE快捷键大全

    v+f——缩放视图,以显示所有电路部件 home——以光标位置为中心,刷新屏幕 esc——终止当前正在进行的操作,返回待命状态 backspace——放置导线或多边形时,删除最末一个顶点 delete...——放置导线或多边形时,删除最末一个顶点 ctrl+tab——在打开的各个设计文件文档之间切换 alt+tab——在打开的各个应用程序之间切换 a——弹出edit\align菜单 b——弹出view...\toolbars菜单 e——弹出edit菜单 f——弹出file菜单 h——弹出help菜单 j——弹出edit\jump菜单 l——弹出edit\set location makers菜单...m——弹出edit\move菜单 o——弹出options菜单 p——弹出place菜单 r——弹出reports菜单 s——弹出edit\select菜单 t——弹出tools菜单...ctrl+v——将选定对象以上下边缘的中心线为基准,垂直居中排列 ctrl+shift+h——将选定对象在左右边缘之间,水平均布 ctrl+shift+v——将选定对象在上下边缘之间,垂直均布

    1.7K20

    《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(4)-再识Wireshark

    单击菜单项之一将直接打开相应的捕获文件。 Merge…(合并) 菜单项使您可以将捕获文件合并到当前加载的文件。...Find Previous(查找上一个) Ctrl+B 菜单尝试查找与 “查找数据包…” 的设置匹配的先前数据包。...菜单也可用于自定义我们的配置文件。...将鼠标悬停在此图标上将显示专家信息级别的描述,单击该图标将弹出专家信息对话框。有关对话框和每个专家级别的详细说明,请参见 6.1.3 专家资讯。...TIP 括号之间的值(在此示例为 “ipv6.src”)是所选项目的显示过滤器字段。通过选择不同的数据包详细信息项,您可以更加熟悉显示过滤器字段。

    1.8K31

    Axure RP8入门之基本操作篇

    页面居中是指在浏览器查看原型时页面内容居中显示。 ### 33.设置页面背景(图片/颜色) 在页面【样式】可以编辑页面的背景颜色以及背景图片。...### 42.设置画布的遮罩阴影 在【菜单】-【视图】-【遮罩】的选项列表,取消相应的勾选。比如画布隐藏的元件不显示淡黄色的阴影,则取消【隐藏对象】的勾选。...### 43.显示/隐藏交互与说明编号 在【菜单】-【视图】的选项列表,取消【显示脚注】的勾选。 ### 44.显示/隐藏两侧的功能面板 点击快捷功能的图标即可关闭开启相应的功能面板。...注意,级页面无法单独发布,勾选级页面时会自动勾选父级页面。如果需要单独发布级页面,需要在页面管理面板中将级页面的级别调整到一级页面。...在Web字体设置,点击【+】添加新的配置,勾选【链接到“.CSS”文件】选项,将该字体官方网站提供的“.CSS”文件地址填入超链接即可。这样只要浏览原型时有网络支持,即可正常显示字体。

    5.2K30
    领券