嘿，我是html和Css的初学者，我找不到解决我的问题的方法，我试图通过添加不同的位置多次修复它，但它只是破坏了它。所以我搜索了每一个地方，并没有任何解决我的确切问题，我刚刚开始2天前，所以如果你能给我任何解决这个问题的技巧，我将非常感谢。
这是我的代码：
*{margin: 0%; padding: 0%;}
#whole {
color: white;
font-family: Arial Narrow;
}
#img1
{width:250px;height:250px;
position:absolute; top:10px; left:6px;
}
#small { font-size:30px; text-shadow: 3px 3px 3px black;
padding-left: 24px; padding-bottom:40px;
position:absolute; top:290px}
#bird {font-size:45px; text-shadow: 3px 3px 3px black;
padding-left: 61px;
position:absolute;top:250px;left:27px}
#img2
{width:1600px; height:380px;
}
#menu ul ol
{
float:left;
width:200px ;
height:px;
background-color:red;
opacity:.9;
line-height: 40px;
text-align:center;
font-size:20px;
color: white;
}
#menu ul ol {
}
#menu ul ol a {
text-decoration:none;
color:white;
display:block;}
ul ol a:hover {
background-color:#89cff0;
}
ul ol ul ol {
display:none;
}
ul ol:hover ul ol{
display:block;
} <!DOCTYPE html>
<html>
<head>
<title>not avaliable</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<div id="whole">
<body>
<h1 id="bird">Scar</h1>
<h3 id="small">For digtil Markting</h3>
<img src="imgs/head.jpg" id="img2">
<a href="project1.html"><img src="imgs/web.png" id="img1"></a>
</body>
</div>
<header class="pro">
</header>
<div id="menu">
<ul>
<ol><a href="https://www.google.com/">About us </a>
<ul>
<ol><a>Mission</a></ol>
<ol><a>Out team</a></ol>
<ol><a>Creators</a></ol>
</ul>
</ol>
<ol><a href="#">Services</a>
<ul>
<ol><a>Wbsites</a></ol>
<ol><a>Themes</a></ol>
<ol><a>Security</a></ol>
<ol><a>Cost</a></ol>
</ul>
</ol>
<ol><a href="#">Contact</a></ol>
<ol><a href="#">Careers</a></ol>
</ul>
</div>我不确定直到你知道什么以及你希望它看起来如何。 ..但我编辑你的代码可能有帮助：
另外正如Mihai T所说：你的html结构错了。
*{margin: 0%; padding: 0%;}
#whole {
color: white;
font-family: Arial Narrow;
}
#img1
{width:250px;height:250px;
//position:absolute; top:10px; left:6px;
}
#small { font-size:30px; text-shadow: 3px 3px 3px black;
padding-left: 24px; padding-bottom:40px;
position:absolute; top:290px}
#bird {font-size:45px; text-shadow: 3px 3px 3px black;
padding-left: 61px;
position:absolute;top:250px;left:27px}
#img2
{width:1600px; height:380px;
}
#menu {
position: absolute;
}
#menu ul ol
{
float:left;
width:200px ;
height:px;
background-color:red;
opacity:.9;
line-height: 40px;
text-align:center;
font-size:20px;
color: white;
}
#menu ul ol {
}
#menu ul ol a {
text-decoration:none;
color:white;
display:block;}
ul ol a:hover {
background-color:#89cff0;
}
ul ol ul ol {
display:none;
}
ul ol:hover ul ol{
display:block;
} <!DOCTYPE html>
<html>
<head>
<title>not avaliable</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="whole">
<div id="menu">
<ul>
<ol><a href="https://www.google.com/">About us </a>
<ul>
<ol><a>Mission</a></ol>
<ol><a>Out team</a></ol>
<ol><a>Creators</a></ol>
</ul>
</ol>
<ol><a href="#">Services</a>
<ul>
<ol><a>Wbsites</a></ol>
<ol><a>Themes</a></ol>
<ol><a>Security</a></ol>
<ol><a>Cost</a></ol>
</ul>
</ol>
<ol><a href="#">Contact</a></ol>
<ol><a href="#">Careers</a></ol>
</ul>
</div>
<div>
<h1 id="bird">Scar</h1>
<h3 id="small">For digtil Markting</h3>
<img src="imgs/head.jpg" id="img2">
<a href="project1.html"><img src="imgs/web.png" id="img1"></a>
</div>
</div>
</body>