导航栏 - saobby 网站导航 - 常规

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style>
			.navbar {
			  display: flex;
			  justify-content: space-between;
			  background-color: #f2f2f2;
			  padding: 10px 20px;
			}
<pre><code>		.navbar ul {
		  list-style-type: none;
		  display: flex;
		  align-items: center;
		  margin: 0;
		}
		
		.navbar ul li {
		  margin-right: 10px;
		}
		
		.navbar a {
		  text-decoration: none;
		  color: #333;
		  font-weight: bold;
		  transition: color 0.3s;
		}
		
		.navbar a:hover {
		  color: #ffaaff;
		}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class=&quot;navbar&quot;&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;https://saobby.com&quot;&gt;saobby的主页&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;
				&lt;a href=&quot;#&quot;&gt;saobby其他链接&lt;/a&gt;
				&lt;ul&gt;
					&lt;li&gt;&lt;a href=&quot;https://e.saobby.com&quot;&gt;saobby文件上传&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href=&quot;https://i0.saobby.com/&quot;&gt;saobby github加速访问&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href=&quot;https://www.saobby.com/mys_picbed&quot;&gt;saobby米友社图床&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/li&gt;
		&lt;/ul&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;https://up_1.jajn.saobby.tk/&quot;&gt;我的文件上传&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;
&lt;/body&gt;
</code></pre>
</html>