Question

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

#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>

Answer 1

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

上

然后将display上的li属性更改为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>

Answer 2

nav {

    width: 960px;

}

nav ul {

    padding: 0px;

    margin: 0px;

}

nav ul:after {

    clear: both;

    content: " ";

    display: block;

    font-size: 0;

    height: 0;

    visibility: hidden;

}

    nav ul,nav ul li{

    background-color: #FAFAFA;

}

    nav ul li {

    list-style: none;

    float:left;

}

nav ul li a {

    text-decoration: none;

    display: block;

    color: #333;

    padding: 14px 34px 14px 34px;

}

nav ul li:hover > ul {

    visibility: visible;

}

nav ul li ul{

    display: inline;

    visibility: hidden;

    position: absolute;

    padding:0px;

}

nav ul li ul li{

    float: none;

}

nav ul li ul li a:hover{

    color: #333;

}

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

        <li class = "dropMenue">

            <a href="#">kita &#9662;</a>

            <ul>

              <li><a href="#">nuorodos</a></li>

              <li><a href="#">galerija</a></li>

           </ul>        

        </li>

    </ul>

  </nav>

</div>

下拉菜单：不好的位置

2 个答案: