Css 如何相对于父级/第一级菜单定位第二级菜单?
我目前使用的位置:绝对;对于第二级菜单,因为当我使用位置:相对;第一级菜单已断开(在悬停项是换行符之后?) 但我想实现的是,显示的第二级菜单相对于第一级菜单中的悬停项进行定位(直接在它下面,也是水平的) 目前我的菜单是这样的:Css 如何相对于父级/第一级菜单定位第二级菜单?,css,navigation,css-float,Css,Navigation,Css Float,我目前使用的位置:绝对;对于第二级菜单,因为当我使用位置:相对;第一级菜单已断开(在悬停项是换行符之后?) 但我想实现的是,显示的第二级菜单相对于第一级菜单中的悬停项进行定位(直接在它下面,也是水平的) 目前我的菜单是这样的: Home / Test / News Test_Sub1 / Test_Sub2 / Test_Sub3 但应该是 Home / Test / News Test_Sub1 / Test_Sub2 / Test_Sub3 这是我的CSS代码 #navig
Home / Test / News
Test_Sub1 / Test_Sub2 / Test_Sub3
但应该是
Home / Test / News
Test_Sub1 / Test_Sub2 / Test_Sub3
这是我的CSS代码
#navigation ul.menu {
list-style-type:none;
list-style:none;
/*overflow:hidden;*/
width:980px;
}
#navigation li {
list-style:none;
list-style-type:none;
padding:0;
float:left;
display:inline;
height:32px;
}
#navigation ul.menu {
width:100%;
height:32px;
border-bottom: 1px solid #cecbcd;
}
/* style list as navigation using float:left */
/* set distance from left corner to the first li item */
#navigation ul.menu li:first-child {
margin-left:150px;
}
#navigation ul.menu li ul li:first-child {
margin-left:0px;
}
#navigation ul.menu li ul {display:none; position:absolute; top:32px; left: 10em; float:left; border:none;}
#navigation ul.menu li:hover ul {display:inline;}
#navigation ul.menu li:hover ul li {height:45; padding-top:8px; float:left; position: relative;}
#navigation ul.menu li:hover ul li a {float:left;}
#navigation ul.menu li ul li {display:inline; background-image:none; float:left; position:relative; left: 5em; }
#navigation ul.menu li a {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li ul li a {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li ul li a:hover, #navigation ul.menu li ul li.active-trail a.active-trail {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:underline;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li a:hover {
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
height: 32px;
background-image:url('../images/navi_active.png');
background-position:center;
background-repeat:no-repeat;
}
#navigation ul.menu li a.active, #navigation ul.menu li.active-trail a.active-trail {
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
height: 32px;
background-image:url('../images/navi_active.png');
background-position:center;
background-repeat:no-repeat;
}
div.region-header ul.menu {
display:none;
}
试试这个:
编辑:
我已经算出了你的代码:
您已定义:
#navigation ul.menu li:hover ul {display:inline;}
将其发送至:
#navigation ul.menu li:hover ul {display:block;}
同样在这方面,
#navigation ul.menu li ul li {display:inline; background-image:none; float:left; position:relative; left: 5em; }
删除left:5em
以获得如下结果:
编辑:
这一行的更多内容:
#navigation ul.menu li ul {display:none; position:absolute; top:32px; float:left; border:none; background:red; left: 10em;}
移除left:10em
以获得ul
相对位置
请参见演示:
希望它能解决问题。你的html是什么?你能提供唯一与菜单相关的css吗。你的问题很长。