Question

我有两个下拉列表，它们按预期工作（它们在悬停时显示内容）但是，如果我点击列表外侧（左侧）区域，下拉列表仍会显示。

我已经尝试修复CSS但我无法确定问题所在。

对于样式下拉列表是否有更好的方法，因为我还是CSS新手。

更新：

在firefox中测试它，我无法重新创建该问题。如何确保在所有浏览器中始终如一？

.dropbtn {
    color: white;
    width: 200px;
    margin-top: 160px;
    margin-left: 276px;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-align: left;
    font-weight: 900;
    background: rgba(0, 173, 239, 1);
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 50px 50px 50px 50px;
    position: relative;
    z-index: 2;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 480px;
    height: 0px;
    background: antiquewhite;
}

.dropdown-content {
    display: none;
    position: relative;
    z-index: 1;
    background-color: #f9f9f9;
    /* min-width: 160px; */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 5px;
    top: -20px;
    margin-left: 283px;
}

.sphere {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    vertical-align: top;
    /* position: relative; */
    background: black;
    display: inline-block;
    position: relative;
    margin-top: 165px;
    margin-left: -55px;
    z-index: 2;
}
.dropdown-content a {
    table-layout: fixed;
    color: black;
    margin-left: -1px;
    padding: 12px 16px 13px 30px;
    text-decoration: none;
    display: block;
    border: 1px solid #000;
    border-top: none;
    font-size: 21px;
}
.dropdown-content a:first-child {
  padding-top: 35px;
  background: url("Images/sidearrow.png") no-repeat 7px 36px;
}

.dropdown a {
	background:url("Images/sidearrow.png") no-repeat 7px;
}

.dropdown-content a:first-child:hover {
  padding-top: 35px;
  background: url("Images/sidewhite.png") no-repeat 3px 36px;
  color:black;
  background-color: rgb(255,131,0);
}

.dropdown-content a:hover {
	background:url("Images/sidewhite.png") no-repeat 3px;
	background-color: rgb(255,131,0);
	color:white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

div#arrow {
    position: absolute;
    margin-left: 10px;
    margin-top: 11px;
}


/* SENTINAL */


.dropbtn-sentinal {
    color: white;
    width: 200px;
    margin-top: 160px;
    margin-left: 276px;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-align: left;
    font-weight: 900;
    background: rgba(0, 173, 239, 1);
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 50px 50px 50px 50px;
    position: relative;
    z-index: 2;
}

.dropdown-sentinal{
    position: relative;
    display: inline-block;
    width: 480px;
    height: 0px;
    background: antiquewhite;
}

.dropdown-content-sentinal {
    display: none;
    position: relative;
    z-index: 1;
    background-color: #f9f9f9;
    /* min-width: 160px; */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    right: 5px;
    top: -20px;
    margin-left: 283px;
}

.sphere-sentinal {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    vertical-align: top;
    /* position: relative; */
    background: black;
    display: inline-block;
    position: relative;
    margin-top: 165px;
    margin-left: -55px;
    z-index: 2;
}
.dropdown-content-sentinal a {
    table-layout: fixed;
    color: black;
    margin-left: -1px;
    padding: 12px 16px 13px 30px;
    text-decoration: none;
    display: block;
    border: 1px solid #000;
    border-top: none;
    font-size: 21px;
}
.dropdown-content-sentinal a:first-child {
  padding-top: 35px;
  background: url("Images/sidearrow.png") no-repeat 7px 36px;
}

.dropdown-sentinal a {
	background:url("Images/sidearrow.png") no-repeat 7px;
}

.dropdown-content-sentinal a:first-child:hover {
  padding-top: 35px;
  background: url("Images/sidewhite.png") no-repeat 3px 36px;
  color:black;
  background-color: rgb(255,131,0);
}

.dropdown-content-sentinal a:hover {
	background:url("Images/sidewhite.png") no-repeat 3px;
	background-color: rgb(255,131,0);
	color:white;
}

.dropdown-sentinal:hover .dropdown-content-sentinal {
    display: block;
}

.dropdown-sentinal:hover .dropbtn-sentinal {
    background-color: #3e8e41;
}

div#arrow-sentinal {
    position: absolute;
    margin-left: 10px;
    margin-top: 11px;
}

div#dropdown-one {
    width: 500px;
    height: 198px;
}

