HTML 带无序列表的导航栏与其他方法

Question

来自 W3 Schools，它显示并解释了如何使用无序列表制作 导航栏 。我个人不使用这种方法，而是使用图片来支持我的导航列表中的每个按钮。我知道很多其他人使用许多不同的方式。

哪种方法最好最简单？

无序列表链接方法
使用图片 对于链接
为链接制作普通锚元素
等...

来自一个可能过时的 YouTube 视频，它说 Internet Explorer 没有更新到 HTML5，因此最好使用 无序列表 因为它无法读取导航元素。

我个人已经尝试过其中一些方法，如果我要制作自定义的、更有趣的按钮，对我来说最好的方法是使用图片方法。对我来说无序列表方法更复杂，看起来更经典。

这些方法中哪一种是最简单、最效率的方法，并提供最好的结果?

Answer 1

就个人而言，我同时使用了这三个！

取决于你的目标，当我使用 ul 时，通常是在 css.

中制作一种纯下拉菜单

<a href="#">Menu1</a>
<ul>
    <li><a href="#"><img alt="duck1" src="duck1.jpg"></a></li>
    <li><a href="#"><img alt="duck2" src="duck2.jpg"></a></li>
    <li><a href="#"><img alt="duck3" src="duck3.jpg"></a></li>
</ul>

CSS

ul > li { 
    display:none;
}

a:hover + ul > li {
    display:block;
}

HTML 带无序列表的导航栏与其他方法

HTML navigation bar with unordered list vs other methods

html

css

nav