**
body
{
background-color: #9cb4c0;
background-size: 100% 100%;
}
.div-1
{
float: right;
padding: 20px 10px;
}
h2
{
text-align: right;
}
h3
{
text-align: left;
color: white;
}
a:link
{
color: rgb(7, 19, 86);
background-color: transparent;
text-decoration: none;
font-size: 20px;
}
a:visited
{
color: orange;
background-color: transparent;
text-decoration: none;
}
a:active
{
color: rgb(216, 120, 10);
background-color: transparent;
text-decoration: underline;
}
.list-1
{
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
text-align : right;
}
.list-1:active
{
box-shadow: 0 5px #666;
transform: translateY(4px);
}
.list-1 li a
{
float: right;
display: block;
padding: 8px;
text-align: center;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
color: #666;
}
.list-1 li a:hover
{
background-color: #ff6c00;
}
.list-2
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #228bbb;
}
.list-2 a
{
border-right: 1px solid #bbb;
float: left;
display: block;
padding: 14px 16px;
color: rgb(7, 19, 86);
}
.drop-button
{
display: inline-block;
text-align: center;
padding: 16px;
border: none;
cursor: pointer;
}
.dropdown
{
display: block;
margin: 0;
padding: 0;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content
{
display: inline-block;
}
.list-2 a:hover:not(.active)
{
background-color: #ff6c00;
}
.list-2 .active
{
background-color: #ff6c00;
}
.list-3
{
color: rgb(7, 19, 86);
list-style-type: disk;
}
.list-4
{
color: rgb(9, 91, 130);
list-style-type: disk;
font-size: 20px;
}
.div-2Dropdown
{
position: relative;
display: inline-block;
}
.div-2Dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: opx 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.div-2Dropdown:hover .div-2Dropdown-content
{
display: block;
}
.desc
{
padding: 3px;
text-align: center;
}
table
{
float: left;
padding: 10px;
border: 10px;
border-color: rgb(7, 15, 79);
margin: 10px;
border-width: 2px;
border-style: groove;
}
.button
{
background-color: #2980B9;
color: white;
font-family: arial;
border: none;
padding: 10px 10px;
text-align: center;
display: inline-block;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-style: italic;
outline: none;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button:hover
{
background-color: #2980B9;
border: 2px solid #2980B9;
box-shadow: 0px 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.button:active
{
background-color: #2980B9;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
footer
{
clear: both;
position: relative;
z-index: 10;
height: 1em;
margin-top: -3em;
text-align: center;
background-color: #228bbb;
color: black;
}<!DOCTYPE HTML>
<html>
<head>
<title> SLIIT LIBRARY </title>
<link rel = "stylesheet" type = "text/css" href = "Style.css" />
</head>
<body>
<img src = "SLIIT.png" width = "300" height = "200">
<div class = "div-1">
<ul class = "list-1">
<li> <a href = "/Login/" target = "_blank"> Login </a>
<a href = "Login to the system.html" target = "_blank"> Register </a>
</li>
</ul>
<h2> <a href = "/SLIIT LIBRARY/" target = "_blank"> SLIIT LIBRARY </h2> </a>
</div>
<ul class = "list-2">
<li> <a href = "/Home/" target = "_blank"> Home </a> </li>
<li style = "float : right"> <a class = "active" href = "/About Us/" target = "_blank"> About Us</a> </li>
<li> <a href = "/Membership/" target = "_blank"> Membership </a> </li>
<li> <a href = "/Staff/" target = "_blank"> Staff </a> </li>
<li> <a href = "/Search/" target = "_blank"> Search </a> </li>
<li class = "dropdown"> <a href = "javascript:void(0)" class = "drop-button"> New Arrivals </button> </a>
<div class = "dropdown-content">
<a href = "/Books/" target = "_blank"> Books </a>
<a href = "/Magazines/" target = "_blank"> Magazines </a>
<a href = "/News Papers/" target = "_blank"> News Papers </a>
</div>
</li>
</ul>
<div style = "float : left ; background-color : #39a2d2 ; width : 300px ; height : 950px ; margin : auto ; margin-right : 2em">
</body>
</html>
**我已经反复尝试克服这个问题，但我无法找到解决方案。有任何想法将下拉菜单固定到它的垂直显示屏上吗？加上＆＃34; a：访问过＆＃34;也没有工作。如何解决这个问题？
这是我的CSS代码;
一个：访问 {
color: orange;
background-color: transparent;
text-decoration: none;
}
.LIST -2- {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #228bbb;
.drop按钮 {
display: inline-block;
text-align: center;
padding: 16px;
border: none;
cursor: pointer;
}
.dropdown {
display: block;
margin: 0;
padding: 0;
}
.dropdown内容 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a：悬停 {
background-color: #f1f1f1;
}
.dropdown：悬停.dropdown-content {
display: inline-block;
}
这是我的HTML代码;
<ul class = "list-2">
<li> <a href = "/Home/" target = "_blank"> Home </a> </li>
<li style = "float : right"> <a class = "active" href = "/About Us/" target = "_blank"> About Us</a> </li>
<li> <a href = "/Membership/" target = "_blank"> Membership </a> </li>
<li> <a href = "/Staff/" target = "_blank"> Staff </a> </li>
<li> <a href = "/Search/" target = "_blank"> Search </a> </li>
<li class = "dropdown"> <a href = "javascript:void(0)" class = "drop-button"> New Arrivals </button> </a>
<div class = "dropdown-content">
<a href = "/Books/" target = "_blank"> Books </a>
<a href = "/Magazines/" target = "_blank"> Magazines </a>
<a href = "/News Papers/" target = "_blank"> News Papers </a>
</div>
</li>
答案 0 :(得分：0)
HTML的结构方式使它看起来不对劲。 请尝试以下方法：
<ul class = "list-2">
<li> <a href = "/Home/" target = "_blank"> Home </a> </li>
<li style = "float : right"> <a class = "active" href = "/About Us/" target = "_blank"> About Us</a> </li>
<li> <a href = "/Membership/" target = "_blank"> Membership </a> </li>
<li> <a href = "/Staff/" target = "_blank"> Staff </a> </li>
<li> <a href = "/Search/" target = "_blank"> Search </a> </li>
<li class="dropdown">
<a href = "javascript:void(0)" class = "drop-button"> New Arrivals </a>
<ul class="list-2 dropdown-content">
<li><a href = "/Books/" target = "_blank"> Books </a></li>
<li><a href = "/Magazines/" target = "_blank"> Magazines </a></li>
<li><a href = "/News Papers/" target = "_blank"> News Papers </a></li>
</ul>
</li>
</ul>
请务必遵循下次发布代码时评论中提到的标准！
答案 1 :(得分：0)
我已修改此codepen示例以适合您的方式：https://codepen.io/philhoyt/pen/ujHzd
您需要重新设置菜单，但它应该按照您的预期运行：
ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
width: 100%;
}
ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
ul li:hover
{
background:#f6f6f6
}
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
ul ul li
{
float:none;
width:200px
}
.right-menu-item
{
float: right;
}
ul ul a
{
line-height:120%;
padding:10px 15px
}
ul ul ul
{
top:0;
left:100%
}
ul li:hover > ul
{
display:block
}<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">New Arrivals</a>
<ul>
<li><a href="#">Books</a></li>
<li><a href="#">Magazines</a></li>
<li><a href="#">News Papers</a></li>
</ul>
</li>
<li class="right-menu-item"><a href="#">About Us</a></li>
</ul>