<!doctype html>
<html>
<head>
<title>My web page</title>
<link href="mycss.css" rel="stylesheet" type="text/css">
<h1>Welcome to my page!</h1>
<body>
<nav id="nav">
<ul>
<li>Home</li>
<li><a href="">About Me!</a>
<ul>
<li><a href="">Me!</a></li>
<li><a href="">Hobbies!</a></li>
<li><a href="">My Photography!</a></li>
<li><a href="">Favorite Music!</a></li>
</ul>
</li>
<li><a href="">Important Links</a>
<ul>
<li><a href="">L1</a></li>
<li><a href="">L2</a></li>
<li><a href="">L3</a></li>
<li><a href="">L4</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<img src="http://http://upload.wikimedia.org/wikipedia/commons/a/a8/Sydney_harbour_bridge_new_south_wales.jpg" width="700" height="400" alt=""/>
<p>About Me</p>
<p>About Me</p>
</body>
</html>
CSS 文件...
* {
text-align:center;
}
h1 {
}
nav {
display: block;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: #202020;
list-style-type: none;
}
p {
display: block;
text-align: center;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
color: 202020;
position: relative;
}
img {
position: relative;
top: -5px;
}
#nav ul li {
display: inline-block;
list-style-type: none;
float: none;
padding-top: 5px;
background-color: #ACFE89;
padding-left: 30px;
padding-right: 30px;
position: relative;
padding-bottom: 5px;
color: #333366;
}
#nav ul li:hover {
color: #0099FF;
}
#nav ul li ul{
display:none;
position: absolute;
left: 0;
top: 100%;
}
#nav ul li ul li{
}
#nav ul li:hover > ul {
display:block;
}
a {
text-decoration: none;
}
您好，我在使用此页面时遇到了一些问题...
下拉菜单乱七八糟。 下拉菜单消失在图像后面。 导航栏上的所有元素都不会在悬停时突出显示。
我是这方面的新手，但我会尽力制作一个很酷的页面。请帮助我!
最佳答案
关于html - 建立网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22206694/