我需要一个下拉菜单,但是当我将位置设置为“固定”时,它不起作用

时间:2019-01-10 19:04:04

标签: html css menu

我需要固定位置,我不知道如何将菜单对齐,否则要与屏幕顶部对齐,我总是会在屏幕边缘和菜单之间留出缝隙。

html:

<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Monitor</a>
    <div class="dropdown-content">
      <a href="Index.html">Tube 1</a>
      <a href="#">Tube 2</a>
    </div>
  </li>
  <li><a href="Developer.html">Input</a></li>
  <li><a href="Information.html">Information</a></li>
  <li style="float:right" id="Credit"><a>Text</a></li>
</ul>

css:

ul {
  z-index: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
  top: 0;
  right: 0;
  width: 100%;
  font-family: "Arial Black";
  font-size: 16px;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: #666;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #008CBA;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.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: block;
}

当我在ul中添加position: fixed;时,下拉菜单不再起作用,但是当我不添加时,屏幕边缘与菜单之间的缝隙就会变得难看。

2 个答案:

答案 0 :(得分:1)

您的身体有边距:8px。只是删除保证金。添加CSS:

body{
    margin: 0;
}

答案 1 :(得分:0)

您还应该添加“ position:fixed;”下拉内容。

2019-01-10 12:54:51.220 INFO  org.springframework.batch.core.launch.support.SimpleJobOperator UserId:|IPAddress:|ThreadId:| - Checking status of job with name=ProcessVlsCases
2019-01-10 12:54:51.225 INFO  org.springframework.batch.core.launch.support.SimpleJobOperator UserId:|IPAddress:|ThreadId:| - Attempting to launch job with name=ProcessVlsCases and parameters=param_who=AM20909,param_run_type=test,param_submittal_date=2019-01-10 12:54:45
2019-01-10 12:54:51.259 INFO  org.springframework.batch.core.launch.support.SimpleJobLauncher UserId:|IPAddress:|ThreadId:| - Job: [ProcessVlsCasesJobImpl: [name=ProcessVlsCases]] launched with the following parameters: [{param_who=AM20909, param_run_type=test, param_submittal_date=2019-01-10 12:54:45}]
2019-01-10 12:54:51.260 ERROR org.springframework.batch.core.job.AbstractJob UserId:|IPAddress:|ThreadId:| - Encountered fatal error executing job
java.lang.NullPointerException: null
    at org.springframework.batch.core.job.AbstractJob.execute(AbstractJob.java:303) [spring-batch-core-4.1.0.RELEASE.jar:4.1.0.RELEASE]
    at org.springframework.batch.core.launch.support.SimpleJobLauncher$1.run(SimpleJobLauncher.java:144) [spring-batch-core-4.1.0.RELEASE.jar:4.1.0.RELEASE]
    at org.springframework.core.task.SimpleAsyncTaskExecutor$ConcurrencyThrottlingRunnable.run(SimpleAsyncTaskExecutor.java:271) [spring-core-4.3.16.RELEASE.jar:4.3.16.RELEASE]
    at java.lang.Thread.run(Thread.java:748) [?:1.8.0_172]
2019-01-10 12:54:51.261 ERROR org.springframework.batch.core.job.AbstractJob UserId:|IPAddress:|ThreadId:| - Exception encountered in afterStep callback
java.lang.NullPointerException: null
    at org.springframework.batch.core.job.AbstractJob.execute(AbstractJob.java:359) [spring-batch-core-4.1.0.RELEASE.jar:4.1.0.RELEASE]
    at org.springframework.batch.core.launch.support.SimpleJobLauncher$1.run(SimpleJobLauncher.java:144) [spring-batch-core-4.1.0.RELEASE.jar:4.1.0.RELEASE]
    at org.springframework.core.task.SimpleAsyncTaskExecutor$ConcurrencyThrottlingRunnable.run(SimpleAsyncTaskExecutor.java:271) [spring-core-4.3.16.RELEASE.jar:4.3.16.RELEASE]
    at java.lang.Thread.run(Thread.java:748) [?:1.8.0_172]
2019-01-10 12:54:51.261 INFO  org.springframework.batch.core.launch.support.SimpleJobLauncher UserId:|IPAddress:|ThreadId:| - Job: [ProcessVlsCasesJobImpl: [name=ProcessVlsCases]] failed unexpectedly and fatally with the following parameters: [{param_who=AM20909, param_run_type=test, param_submittal_date=2019-01-10 12:54:45}]
java.lang.NullPointerException: null
    at org.springframework.batch.core.job.AbstractJob.execute(AbstractJob.java:364) ~[spring-batch-core-4.1.0.RELEASE.jar:4.1.0.RELEASE]
    at org.springframework.batch.core.launch.support.SimpleJobLauncher$1.run(SimpleJobLauncher.java:144) [spring-batch-core-4.1.0.RELEASE.jar:4.1.0.RELEASE]
    at org.springframework.core.task.SimpleAsyncTaskExecutor$ConcurrencyThrottlingRunnable.run(SimpleAsyncTaskExecutor.java:271) [spring-core-4.3.16.RELEASE.jar:4.3.16.RELEASE]
    at java.lang.Thread.run(Thread.java:748) [?:1.8.0_172]
2019-01-10 12:54:51.272 DEBUG gov.texas.dps.dl.batch.admin.ui.jobexecutionparameter.BatchJobExecutionParameterDtoEditControllerImpl UserId:|IPAddress:|ThreadId:| - preRenderView
2019-01-10 12:54:51.272 DEBUG gov.texas.dps.dl.batch.admin.ui.jobexecutionparameter.BatchJobExecutionParameterDtoEditControllerImpl UserId:|IPAddress:|ThreadId:| - resetForWork
Exception in thread "dlsBatch_2" java.lang.NullPointerException
    at org.springframework.batch.core.job.AbstractJob.execute(AbstractJob.java:364)
    at org.springframework.batch.core.launch.support.SimpleJobLauncher$1.run(SimpleJobLauncher.java:144)
    at org.springframework.core.task.SimpleAsyncTaskExecutor$ConcurrencyThrottlingRunnable.run(SimpleAsyncTaskExecutor.java:271)
    at java.lang.Thread.run(Thread.java:748)

ul {
  z-index: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
  top: 0;
  right: 0;
  width: 100%;
  font-family: "Arial Black";
  font-size: 16px;
  position: fixed;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: #666;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #008CBA;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.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: block;
}