CSS 下拉菜单水平显示而不是垂直显示答案

【问题标题】：CSS drop-down menu displays horizontally instead of verticalCSS 下拉菜单水平显示而不是垂直显示
【发布时间】：2018-02-02 19:34:57
【问题描述】：

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>

**我一遍又一遍地尝试解决这个问题，但我找不到解决方案。将下拉菜单修复为垂直显示的任何想法？加上“a:visited”也不起作用。如何解决这个问题？

这是我的 CSS 代码；

a:访问过 {

    color: orange;

    background-color: transparent;

    text-decoration: none;

}

.list-2 {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #228bbb;

.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;

}

这是我的 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>

【问题讨论】：

您好，我建议您使用 HTML/CSS sn-p 而不仅仅是代码块。这将意味着您将能够准确地向我们展示您的代码对您的外观，我已将您的代码复制到 codepen 中，但不确定我所看到的是对您的外观，因为书籍/杂志/新闻即使我没有将鼠标悬停在 New Arrivals 上，论文链接也始终显示。
因为我对这里还很陌生，请你解释一下如何做 HTML/CSS sn-p 的事情？ :/ @TripWire
去编辑你的问题，沿着编辑器的顶行，你可以让你的帖子加粗/斜体等，你应该看到一个带有尖括号的页面图标如果你点击它，它将允许你输入你的 HTML/CSS 并预览它:)

标签： html css drop-down-menu hover

【解决方案1】：

我已更改此 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>

【讨论】：

我怀疑你为什么在下拉项目中创建了一个名为“dir”的类。为什么不将它添加到样式表中？ :/ 因为我认为通过仅编辑该部分而不是编辑整个代码来克服错误 :( 这些 ul 属性更改也会影响我的整个代码并且所有格式都会出错。我正在寻找一种方法在不影响其他列表的情况下编辑该下拉列表:(@TripWire
抱歉这些类可以被删除，更新我的代码以反映这一点，为避免影响您的其他代码，您只需向顶级 div 添加一个 id 并更改 CSS 以引用该 id 而不是ul 但如果你玩 ids/classes，它应该会给你你想要的东西

【解决方案2】：

您的 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>

下次发布代码时，请务必遵守 cmets 中提到的标准！

【讨论】：