我有一个导航栏与儿童无序列表嵌套在主导航栏项下。我的问题是在内部列表中,当我绝对定位,内部列表居中到页面,并且当我定位相对时,它与父列表内联定位。如何设置子无序列表的位置?
我想让第一个子项直接排列在它的父项下。
/* 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:
感谢您的帮助!
2010-03-14
Joel