我有一个导航栏,其中子无序列表嵌套在主导航栏元素下。我的问题是在内部列表上,当我绝对定位时,内部列表以页面为中心,而当我相对定位时,它与父列表内联定位。
我正在尝试让第一个子项直接排列在其父项下方。
/* OUTER LIST STYLING */
div#navbar2 {
position:relative;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #546F8B 1px;
background-color: #546F8B;
}
div#navbar2 ul#navbar {
padding: 0;
margin: 10px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
letter-spacing:1px;
color: #FFF;
white-space: nowrap;
}
div#navbar2 ul#navbar li {
margin: 0 2px;
list-style-type: none;
display: inline;
}
div#navbar2 li a {
text-decoration: none;
color: #fff;
padding: 10px 10px;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:visited {
color: #ffffff;
}
div#navbar2 li a:hover {
color: #000;
background-color: #FDFFC9;
}
/* INNER LIST STYLING */
div#navbar2 ul#navbar li ul.innerlist{
display: none;
color:#000;
}
div#navbar2 ul#navbar li ul.innerlist li{
color:#000;
}
div#navbar2 ul#navbar li:hover ul.innerlist {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 40px 0 0px 0px;
padding: 0px;
color:#000;
}
div#navbar2 li.innerlist a {
text-decoration: none;
color: #000;
padding: 10px 10px;
}
div#navbar2 li.innerlist a:link {
color: #000:
}
div#navbar2 li.innerlist a:visited {
color: #000;
}
div#navbar2 li.innerlist a:hover {
color: #000;
background-color: #FDFFC9;
}
还有我的 html:
<div id="navbar2">
<ul id="navbar">
<li id="index"><a href="index.php">About Rattletree</a></li>
<li id="upcomingshows"><a href="upcomingshows.php">Calendar</a></li>
<li id="booking"><a href="booking.php">Contact</a>
<ul class="innerlist">
<li class="innerlist"><a href="#">Booking</a></li>
<li class="innerlist"><a href="#">press</a></li>
</ul>
</li>
<li id="instruments"><a href="instruments.php">The Band</a>
<ul class="innerlist">
<li class="innerlist"><a href="#">The Instruments</a></li>
<li class="innerlist"><a href="#">The Players</a></li>
</ul>
</li>
<li id="classes"><a href="classes.php">Sights & Sounds</a>
<ul class="innerlist">
<li class="innerlist"><a href="#">Listen</a></li>
<li class="innerlist"><a href="#">photos</a></li>
<li class="innerlist"><a href="#">video</a></li>
</ul>
</li>
<li id"classes"><a href="classes.php">Workshops & Classes</a></li>
</ul>
</div>
感谢您的帮助!
最佳答案
如果您设置了#navbar > li {position:relative;}
和ul.innerlist {position:absolute;} }
那么它及其后代 li
元素将相对于 #navbar > li
而不是页面进行定位。
关于css - 如何设置子无序列表位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2440628/