关于CSS的定位问题,求大神解惑。。

qq_36468379 2016-10-21 04:12:10
小白求助。。
没事想写个带下拉的导航菜单
但是下拉显示不正常
以下是我的代码
大神帮忙看一下问题出在哪里了。。
<html>
<head>
<title>导航菜单</title>
<meta http-equiv='content-type' content='text-html;charset=utf-8'>
<script type='text/javascript' language='javscript'>
function show(num){
document.getElementById('pic'+num).style.display = 'block';
}

function hidden(num){
document.getElementById('pic'+num).style.display = 'none';
}
</script>

<style type='text/css'>
body{
font-family:'微软雅黑';
font-size:14px;
margin:0px;
padding:0px;
}

#nav{
width:100%;
height:80px;
background:purple;
}

ul{
margin-left:5%;
padding:0px;
text-align:center;
}

ul li{
list-style-type:none;
display:inline;
font-weight:bold;
width:100px;
height:80px;
text-align:center;
line-height:80px;
}

a{
color:white;
text-decoration:none;
font-size:20px;
}

a:hover{
color:red;
}

#pic1{
display:none;
}

#pic1 li{
display:block;
width:100px;
height:40px;
background:pink;
margin-top:2px;
line-height:40px;
}

#pic1 li a{
font-size:15px;
}
</style>
</head>
<body>
<div id='nav'>
<ul>
<li>
<a href='#'>首页</a>
</li>
<li onmouseover='show(1);' onmouseout='hidden(1);'>
<a href='#'>相册</a>
<ul id='pic1'>
<li><a href="#">同学</a></li>
<li><a href="#">同事</a></li>
<li><a href="#">家人</a></li>
<li><a href="#">私密</a></li>
</ul>
</li>
<li>
<a href='#'>博客</a>
</li>
<li>
<a href='#'>好友</a>
</li>
<li>
<a href='#'>收藏</a>
</li>
<li>
<a href='#'>留言</a>
</li>
<li>
<a href='#'>关于我们</a>
</li>
</ul>
</div>
</body>
</html>
...全文
390 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
俊刚、 2016-10-27
  • 打赏
  • 举报
回复
<html>
<head>
<title>导航菜单</title>
<meta http-equiv='content-type' content='text-html;charset=utf-8'>

<style type='text/css'>
body{
font-family:'微软雅黑';
font-size:14px;
margin:0px;
padding:0px;
}

#nav{
width:100%;
height:200px;
background:purple;
}


#nav ul li{
list-style-type:none;
font-weight:bold;
width:100px;
height:40px;
text-align:center;
line-height:40px;
float:left;
}

#nav ul li:hover ul
{
	display:block;
}

a{
color:white;
text-decoration:none;
font-size:20px;
}

a:hover{
	color:red;
}

#nav ul li ul
{
	display:none;
	position:relative;
	top:0;
	left:-40px;	
}

</style>
</head>
<body>
<div id='nav'>
<ul>
    <li><a href='#'>首页</a></li>
    <li><a href='#'>相册</a>
        <ul>
        <li><a href="#">同学</a></li>
        <li><a href="#">同事</a></li>
        <li><a href="#">家人</a></li>
        <li><a href="#">私密</a></li>
        </ul>
    </li>
    <li><a href='#'>博客</a></li>
    <li><a href='#'>好友</a></li>
    <li><a href='#'>收藏</a></li>
    <li><a href='#'>留言</a></li>
    <li><a href='#'>关于我们</a></li>
</ul>
</div>
</body>
</html>
这个是在你的代码上改的,不知道是不是你想要的结果。我的博客里有一个3级菜单导航的例子,有兴趣可以看看。
xiaohuixiongya 2016-10-22
  • 打赏
  • 举报
回复
共用:li:float:left,display:block,最好不使用display:inline 相册:li:position:relative 相册里ul:position:absolute
十三lucifer 2016-10-21
  • 打赏
  • 举报
回复
#pic1{ display:none; position: absolute; top:90px; }
qq_36468379 2016-10-21
  • 打赏
  • 举报
回复
相册下的下拉 会把整个div撑开。。实在找不到哪里出问题了 。。 求帮忙

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