-4
my sad navbar here我不能让我的导航栏水平显示，并试图与浮动，位置和显示混乱：内联块。它采用ul格式，中间有3个按钮，并带有下拉菜单。请让我知道，如果你看到我做错了什么，谢谢！导航栏不会水平显示？
/* NAVIGATION BAR */
#nav {
width: 1100px;
height: 200px;
float: left;
font-weight: bold;
font-size: 24px;
float: left;
}
# nav button {
display: inline-block;
position: relative;
width: 100%;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%
background-color: white;
color: rgb(36,60,131);
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
display: inline-block;
}
li {
float: left;
}
/* nav bar hover */
li a {
display: inline-block;
color: #000;c
text-align: center;
padding: 8px 16px;
background-color: white;
color: rgb(36,60,131);
text-decoration: none;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
float: left;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
/* changes link color on hover */
li a:hover, .dropdown:hover .dropbtn {
background-color: rgb(36,60,131);
color: white;
}
/* highlights active page on nav bar */
.active {
background-color: rgb(36,60,131);
color: white;
}
li.dropdown {
display: inline-block;
}
/* dropdown menu */
.dropbtn {
display: inline-block;
background-color: white;
text-align: center;
padding: 8px 16px;
color: rgb(36,60,131);
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-decoration: none;
font-size: 24px;
border: none;
font-weight: bold;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(36,60,131);
color: white;
min-width: 160px;
}
.dropdown-content a {
padding: 8px 16px;
background-color: white;
color: rgb(36,60,131);
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: rgb(36,60,131);
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
and my HTML is here
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/saferide.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<div id="nav">
<ul>
<li style="float:left"><a href="index.html">home</a></li>
<div class="dropdown">
<button class="dropbtn">about us</button>
<div class="dropdown-content">
<a href="history.html">safe ride history</a>
<a href="#">meet our dispatchers</a>
<a href="#">core staff</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">how we operate</button>
<div class="dropdown-content">
<a href="#">rules & policies</a>
<a href="#">how to schedule a ride</a>
<a href="#">safe ride boundaries</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">get involved</button>
<div class="dropdown-content">
<a href="#">volunteer or intern</a>
<a href="#">resources</a>
</div>
</div>
<li><a href="contact.html">contact us</a></li>
</ul>
</div>