HTML下拉菜单
问题描述:
我想创建一个网页的下拉菜单,但我不喜欢它的外观。这里是我的页面的链接,我在这里发布了代码。任何帮助表示赞赏。HTML下拉菜单
http://scf.usc.edu/~diuguid/itp104/homepage.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Project Homepage</title>
</head>
<style>
#outercontainer{
width:820px;
height:1200px;
background-color:orange;
}
#header{
width: 300px;
height: 60px;
margin: 0 auto;
color:red;
font-size:40pt;
}
#drop-nav{
margin-right: 40px;
display: block;
width: 800px;
height: 30px;
background-color: black;
}
a{
display: block;
margin-right: 80px;
}
ul{
list-style: none;
padding: 0px;
margin-right: 40px;
}
ul li{
display: block;
position: relative;
float: left;
border:1px solid blue;
}
li ul{
display: none;
}
ul li a{
display: block;
background: #000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover{
background: blue;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
}
li:hover a{
background: #f00;
}
li:hover li a:hover{
background: #000;
}
#drop-nav li ul li{
border-top: 0px;
}
</style>
<body>
<div id="outercontainer">
<div id="header">
LA SPORTS
</div>
<div id="navbar">
<ul id="drop-nav">
<li><a href="#">NBA</a>
<ul>
<li><a href="nba.html" target="_blank">Lakers</a></li>
<li><a href="nba.html" target="_blank">Clippers</a></li>
</ul>
</li>
<li><a href="#">MLB</a>
<ul>
<li><a href="#">Angels</a></li>
<li><a href="#">Dodgers</a></li>
</ul>
</li>
<li><a href="#">NHL</a>
<ul>
<li><a href="#">Kings</a></li>
</ul>
</li>
<li><a href="#">NFL</a>
<ul>
<li><a href="#">Past Teams</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
答
只需通过这个链接
http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css
这将有助于你作出下拉。
答
添加这是你的CSS:
ul li a {
background: none repeat scroll 0 0 #000;
box-sizing: border-box;
color: #fff;
display: block;
padding: 5px 10px;
text-decoration: none;
white-space: nowrap;
width: 100%;
}
我希望它会帮助你。
+0
这确实有帮助!但下拉部分仍然与下一个菜单选项重叠。你知道如何解决这个问题吗? – 2015-04-06 07:46:39
+0
我没有得到你,它是如何重叠的,你可以展示吗? – 2015-04-06 08:59:24
你能解释你想改变的属性吗? – 2015-04-06 07:23:09
如果您查看我制作的页面的链接,并将鼠标悬停在菜单选项上,则可以看到问题。即使使用每个菜单选项,我也想使其下降。 – 2015-04-06 07:34:24