相对于非直接父容器的绝对定位
我正在尝试创建一个下拉菜单,类似于 NASA 网站上的下拉菜单。我的问题是我试图相对于整个列表定位内联列表项的子列表。无论我做什么,它最终都会相对于容器 li 定位。我添加了部分代码以使其更加清晰。
HTML:
<ul class="mainNavBar headerElement">
<li class="home"> <!--#webmaster The odd-looking closing tags on the list items are intentional. They fix cross-browser compatability issues-->
<hgroup>
<h1>Home</h1>
<h2>Welcome</h2>
</hgroup>
</li
><li id="about">
<hgroup>
<h1>About</h1>
<h2>Our Vision</h2>
</hgroup>
<ul>
<li>
<h1>About FIRST</h1>
</li
><li>
<h1>About the Team</h1>
</li
><li>
<h1>About this Site</h1>
</li
><li>
<h1>FIRST Resources</h1>
</li>
</ul>
</li
><li id="team">
<hgroup>
<h1>Team</h1>
<h2>Who We Are</h2>
</hgroup><!--
<ul>
<li>
<h1>Structure</h1>
</li
><li>
<h1>Subteams</h1>
<ul>
<li>
<h2>Mechanical</h2>
</li
><li>
<h2>Electrical</h2>
</li
><li>
<h2>Programming</h2>
</li
><li>
<h2>Non-Tech</h2>
</li
><li>
<h2>Spirit</h2>
</li
><li>
<h2>Awards</h2>
</li>
</ul>
</li
><li>
<h1>Members</h1>
</li
><li>
<h1>Mentors</h1>
</li
><li>
<h1>Sponsors</h1>
</li>
</ul>-->
</li
><li id="projects">
<hgroup>
<h1>Projects</h1>
<h2>What We Do</h2>
</hgroup><!--
<ul>
<li>
<h1>Robots</h1>
<ol>
<li>
<h2>2011- Geoffery</h2>
</li
><li>
<h2>2010- Ahab</h2>
</li
><li>
<h2>2009- Redemption</h2>
</li
><li>
<h2>More Robots...</h2>
</li>
</ol>
</li
><li>
<h1>Competition</h1>
<ul>
<li>
<h2>Schedule</h2>
</li
><li>
<h2>The Game</h2>
</li
><li>
<h2>The Rules</h2>
</li
><li>
<h2>Scouting</h2>
</li
><li>
<h2>Awards</h2>
</li>
</ul>
</li
><li>
<h1>Outreach</h1>
<ul>
<li>
<h2>FLL Competition</h2>
</li
><li>
<h2>Mentoring</h2>
</li
><li>
<h2>Service</h2>
</li>
</ul>
</li>
</ul>-->
</li
><li id="media">
<hgroup>
<h1>Media</h1>
<h2>Pics & Blog</h2>
</hgroup><!--
<ul>
<li>
<h1>Blog</h1>
</li
><li>
<h1>Photos</h1>
</li
><li>
<h1>Videos</h1>
</li
><li>
<h1>In the News</h1>
</li>
</ul>-->
</li
><li id="resources">
<hgroup>
<h1>Resources</h1>
<h2>Documents, Etc.</h2>
</hgroup><!--
<ul>
<li>
<h1>Documents</h1>
</li
><li>
<h1>Robot Manual</h1>
</li
><li>
<h1>Calendar</h1>
</li>
</ul>-->
</li>
</ul>
和 CSS:
div.header { /*#webmaster @webmaster change to header*/
min-width:844px;
padding-left:146px;
padding-right:0px;
background-color:#003d00;
margin:0px;
height:156px;
position:relative;
}
div.header .headerElement { /*#webmaster @webmaster change to header .headerElement*/
float:left;
position:relative;
}
div.header object.team422Logo { /*#webmaster @webmaster change to header object.team422Logo*/
height:146px;
width:146px;
right:146px;
top:5px;
float:left;
}
ul.mainNavBar {
padding:0px;
margin:0px;
margin-top:0px;
margin-left:-146px;
width:100%;
clear:right;
height:75px;
float:left;
position:relative;
}
ul.mainNavBar > li {
min-width:140px;
width:16.6%;
padding:0px;
margin:0px;
height:75px;
border-left:2px solid #ffffff;
border-bottom:2px solid #ffffff;
margin-left:-2px;
text-indent:5%;
display:inline-block;
vertical-align:text-top;
color:#ffffff;
background-color:#003d00;
}
ul.mainNavBar > li:first-child {
width:17%;
}
ul.mainNavBar > li:hover {
color:#003d00;
background-color:#ffffff;
}
ul.mainNavBar > li > hgroup > h1 {
font-size:22px;
margin-top:10px;
}
ul.mainNavBar > li > hgroup > h2 {
font-size:14px;
}
ul.mainNavBar > li > ul {
position:absolute;
z-index:1;
color:#ffffff;
list-style-type:none;
background-image:url('dropDownBackground.png');
height:250px;
width:100%;
margin:0px;
padding:0px;
}
ul.mainNavBar > li > ul > li {
display:inline-block;
padding:0px;
margin:0px;
}
ul.mainNavBar > li > ul > li > h1 {
font-size:22px;
text-align:center;
margin:0px;
padding:0px;
margin-top:10px;
}
/*
ul.mainNavBar > li ul li ul li {
display:inline-block;
vertical-align:top;
height:240px;
border-top:10px solid #ffffff;
border-left:2px solid #ffffff;
border-bottom:5px solid #ffffff;
margin-left:-2px;
}*/
/*
#about {
left:17%;
}
#team {
left:33.6%;
}
#projects {
left:50.2%;
}
#media {
left:66.8%;
}
#resources {
left:83.4%;
}
*/
#about > ul > li {
width:25%;
padding:0px;
}
#team > ul > li {
width:20%;
padding:0px;
}
#projects > ul > li {
padding:0px;
width:33.3%;
}
#projects > ul > li:first-child {
padding:0px;
width:33.4%;
}
#media > ul > li {
padding:0px;
width:25%;
}
#resources > ul > li {
padding:0px;
width:33.3%;
}
#resources > ul > li:first-child {
padding:0px;
width:33.4%;
}
I'm trying to create a drop-down menu, similar to the one at NASA's website. My problem is that I am trying to position a sub-list of an inline list item relative to the whole list. No matter what I do, it ends up positioning relative to the container li. I'm including a portion of my code to make it more clear.
HTML:
<ul class="mainNavBar headerElement">
<li class="home"> <!--#webmaster The odd-looking closing tags on the list items are intentional. They fix cross-browser compatability issues-->
<hgroup>
<h1>Home</h1>
<h2>Welcome</h2>
</hgroup>
</li
><li id="about">
<hgroup>
<h1>About</h1>
<h2>Our Vision</h2>
</hgroup>
<ul>
<li>
<h1>About FIRST</h1>
</li
><li>
<h1>About the Team</h1>
</li
><li>
<h1>About this Site</h1>
</li
><li>
<h1>FIRST Resources</h1>
</li>
</ul>
</li
><li id="team">
<hgroup>
<h1>Team</h1>
<h2>Who We Are</h2>
</hgroup><!--
<ul>
<li>
<h1>Structure</h1>
</li
><li>
<h1>Subteams</h1>
<ul>
<li>
<h2>Mechanical</h2>
</li
><li>
<h2>Electrical</h2>
</li
><li>
<h2>Programming</h2>
</li
><li>
<h2>Non-Tech</h2>
</li
><li>
<h2>Spirit</h2>
</li
><li>
<h2>Awards</h2>
</li>
</ul>
</li
><li>
<h1>Members</h1>
</li
><li>
<h1>Mentors</h1>
</li
><li>
<h1>Sponsors</h1>
</li>
</ul>-->
</li
><li id="projects">
<hgroup>
<h1>Projects</h1>
<h2>What We Do</h2>
</hgroup><!--
<ul>
<li>
<h1>Robots</h1>
<ol>
<li>
<h2>2011- Geoffery</h2>
</li
><li>
<h2>2010- Ahab</h2>
</li
><li>
<h2>2009- Redemption</h2>
</li
><li>
<h2>More Robots...</h2>
</li>
</ol>
</li
><li>
<h1>Competition</h1>
<ul>
<li>
<h2>Schedule</h2>
</li
><li>
<h2>The Game</h2>
</li
><li>
<h2>The Rules</h2>
</li
><li>
<h2>Scouting</h2>
</li
><li>
<h2>Awards</h2>
</li>
</ul>
</li
><li>
<h1>Outreach</h1>
<ul>
<li>
<h2>FLL Competition</h2>
</li
><li>
<h2>Mentoring</h2>
</li
><li>
<h2>Service</h2>
</li>
</ul>
</li>
</ul>-->
</li
><li id="media">
<hgroup>
<h1>Media</h1>
<h2>Pics & Blog</h2>
</hgroup><!--
<ul>
<li>
<h1>Blog</h1>
</li
><li>
<h1>Photos</h1>
</li
><li>
<h1>Videos</h1>
</li
><li>
<h1>In the News</h1>
</li>
</ul>-->
</li
><li id="resources">
<hgroup>
<h1>Resources</h1>
<h2>Documents, Etc.</h2>
</hgroup><!--
<ul>
<li>
<h1>Documents</h1>
</li
><li>
<h1>Robot Manual</h1>
</li
><li>
<h1>Calendar</h1>
</li>
</ul>-->
</li>
</ul>
And CSS:
div.header { /*#webmaster @webmaster change to header*/
min-width:844px;
padding-left:146px;
padding-right:0px;
background-color:#003d00;
margin:0px;
height:156px;
position:relative;
}
div.header .headerElement { /*#webmaster @webmaster change to header .headerElement*/
float:left;
position:relative;
}
div.header object.team422Logo { /*#webmaster @webmaster change to header object.team422Logo*/
height:146px;
width:146px;
right:146px;
top:5px;
float:left;
}
ul.mainNavBar {
padding:0px;
margin:0px;
margin-top:0px;
margin-left:-146px;
width:100%;
clear:right;
height:75px;
float:left;
position:relative;
}
ul.mainNavBar > li {
min-width:140px;
width:16.6%;
padding:0px;
margin:0px;
height:75px;
border-left:2px solid #ffffff;
border-bottom:2px solid #ffffff;
margin-left:-2px;
text-indent:5%;
display:inline-block;
vertical-align:text-top;
color:#ffffff;
background-color:#003d00;
}
ul.mainNavBar > li:first-child {
width:17%;
}
ul.mainNavBar > li:hover {
color:#003d00;
background-color:#ffffff;
}
ul.mainNavBar > li > hgroup > h1 {
font-size:22px;
margin-top:10px;
}
ul.mainNavBar > li > hgroup > h2 {
font-size:14px;
}
ul.mainNavBar > li > ul {
position:absolute;
z-index:1;
color:#ffffff;
list-style-type:none;
background-image:url('dropDownBackground.png');
height:250px;
width:100%;
margin:0px;
padding:0px;
}
ul.mainNavBar > li > ul > li {
display:inline-block;
padding:0px;
margin:0px;
}
ul.mainNavBar > li > ul > li > h1 {
font-size:22px;
text-align:center;
margin:0px;
padding:0px;
margin-top:10px;
}
/*
ul.mainNavBar > li ul li ul li {
display:inline-block;
vertical-align:top;
height:240px;
border-top:10px solid #ffffff;
border-left:2px solid #ffffff;
border-bottom:5px solid #ffffff;
margin-left:-2px;
}*/
/*
#about {
left:17%;
}
#team {
left:33.6%;
}
#projects {
left:50.2%;
}
#media {
left:66.8%;
}
#resources {
left:83.4%;
}
*/
#about > ul > li {
width:25%;
padding:0px;
}
#team > ul > li {
width:20%;
padding:0px;
}
#projects > ul > li {
padding:0px;
width:33.3%;
}
#projects > ul > li:first-child {
padding:0px;
width:33.4%;
}
#media > ul > li {
padding:0px;
width:25%;
}
#resources > ul > li {
padding:0px;
width:33.3%;
}
#resources > ul > li:first-child {
padding:0px;
width:33.4%;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果您添加位置(即左侧和顶部),它应该可以工作
It should work if you add positions i.e. left and top
您还需要 li 上的相对位置
更新
抱歉,您只需要在 ul.mainNavBar > 上放置顶部和左侧属性即可力> ul css 选择器。
You need position relative on the li's as well
Update
Sorry you'll need to just put a top and left properties on the ul.mainNavBar > li > ul css selector.