为什么<ul><li>也能做下拉条？
liol不是无序有序列表吗？怎么又可以做鼠标移动上去可以下拉展开的那种？请老师讲解一下。<olstyle="border:0"></ol>我也不懂<html><head>...
li ol 不是 无序 有序列表吗？怎么又可以做鼠标移动上去可以下拉展开的那种？
请老师讲解 一下。<ol style="border:0"> </ol>我也不懂
<html>
<head>
<title> New Document </title>
<style>
*{padding:0;
margin:0;
}
li,ol{list-style-type:none}
.nav{margin:20px}
li{width:120px;
float:left;
cursor:pointer;
height:30px;
line-height:30px;
border:1px solid red;
margin:10px -1px 5px 10px;
text-align:center
}
li ul{display:none;
width:400px;
border:1px solid red;
margin-left:-1px;
}
li ul ol{width:120px;
float:left;
cursor:pointer;
height:30px;
line-height:30px;
margin:10px -1px 5px 0;
text-align:center
}
li:hover ul{display:block}
ol{background:yellow}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>首页
<ul>
<ol>1.0首页</ol>
<ol>首页</ol>
<ol>首页</ol>
<ol>首页</ol>
<ol>首页</ol>
<ol>首页</ol>
<ol>首页</ol>
<ol style="border:0"> </ol>
<ol>首页</ol>
<div style="clear:both"></div>
</ul>
</li>
</div>
</body>
</html> 展开
请老师讲解 一下。<ol style="border:0"> </ol>我也不懂
<html>
<head>
<title> New Document </title>
<style>
*{padding:0;
margin:0;
}
li,ol{list-style-type:none}
.nav{margin:20px}
li{width:120px;
float:left;
cursor:pointer;
height:30px;
line-height:30px;
border:1px solid red;
margin:10px -1px 5px 10px;
text-align:center
}
li ul{display:none;
width:400px;
border:1px solid red;
margin-left:-1px;
}
li ul ol{width:120px;
float:left;
cursor:pointer;
height:30px;
line-height:30px;
margin:10px -1px 5px 0;
text-align:center
}
li:hover ul{display:block}
ol{background:yellow}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>首页
<ul>
<ol>1.0首页</ol>
<ol>首页</ol>
<ol>首页</ol>
<ol>首页</ol>
<ol>首页</ol>
<ol>首页</ol>
<ol>首页</ol>
<ol style="border:0"> </ol>
<ol>首页</ol>
<div style="clear:both"></div>
</ul>
</li>
</div>
</body>
</html> 展开
2个回答
展开全部
抛开 li ol 是 无序 有序列表，这只是一种形象的说法，它们只是html标签，不过是有一些原始的属性规范了一些行为。
鼠标移动上去可以下拉展开-----这是你写的css作用出来的效果。
li ul{display:none;
width:400px;
border:1px solid red;
margin-left:-1px;
}
最开始，你让li下的ul里面的内容不显示（display:none）.
li:hover ul{display:block}
表示：当鼠标悬停在li上时，li里面的ul的内容以块的形式显示（display:block）
ul就是下拉菜单。
<ol style="border:0"> </ol> ,style是样式，说明这个ol具有哪些样式，border:0，这个ol的边框是0，即没有边框。
ps：以上说明，你不懂css，所以代码看不懂，找份css文档对照看一下，就明白了。
鼠标移动上去可以下拉展开-----这是你写的css作用出来的效果。
li ul{display:none;
width:400px;
border:1px solid red;
margin-left:-1px;
}
最开始，你让li下的ul里面的内容不显示（display:none）.
li:hover ul{display:block}
表示：当鼠标悬停在li上时，li里面的ul的内容以块的形式显示（display:block）
ul就是下拉菜单。
<ol style="border:0"> </ol> ,style是样式，说明这个ol具有哪些样式，border:0，这个ol的边框是0，即没有边框。
ps：以上说明，你不懂css，所以代码看不懂，找份css文档对照看一下，就明白了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不仅仅ul和li能做下拉条，div p span等所有html标签都可以做成下拉条；
这些标签需要js模拟下拉，控制值的变动；
这些标签可以css控制，全局浮动类似下拉浮动在页面之上，然后js监控点击事件，把值放到隐藏的input中即可。
要理解各种标签的概念，ul li h1 标签都可以使用div+css样式表现出来，你也可以理解为这些标签都是定义好css的div。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
