对于我的网站，我想使用2个导航栏;一个位于最顶部的水平位置，另一个位于第一个位置，另一个位于此位置的垂直位置，位于文本内容的左侧，以便文本环绕它。我怎么做到这一点？
当我从w3schools.com等网站复制并粘贴CSS代码时，两个代码都会填满。现在，它只是一个导航栏或两个非常奇怪的导航栏。
第二个侧边栏看起来应该类似于维基百科上的超链接。
这是代码。对不起，如果时间太长了。
ul {
width: 100%;
position: fixed;
border: none;
font-size: 20;
font-family: "candara",cambria, sans-serif;
list-style-type: none;
margin-top: -10px;
margin-left: -8px;
margin-right: -8px;
padding: 1px;
overflow: hidden;
background-color: #333;
}
li {
text-align: centre;
border-bottom: none;
}
li:last-child {
border-bottom: none;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
color: black;
background-color: #F5F5F5;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #4682B4;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.one {
background-color:white;
border-style: solid;
border-color:#F5F5F5;
border-width: 1px;
margin-left: 20px;
margin-right: 20px;
padding-left: 30px;
padding-right: 30px
}<html>
<head><title>Introduction to Goldfish</title>
<link rel="icon" href="Images/Goldfish.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="Goldfish.ico" type="image/x-icon"/>
</head>
<body bgcolor="#E6E6FA">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Enter</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<div>
<hr style="height:40pt; visibility:hidden;"/>
<div class="one">
<hr style="height:5pt; visibility:hidden;"/>
<center><img src="Assignment/Aquarium.jpg"</center>
<hr style="height:20pt; visibility:hidden;"/>
<h1 style="text-align:left;"><div style="font-family:candara;">Your First Goldfish</div></h1>
<div style="font-family:candara;"><p style="text-align:left;"><font size="4">Congratulations on your first goldfish! Oh dear, I sound like a grandmother congratulating her daughter on her first child, don't I? Anyway, keeping goldfish as pets is a rewarding, calming and educational experience of people of all ages.
<br>
<br>
Millions of fish are bought each year and it's easy to see why.
<br>
<br>
Goldfish are delightful creatures to watch, bumping against each other to chase after another morsel of food, following you as you walk around, and zooming around the tank.
Additionally, there are so many varieties to choose from, all in different shapes, sizes and colours.
<br>
<br>
Hopefully that got your attention. Now, let me tell you more about these delightful goldies you've bought. Let's just say that it requires more work than just dropping a few flakes into their small glass bowl and changing their tank water once every few months.
</font></p></style>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
我认为您需要在下拉列表中添加<ul> <li> </ li> </ ul>：
在你的HTML中：
<div class="dropdown-content">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
在代码段中执行：
ul {
width: 100%;
position: fixed;
border: none;
font-size: 20;
font-family: "candara",cambria, sans-serif;
list-style-type: none;
margin-top: -10px;
margin-left: -8px;
margin-right: -8px;
padding: 1px;
overflow: hidden;
background-color: #333;
}
li {
text-align: centre;
border-bottom: none;
}
li:last-child {
border-bottom: none;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
color: black;
background-color: #F5F5F5;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #4682B4;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.one {
background-color:white;
border-style: solid;
border-color:#F5F5F5;
border-width: 1px;
margin-left: 20px;
margin-right: 20px;
padding-left: 30px;
padding-right: 30px
}<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Enter</a>
<div class="dropdown-content">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</div>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<ul>
<li><a href="#">Link 1</a></li>
<li> <a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</li>
<div>
<hr style="height:40pt; visibility:hidden;"/>
<div class="one">
<hr style="height:5pt; visibility:hidden;"/>
<center><img src="Assignment/Aquarium.jpg"></center>
<hr style="height:20pt; visibility:hidden;"/>
<h1 style="text-align:left;"><div style="font-family:candara;">Your First Goldfish</div></h1>
<div style="font-family:candara;"><p style="text-align:left;"><font size="4">Congratulations on your first goldfish! Oh dear, I sound like a grandmother congratulating her daughter on her first child, don't I? Anyway, keeping goldfish as pets is a rewarding, calming and educational experience of people of all ages.
<br>
<br>
Millions of fish are bought each year and it's easy to see why.
<br>
<br>
Goldfish are delightful creatures to watch, bumping against each other to chase after another morsel of food, following you as you walk around, and zooming around the tank.
Additionally, there are so many varieties to choose from, all in different shapes, sizes and colours.
<br>
<br>
Hopefully that got your attention. Now, let me tell you more about these delightful goldies you've bought. Let's just say that it requires more work than just dropping a few flakes into their small glass bowl and changing their tank water once every few months.
</font></p>
</div>
希望如您所愿