请问怎么去掉最下面一行的边框？怎么调不出二级菜单出来呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单的显示和隐藏效果</title>
<style>
body{
margin: 0px;
}
#top{
width: 100%;
height: 50px;
background-color: black;
position: fixed;
top: 0px;
}
#bottom{
width: 100%;
height: 50px;
background-color: black;
position: fixed;
bottom: 0px;
}
.list{
width: 200px;
height: 160px;
background-color: black;
}
ul{
color: white;
list-style-type: none;
margin-top:50px;
padding: 0;
text-align: center;
border-top:1px solid white;
position:relative;
}
li{
padding:0px;
border-bottom:1px dotted white;
}
a{
font-size: 15px;
color:white;
line-height: 25px;
text-decoration: none;
}
ol{
display:none;
list-style-type: none;
width: 200px;
height: 160px;
background-color: gray;
margin-top:50px;
padding: 0;
text-align: center;
border-bottom:1px dotted white;
position: absolute;
left:180px;
top:0px;
}
li:hover>ol{
display:block;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
<div class="list">
<ul>
<li>
<a href="#">前端开发</a>
<ol>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Vue.js</li>
<li>ReactJs</li>
<li>小程序</li>
<li>Node.js</li>
</ol>
<a href="#">后端开发</a>
<ol>
<li>Jave</li>
<li>SpringBoot</li>
<li>Spring Cloud</li>
<li>Python</li>
<li>爬虫</li>
<li>PHP</li>
</ol>
<a href="#">移动开发</a>
<ol>
<li>Android</li>
<li>ios</li>
<li>React native</li>
<li>WEEX</li>
</ol>
<a href="#">算法/数学</a>
<ol>
<li>算法与数据结构</li>
<li>数学</li>
<li>算法</li>
</ol>
<a href="#">前沿技术</a>
<ol>
<li>微服务</li>
<li>区块链</li>
<li>以太坊</li>
<li>人工智能</li>
<li>机器学习</li>
<li>深度学习</li>
<li>计算机视觉</li>
<li>自然语言处理</li>
<li>数据分析/挖掘</li>
</ol>
<a id="bd" href="#">运维/测试</a>
<ol>
<li>运维</li>
<li>自动化运维</li>
<li>运维工具</li>
<li>中间件</li>
<li>Linux</li>
</ol>
</li>
</ul>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
看了一下你的代码，很不规范。
提几个新手建议：
1、美观性：多余的空行，不推荐大量使用空行来对代码格式化，目前所有开发软件都具备了自动整理代码格式功能，不需要开发人员手动添加空行，影响代码美观性。
2、统一性：在class与id选择的统一，可因个人习惯，在非必要情况下，只使用一种选择器，或者对同级代码块使用相同选择器，方便在CSS中定义，以及后期维护。
3、简洁化：对相同CSS属性的标签，合并在一个｛｝中，优化代码提提高代码可阅读性，简化代码。
4、层级化：使用 > 指向相应子级，用来定义不同的子层级属性，对浏览器友好，且具有更好的代码阅读体验。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
修改后代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单的显示和隐藏效果</title>
<style>
/* 定义页面元素默认值*/
* {
margin: 0;
padding: 0;
font-size: 14px;
}
ul li,
ol li {
list-style-type: none;
width: 200px;
text-align: center;
padding: 4px 0px;
line-height: 30px;
border-bottom: 1px dotted #FFFFFF;
color: #FFFFFF;
}
.top {
width: 100%;
height: 50px;
background-color: black;
position: fixed;
top: 0;
}
.bottom {
width: 100%;
height: 50px;
background-color: black;
position: fixed;
bottom: 0;
}
.list {
/*
.list 不需要设置其它属性，只需要拿到边距即可
width: 200px;
height: 160px;
background-color: black; */
margin-top: 80px;
/* 我们在这里定义距离顶部的距离,因为对于列表来说， .list 这个 div 才是最高层级的父元素，为方便展示效果，这里设置80px */
}
.list>ul>li {
background-color: #000000;
border-bottom: 1px dotted white;
position: relative;
/* 给 li 开启定位,是因为它才是 ol 标签的父级元素 */
}
a {
/* 文字大小建议使用偶数 */
color: white;
text-decoration: none;
}
.list>ul>li>ol>li {
background-color: #555;
}
.list>ul>li>ol {
display: none;
/* 隐藏 */
position: absolute;
/* 开启定位 */
left: 200px;
/* 距左200px */
top: 0;
/* 距上0px */
}
.list>ul>li:hover>ol {
display: block;
}
</style>
</head>
<body>
<div class="top"></div> <!-- 顶部固定 -->
<div class="bottom"></div> <!-- 底部固定 -->
<div class="list">
<!-- 列表 -->
<ul>
<li>
<a href="#">前端开发</a>
<ol>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Vue.js</li>
<li>ReactJs</li>
<li>小程序</li>
<li>Node.js</li>
</ol>
</li>
<li>
<a href="#">后端开发</a>
<ol>
<li>Jave</li>
<li>SpringBoot</li>
<li>Spring Cloud</li>
<li>Python</li>
<li>爬虫</li>
<li>PHP</li>
</ol>
</li>
<li>
<a href="#">移动开发</a>
<ol>
<li>Android</li>
<li>ios</li>
<li>React native</li>
<li>WEEX</li>
</ol>
</li>
<li>
<a href="#">算法/数学</a>
<ol>
<li>算法与数据结构</li>
<li>数学</li>
<li>算法</li>
</ol>
</li>
<li>
<a href="#">前沿技术</a>
<ol>
<li>微服务</li>
<li>区块链</li>
<li>以太坊</li>
<li>人工智能</li>
<li>机器学习</li>
<li>深度学习</li>
<li>计算机视觉</li>
<li>自然语言处理</li>
<li>数据分析/挖掘</li>
</ol>
</li>
<li>
<a id="bd" href="#">运维/测试</a>
<ol>
<li>运维</li>
<li>自动化运维</li>
<li>运维工具</li>
<li>中间件</li>
<li>Linux</li>
</ol>
</li>
</ul>
</div>
</body>
</html>
同学你好，
1，每一个一级菜单使用a标签书写，a标签是行内元素，一次在一行显示，而效果图是让每一个一级菜单独占一行所以要把a标签转为块级元素，并且添加下边框。
效果：
2，去掉最下面一行的边框，可以通过同学设置的id名添加border-bottom: none;的样式就可以实现。
修改：
效果：
3，二级菜单是可以调出来的，同学给ol设置的是同一个样式，都有绝对定位因此所有ol会层叠在一起，并且所以一级菜单都在一个li下面，因此每一个一级菜单是不能单独设置hover的。出现如下效果：
建议：每个一级菜单单独写在一个li下面，每一个ol设置单独的定位显示在对应的一级菜单下面。老师这边只写了第一个一级菜单同学可以参考把下面的效果完善哈~
修改：
效果：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星