我正在尝试为我的网站创建一个导航菜单,链接在页面顶部附近水平对齐,我希望每个链接在下面都有一个简短的描述。当用户点击主链接文本或下面的描述时,它应该将他们带到正确的页面。此外,每个菜单项都应该有一个三角形图标作为项目符号。这是我正在努力实现的目标。
当它只有一行时,我可以使列表水平对齐。但是当我尝试添加更多时它会崩溃。
<nav id = "header-navigation">
<ul>
<li>
<a href="/">
Home
<span class = "subnavigation">Foo!</span>
</a>
</li>
<li>
<a href="/contact">
Contact
<span class = "subnavigation">Bar</span>
</li>
</ul>
</nav><!-- header-navigation -->
在 CSS 中:
nav#header-navigation {
margin-top: 160px;
display: block;
}
nav#header-navigation ul li:before {
content: url("../images/main-navigation-bullet.png");
vertical-align: top;
}
nav#header-navigation ul li {
display: inline;
text-transform: uppercase;
min-height: 22px;
}
nav#header-navigation ul li span.subnavigation {
display: block;
color: #999;
font-size: 90%;
margin-top: -10px;
margin-left: 15px;
}
我还尝试float: left
在 nav#header-navigation ul li 上放置一个,但这会导致列表项浮动到所有地方,例如屏幕顶部,在它们所属的包含 div 之外。
我发现的另一个问题是 Chrome 无法vertical-align: top;
正确显示该属性,因此子导航文本显示在该浏览器的错误位置。
有没有办法让它跨浏览器工作,或者这仍然是最好使用图像完成的事情?