html - 下拉菜单 : bad position

所以我正在制作下拉菜单，当您将鼠标悬停在文本上时，我会看到其他选项，但它不在正确的位置。

#wrap {
	margin:10px auto 10px auto;
	height:auto;
	width:1000px;
}

header {
	background-color:#fff;
	height:111px;
	width:100%;
	position:absolute;
	top:0px;
	left:0px;
	border-bottom:solid 1px #e7e7e7;
}

nav ul {
	margin-top:43px;
	padding:0;
	list-style: none;
    position: relative;
    display:block;
}

nav ul li {
	display:inline;
	font-family:Courier new;
	color:#000;
	
    list-style: none; 
}

nav ul ul {
	display:none;
	position: absolute;
}

nav ul li:hover > ul {
    display:list-item;
}


nav ul li a {
	margin-right:57px;
	text-decoration:none;
	color:#000;
	
}

nav ul li a:hover {
	border-bottom:solid 1px #000;
	padding-bottom:5px;
}

<header>
		<div id="wrap">
			<nav>
				<ul>
					<li><a href="javascript:;">one</a></li>
					<li><a href="javascript:;">two</a></li>
					<li><a href="javascript:;">three</a></li>
					<li><a href="javascript:;">four</a></li>
					<li>
						four with children &#9662;
						<ul>
							<li>five . 1</li>
							<li>five . 2</li>
						</ul>
					</li>
				</ul>
			</nav>
		</div>
	</header>

最佳答案

从父级 ul 中移除 position:relative 并将其放在 li 上

然后将 li 上的 display 属性更改为 inline-block。

#wrap {
  margin: 10px auto 10px auto;
  height: auto;
  width: 1000px;
}
header {
  background-color: #fff;
  height: 111px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  border-bottom: solid 1px #e7e7e7;
}
nav ul {
  margin-top: 43px;
  padding: 0;
  list-style: none;
  display: block;
}
nav ul li {
  display: inline-block;
  font-family: Courier new;
  color: #000;
  position: relative;
  list-style: none;
}
nav ul ul {
  display: none;
  position: absolute;
}
nav ul li:hover > ul {
  display: list-item;
}
nav ul li a {
  margin-right: 57px;
  text-decoration: none;
  color: #000;
}
nav ul li a:hover {
  border-bottom: solid 1px #000;
  padding-bottom: 5px;
}

<body>
  <header>
    <div id="wrap">
      <nav>
        <ul>
          <li><a href="index.html">pradinis</a>
          </li>
          <li><a href="istorija.html">istorija</a>
          </li>
          <li><a href="laimejimai.html">laimėjimai</a>
          </li>
          <li><a href="sportininkai.html">sportininkai</a>
          </li>
          <li>
            kita &#9662;
            <ul>
              <li>nuorodos</li>
              <li>galerija</li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</body>

关于html - 下拉菜单 : bad position，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27967987/

html - 下拉菜单 : bad position

上一篇：css - 为低于 35 的 Firefox 版本添加一个 CSS 类名到 HTML 标签

下一篇：html - CSS 选择器，每 2 个 div 应用 CSS