简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

css hover下拉菜单_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 12:17:41
原创
1168 人浏览过

本帖最后由 BaronZ 于 2012-12-19 15:41:05 编辑

我的代码现在是鼠标移过root的时候，下拉菜单出现在root下面。我想改成鼠标移过去的时候，下拉菜单出现在root的右边（和root同一行），可以吗?要怎么改代码？ 
  ul.cssMenu, ul.cssMenu ul{	list-style:none;	margin:0; 	padding:-10;	position: relative;}ul.cssMenu ul 						{         display:none; /*initially menu item is hidden*/        position: absolute; /*absolute positioning is important for menu to float*/        }ul.cssMenu li:hover > ul 			{ 	display:block;	background-color:red;}
登录后复制

<html><link href="1.css" type="text/css" rel="stylesheet" /><ul class="cssMenu">	<li>		<font color="blue">root<font>           		<ul>			<li><a href=#>sub</a></li>		</ul>	</li></ul></html>
登录后复制


回复讨论(解决方案)

感谢分享经验 

ul.cssMenu li:hover > ul            {     display:block;    background-color:red;    top:-150px;    left:50px;}
登录后复制

好像是定位有问题

相关标签：
css hover下拉菜单
来源：php.cn
上一篇：为什么ie6下绝对定位div不居中？_html/css_WEB-ITnose 下一篇：图片路径问题_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在导航栏中居中显示下拉菜单 我制作了这个CSS/HTML。.navbar{width:100%;background-color:rgb(151,44,44);overflow:auto;}.navbara{...
来自于 2024-04-04 18:24:52
0
1
338
个性化 Select2 Dropdown 的外观 在我看来，我使用select2Combobox作为我的下拉菜单。在这里，当Country选择更改时，我将该选定的id传递给JSON结果并获取结果，分配给省份组合框。发生这种情况时，...
来自于 2024-04-03 11:27:22
0
1
338
Vanilla JS setTimeout()：识别错误行为 我的汉堡式菜单上有一个用HTML、CSS和VanillaJavaScript编写的动画。预期结果当您单击汉堡菜单按钮时，应该发生以下事件：单击汉堡菜单图标时：main旋转180°并...
来自于 2024-04-02 20:44:40
0
1
284
我的 bootstrap 4 下拉菜单不起作用，我不知道如何解决它 我对HTML非常陌生，几个小时以来我一直在努力让我的下拉菜单正常工作。我搜索了许多面临类似问题的帖子，但仍然找不到并解决问题。我不确定问题是否也是由我的脚本引起的<linkr...
来自于 2024-04-02 18:12:59
0
1
283
确保下拉列表始终显示在其父项的顶部，位置：相对 我正在尝试实现如下所示的目标。容器包含一组下拉列表，单击时将激活下拉菜单，并且下拉菜单位于每个父级的顶部。面临的问题：我现在遇到的问题是下拉菜单隐藏在容器内，而不是出现在父级别的顶...
来自于 2024-04-01 18:43:16
0
1
316
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！