我的编码非常基础，并且正在研究具有可见功能的概念证明设计。为此，我希望在窗口左侧创建一个固定的，响应式的CSS下拉菜单，并且主体为可滚动内容。
对此进行补救的道歉。我已经在这部分代码上闲逛了将近两个星期，所以我不确定我所有的编辑是否都已被适当地删除/等。
我的猜测是，这与我使用的CSS特定性有关，但是我无法终生弄清问题所在-目前，我的显示器没有向用户显示配置文件图片在屏幕的右侧，但与固定的侧边栏重叠。
“ col-X”类可以忽略，除非有人可以提供帮助。尝试使用col间隔方法，但是我使用附加类对CSS的特殊性还有进一步的问题，因此尝试使用我已经指定要简化的ID和Class元素。
* {
box-sizing: border-box;
font-family: "Istok Web", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}
/*12 col style for responsive page
#col-1 {
width: 8.33%;
}
#col-2 {
width: 16.66%;
}
#col-3 {
width: 25%;
}
#col-4 {
width: 33.33%;
}
#col-5 {
width: 41.66%;
}
#col-6 {
width: 50%;
}
#col-7 {
width: 58.33%;
}
#col-8 {
width: 66.66%;
}
#col-9 {
width: 75%;
}
#col-10 {
width: 83.33%;
}
#col-11 {
width: 91.66%;
}
#col-12 {
width: 100%;
}
[id*="col-"] {
float: left;
} */
/* Fixed sidenav, full height */
#sidenav {
width: 25%;
height: 100%;
position: fixed;
z-index: 1;
left: 0;
overflow-x: hidden;
padding-top: 17%;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 2%;
}
/*Create a horizontal list with spacing*/
li {
display: block;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display: block;
height: 50px;
text-align: center;
line-height: 50px;
color: #fc9497;
text-decoration: none;
}
/*Style for dropdown links*/
li:hover ul a {
color: #85e2ff;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
color: #00BDF8;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover+.hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
text-decoration: none;
color: #85e2ff;
text-align: center;
padding: 10px 0;
display: none;
float: left;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked~#menu {
display: block;
}
/*Responsive Styles*/
@media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: fixed;
top: 0;
width: 100%;
display: none;
padding-top: 20px;
float: left;
}
/*Remove col-3 width for total page width
#col-3 {
width: 100%;
} */
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
#main {
height: 100%;
padding-top: 1%;
position: relative;
width: 75%;
}
#imagehead {
height: 45%;
width: 100%;
}
.imagemask {
display: block;
max-width: 280px;
right: 0;
height: 180px;
padding: 5px;
overflow: hidden;
}
img {
margin-left: auto;
margin-right: auto;
}
.element {
border: 2% #85e2ff;
border-radius: 2%;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/patientprofile.css">
<meta name="theme-color" content="#ffffff">
<link href='https://fonts.googleapis.com/css?family=Barlow Semi Condensed' rel='stylesheet'>
</head>
<body>
<div id="sidenav">
<label for="show-menu" class="show-menu">Show My Information</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href=#>My Health</a>
<ul class="hidden">
<li><a href=#>My Appointments</a>
<ul class="hidden">
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
</ul>
</li>
<li><a href=#>My Results</a>
<ul class="hidden">
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
</ul>
</li>
<li><a href=#>My Scans</a>
<ul class="hidden">
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=#>My Providers</a>
<ul class="hidden">
<li><a href=#>Dr. Dolittle</a></li>
<li><a href=#>Ms. Shelly Sheldon</a></li>
<li><a href=#>Mr. Titus Anromidon</a></li>
</ul>
</li>
</ul>
</div>
<div id="main">
<div id="imagehead">
<img class="imagemask" src="images/profile.jpg">
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
在下面更新了您的代码。希望这对您有用：）
* {
box-sizing: border-box;
font-family: "Istok Web", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}
/*12 col style for responsive page
#col-1 {
width: 8.33%;
}
#col-2 {
width: 16.66%;
}
#col-3 {
width: 25%;
}
#col-4 {
width: 33.33%;
}
#col-5 {
width: 41.66%;
}
#col-6 {
width: 50%;
}
#col-7 {
width: 58.33%;
}
#col-8 {
width: 66.66%;
}
#col-9 {
width: 75%;
}
#col-10 {
width: 83.33%;
}
#col-11 {
width: 91.66%;
}
#col-12 {
width: 100%;
}
[id*="col-"] {
float: left;
} */
/* Fixed sidenav, full height */
#sidenav {
width: 25%;
height: 100%;
position: fixed;
z-index: 1;
left: 0;
overflow-x: hidden;
padding-top: 10%;
background: #fff;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 2%;
}
/*Create a horizontal list with spacing*/
li {
display: block;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display: block;
height: 50px;
text-align: center;
line-height: 50px;
color: #fc9497;
text-decoration: none;
}
/*Style for dropdown links*/
li:hover ul a {
color: #85e2ff;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
color: #00BDF8;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover+.hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
text-decoration: none;
color: #85e2ff;
text-align: center;
padding: 10px 0;
display: none;
float: left;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked~#menu {
display: block;
}
/*Responsive Styles*/
@media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: fixed;
top: 0;
width: 100%;
display: none;
padding-top: 20px;
float: left;
}
/*Remove col-3 width for total page width
#col-3 {
width: 100%;
} */
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
#main {
height: 100%;
padding-top: 1%;
position: relative;
width: 75%;
float: right;
}
#imagehead {
height: 45%;
width: 100%;
}
.imagemask {
display: block;
max-width: 280px;
right: 0;
height: 180px;
padding: 5px;
overflow: hidden;
}
img {
margin-left: auto;
margin-right: auto;
}
.element {
border: 2% #85e2ff;
border-radius: 2%;
}<div id="sidenav">
<label for="show-menu" class="show-menu">Show My Information</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href=#>My Health</a>
<ul class="hidden">
<li><a href=#>My Appointments</a>
<ul class="hidden">
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
</ul>
</li>
<li><a href=#>My Results</a>
<ul class="hidden">
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
</ul>
</li>
<li><a href=#>My Scans</a>
<ul class="hidden">
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=#>My Providers</a>
<ul class="hidden">
<li><a href=#>Dr. Dolittle</a></li>
<li><a href=#>Ms. Shelly Sheldon</a></li>
<li><a href=#>Mr. Titus Anromidon</a></li>
</ul>
</li>
</ul>
</div>
<div id="main">
<div id="imagehead">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
答案 1 :(得分：0)
希望这会有所帮助，并希望我的假设对您要达到的目标是正确的。
* {
box-sizing: border-box;
font-family: "Istok Web", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
}
/*12 col style for responsive page
#col-1 {
width: 8.33%;
}
#col-2 {
width: 16.66%;
}
#col-3 {
width: 25%;
}
#col-4 {
width: 33.33%;
}
#col-5 {
width: 41.66%;
}
#col-6 {
width: 50%;
}
#col-7 {
width: 58.33%;
}
#col-8 {
width: 66.66%;
}
#col-9 {
width: 75%;
}
#col-10 {
width: 83.33%;
}
#col-11 {
width: 91.66%;
}
#col-12 {
width: 100%;
}
[id*="col-"] {
float: left;
} */
/* Fixed sidenav, full height */
#sidenav {
width: 25%;
height: 100%;
position: fixed;
z-index: 1;
left: 0;
overflow-x: hidden;
padding-top: 17%;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 2%;
}
/*Create a horizontal list with spacing*/
li {
display: block;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display: block;
height: 50px;
text-align: center;
line-height: 50px;
color: #fc9497;
text-decoration: none;
}
/*Style for dropdown links*/
li:hover ul a {
color: #85e2ff;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
color: #00BDF8;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover+.hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
text-decoration: none;
color: #85e2ff;
text-align: center;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked~#menu {
display: block !important;
}
#main {
height: 150vh; /** just to make it scrollable. can be removed */
min-height: 100vh;
padding-top: 1%;
position: relative;
width: 100%;
padding: 16px 16px 16px calc(25% + 16px);
}
#imagehead {
height: 45%;
width: 100%;
}
.imagemask {
display: block;
max-width: 280px;
right: 0;
height: 180px;
padding: 5px;
overflow: hidden;
}
img {
margin-left: auto;
margin-right: auto;
}
.element {
border: 2% #85e2ff;
border-radius: 2%;
}
/*Responsive Styles*/
@media screen and (max-width: 760px) {
#sidenav {
width:100%;
left:0;
top: 0;
right: 0;
height: auto;
min-height: 60px;
padding-top: 16px;
background-color: #fff;
}
#main {
padding-left: 16px;
padding-top: 60px;
}
/*Make dropdown links appear inline*/
ul#menu {
display:none;
}
/*Remove col-3 width for total page width
#col-3 {
width: 100%;
} */
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/patientprofile.css">
<meta name="theme-color" content="#ffffff">
<link href='https://fonts.googleapis.com/css?family=Barlow Semi Condensed' rel='stylesheet'>
</head>
<body>
<div id="sidenav">
<label for="show-menu" class="show-menu">Show My Information</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href=#>My Health</a>
<ul class="hidden">
<li><a href=#>My Appointments</a>
<ul class="hidden">
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
</ul>
</li>
<li><a href=#>My Results</a>
<ul class="hidden">
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
</ul>
</li>
<li><a href=#>My Scans</a>
<ul class="hidden">
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
<li><a href=#>##/##/##</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=#>My Providers</a>
<ul class="hidden">
<li><a href=#>Dr. Dolittle</a></li>
<li><a href=#>Ms. Shelly Sheldon</a></li>
<li><a href=#>Mr. Titus Anromidon</a></li>
</ul>
</li>
</ul>
</div>
<div id="main">
<div id="imagehead">
<h1>Profile</h1>
<hr>
<p>
Lorem ipsum dolor sit amet, pri ea melius eligendi quaestio. Eam ludus
commune no, eu est percipit philosophia, ne has quando ullamcorper. Mel
euismod persequeris eu, eam in duis iusto concludaturque, postea efficiendi
qui at. Nam te noster option efficiendi. Dicam apeirian scribentur ad pri.
</p>
<p>
Lorem ipsum dolor sit amet, pri ea melius eligendi quaestio. Eam ludus
commune no, eu est percipit philosophia, ne has quando ullamcorper. Mel
euismod persequeris eu, eam in duis iusto concludaturque, postea efficiendi
qui at. Nam te noster option efficiendi. Dicam apeirian scribentur ad pri.
</p>
<p>
Lorem ipsum dolor sit amet, pri ea melius eligendi quaestio. Eam ludus
commune no, eu est percipit philosophia, ne has quando ullamcorper. Mel
euismod persequeris eu, eam in duis iusto concludaturque, postea efficiendi
qui at. Nam te noster option efficiendi. Dicam apeirian scribentur ad pri.
</p>
<p>
Lorem ipsum dolor sit amet, pri ea melius eligendi quaestio. Eam ludus
commune no, eu est percipit philosophia, ne has quando ullamcorper. Mel
euismod persequeris eu, eam in duis iusto concludaturque, postea efficiendi
qui at. Nam te noster option efficiendi. Dicam apeirian scribentur ad pri.
</p>
</div>
</div>
</body>
</html>