我观看了一个YouTube视频，介绍了如何使用's not's制作导航菜单。我试图将导航栏的宽度达到100％，以便填充所有设备上的屏幕宽度。我对30px的高度感到满意。我还希望将导航栏居中，因此，如果我添加更多选项卡，它将填充屏幕并自动居中为100％。这里是我的代码：
html：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Kieran's Website</title>
</head>
<body>
<div id="body">
<div style="display:none">
<audio controls autoplay>
<source src="Audio/welcome 2.4.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div id="navMenu">
<ul>
<li><a href="index.html">Learn HTML</a>
<ul>
<li><a href="index.html">1. Things You Need</a></li>
<li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
<li><a href="extrainfo.html">3. Extra Information</a></li>
<li><a href="layout.html">4. HTML Layout</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="index.html">Learn HTML</a>
<ul>
<li><a href="index.html">1. Things You Need</a></li>
<li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
<li><a href="extrainfo.html">3. Extra Information</a></li>
<li><a href="layout.html">4. HTML Layout</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="index.html">Learn HTML</a>
<ul>
<li><a href="index.html">1. Things You Need</a></li>
<li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
<li><a href="extrainfo.html">3. Extra Information</a></li>
<li><a href="layout.html">4. HTML Layout</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="index.html">Learn HTML</a>
<ul>
<li><a href="index.html">1. Things You Need</a></li>
<li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
<li><a href="extrainfo.html">3. Extra Information</a></li>
<li><a href="layout.html">4. HTML Layout</a></li>
</ul>
</li>
</ul>
<br class="clearFloat">
</div>
...还有更多，但它是无兴趣的...
CSS：
#body {
background: url(Images/bigimage.jpg);
background-color:#000000;
background-size: 100% 100%;
width: auto;
height: auto;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
margin-top: 0px;
color: #FFFFFF;
}
#navMenu {
margin: 0 auto;
padding: 0;
width: 100%;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #999;
}
#navMenu ul li a {
text-align: center;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 30px;
width: 150;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #09F;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
#body {
background: url(Images/bigimage.jpg);
background-color:#000000;
background-size: 100% 100%;
width: auto;
height: auto;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px;
margin-top: 0px;
color: #FFFFFF;
}
#navMenu {
margin: 0 auto;
padding: 0;
width: 100%;
text-align:center;
display:table;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: table-cell;
}
#navMenu li {
margin: 0;
padding: 0;
list-style: none;
float: none;
position: relative;
background: #999;
}
#navMenu ul li a {
text-align: center;
font-weight: bold;
font-family: "Comic Sans MS", cursive;
text-decoration: none;
height: 30px;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background: #09F;
}
#navMenu ul li:hover ul li a:hover {
background: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000
}
.clearFloat {
clear: both;
margin: 0;
padding: 0;
}
<ul>
<li><a href="index.html">Learn HTML</a>
<ul>
<li><a href="index.html">1. Things You Need</a></li>
<li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
<li><a href="extrainfo.html">3. Extra Information</a></li>
<li><a href="layout.html">4. HTML Layout</a></li>
</ul>
</li>
</ul><div id="body">
<div style="display:none">
<audio controls autoplay>
<source src="Audio/welcome 2.4.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<img src="Images/web-development-banner.jpg" width="100%" height="400">
<h1 class="webheading">Website Developement</h1>
<div id="navMenu">
<ul>
<li><a href="index.html">Learn HTML</a>
<ul>
<li><a href="index.html">1. Things You Need</a></li>
<li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
<li><a href="extrainfo.html">3. Extra Information</a></li>
<li><a href="layout.html">4. HTML Layout</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="index.html">Learn HTML</a>
<ul>
<li><a href="index.html">1. Things You Need</a></li>
<li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
<li><a href="extrainfo.html">3. Extra Information</a></li>
<li><a href="layout.html">4. HTML Layout</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="index.html">Learn HTML</a>
<ul>
<li><a href="index.html">1. Things You Need</a></li>
<li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
<li><a href="extrainfo.html">3. Extra Information</a></li>
<li><a href="layout.html">4. HTML Layout</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="index.html">Learn HTML</a>
<ul>
<li><a href="index.html">1. Things You Need</a></li>
<li><a href="setup.html">2. Setting Up Your Website Folders</a></li>
<li><a href="extrainfo.html">3. Extra Information</a></li>
<li><a href="layout.html">4. HTML Layout</a></li>
</ul>
</li>
</ul>
<br class="clearFloat">
</div>