div#dropdown-two {
    margin-left: 700px;
    margin-top: -198px;
}


div#dropdown-content a {
    text-decoration: none;
    border: solid black 1px;
    display: table-caption;
    background-color: rgb(237,237,238);
    background: url(Images/sidearrow.png) no-repeat 7px 36px;
}

<!DOCTYPE html>
<html>
<head>
	<title>title</title>
	<link rel="stylesheet" type="text/css" href="dropdown.css">
<meta charset="utf-8">
</head>
<body>
<div class="averios-header">
	<div id="averios-logo">
		<img src="averioslogo.png" width="176" height="129">
	</div>
	<div id="setting-dropdown">
		<!-- SETTING DROPDOWN WILL GO HERE -->
	</div>
	<div id="header-hr">
	</div>
</div>

<div id="log-in">
	<div id="loginHeader">
		<h1>Portal</h1>
	</div>
	<div id="welcome-text">
		<p> Welcome name </p>
		<p> Your last login was time on date </p>
		<br>
		<p> Please select an application below to begin </p>
	</div>
</div>
<div id="dropdown-one">
	<div class="dropdown">
	  <button class="dropbtn">SELECT</button>
	  <div class="sphere">
		<div id="arrow">
			<img src="C:\Users\mseh\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
		  </div>
	  </div>
	  <div class="dropdown-content">
		<a href="#">Link 1</a>
		<a href="#">Link 1</a>
		<a href="#">Link 1</a>
		<a href="#">Link 1</a>		
	  </div>
	</div>
</div>

<div id="dropdown-two">
	<div class="dropdown-sentinal">
	  <button class="dropbtn-sentinal">SELECT</button>
	  <div class="sphere-sentinal">
		<div id="arrow-sentinal">
			<img src="C:\Users\mseh\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
		  </div>
	  </div>
	  <div class="dropdown-content-sentinal">
		<a href="#">Link 1</a>
		<a href="#">Link 1</a>
		<a href="#">Link 1</a>
		<a href="#">Link 1</a>	
	  </div>
	</div>
</div>
</body>
</html>

Answer 1

这里 - 我将示例缩短了一点（我也不认为您需要所有单独的CSS以获得多个按钮，您应该能够使用这些类，并且只需使用{{更改细节] 1}}对于您可能想要改变的事物（如位置）。

我认为Chrome中的问题是容器的宽度比按钮本身宽，这使它行为不端。它可能不是100％，但它应该让你开始。我将一些值更改为动态值（#dropdown_two .classname而不是em），因此可能存在一些问题。

＆＃13;

px

＆＃13;

#dropdown-one {
  margin-left: 20em;
  }
.dropbtn {
    color: white;
    width: 100%;
  height: 3.2em;
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-align: left;
    font-weight: 900;
    background: rgba(0, 173, 239, 1);
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 50px 50px 50px 50px;
    position: relative;
    z-index: 2;
}

.dropdown {
    position: relative;
    display: block;
    width: 12.5em;
    background:antiquewhite;
}

.dropdown-content {
    display: none;
    position: relative;
    z-index: 1;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: -20px;
}

.sphere {
    height: 2.9em;
    width: 2.9em;
    border-radius: 50%;
  border: 2px solid rgba(0, 173, 239, 1);
    /* position: relative; */
    background: black;
    position: absolute;
  top: 0;
  bottom: 0;
  right: .1em;
    z-index: 2;
}
.dropdown-content a {
    table-layout: fixed;
    color: black;
    padding: .75em;
    text-decoration: none;
    display: block;
    border: 1px solid #000;
    border-top: none;
    font-size: 21px;
  box-sizing: border-box;
}
.dropdown-content a:first-child {
  padding-top: 35px;
  background: url("Images/sidearrow.png") no-repeat 7px 36px;
}

.dropdown a {
	background:url("Images/sidearrow.png") no-repeat 7px;
}

.dropdown-content a:first-child:hover {
  background: url("Images/sidewhite.png") no-repeat 3px 36px;
  color:black;
  background-color: rgb(255,131,0);
}

.dropdown-content a:hover {
	background:url("Images/sidewhite.png") no-repeat 3px;
	background-color: rgb(255,131,0);
	color:white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

div#arrow {
    position: absolute;
    margin-left: 10px;
    margin-top: 11px;
}

＆＃13;

奇怪的下拉行为css

1 个答案: