问题描述

初学CSS，打算做一个下拉菜单。目标结果是：

“下拉菜单”那个显示的就是一个下拉菜单。

但是如果在CSS中把下拉菜单周围的border去掉，内容部分就无法占满整行：

问题出现的环境背景及自己尝试过哪些方法

怀疑和.topnav中设置的overflow: hidden;属性有关，但是把这个属性去掉，下拉菜单就被隐藏了

相关代码

layout.html

* {

box-sizing: border-box;

}

body {

font-family: Arial, Helvetica, sans-serif;

padding: 10px;

background: #f1f1f1;

}

/* 头部标题 */

.header {

padding: 30px;

text-align: center;

background: white;

}

.header h1 {

font-size: 50px;

}

/* 导航条 */

.topnav {

/* overflow: hidden; */

background-color: #333;

}

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

.topnav a:hover {

background-color: #ddd;

color: black;

}

/* - 下拉菜单 */

.dropbtn {

/* 同.topnav,a有一样的颜色 */

background-color: #333;

color: #f2f2f2;

padding: 13px 16px;

border: none;

font-size: 16px;

}

.dropdown {

position: relative;

display: inline-block;

border: 1px solid; /*必须有这个，否则内容就不会分隔开，为什么？*/

}

.dropdown a {

float: none;

}

.dropdown:hover .dropbtn {

background-color: #ddd;

color: black;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #333;

min-width: 100px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown:hover .dropdown-content {

display: block;

}

/* 内容区域 */

.leftcolumn {

float: left;

width: 75%;

}

.rightcolumn {

float: left;

width: 25%;

background-color: #f1f1f1;

padding-left: 20px;

}

.fakeimg {

background-color: #aaa;

width: 100%;

padding: 20px;

}

.card {

background-color: white;

padding: 20px;

margin-top: 20px;

}

.row:after {

content: "";

display: table;

clear: both;

}

/* 底部 */

.footer {

padding: 20px;

text-align: center;

background: #ddd;

margin-top: 20px;

}

/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */

/* @media screen and (max-width: 800px) {

.leftcolumn, .rightcolumn {

width: 100%;

padding: 0;

}

} */

/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */

/* @media screen and (max-width: 400px) {

.topnav a {

float: none;

width: 100%;

}

} */

我的网页

重置浏览器大小查看效果。

链接

链接

链接

下拉菜单

菜单1

菜单2

菜单3

链接

文章标题

2019 年 4 月 17日

图片

一些文本...

菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！

文章标题

2019 年 4 月 17日

图片

一些文本...

菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！

关于我

图片

关于我的一些信息..

热门文章

图片

图片

图片

关注我

一些文本...

底部区域

你期待的结果是什么？实际看到的错误信息又是什么？

希望能有一种方法可以去掉.dropdown中的border属性，同时让内容部分能够左右显示，不是上下显示。