Question

我在页面顶部有一个简单的导航菜单，我正在处理。我希望导航菜单上的某个链接在您将鼠标悬停在其上时会在其下方弹出一个下拉菜单。

我的下拉菜单显得很好。唯一的问题是下拉菜单项是整个页面的宽度而不是导航菜单项的宽度。我不确定导致它的原因......

以下是导航菜单和下拉菜单的html和css：

＆＃13;

.dropdown {
  float: left;
  background-color: #FFF0F5; 
}

.dropDiv {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdownContent {
  display: none;
  background-color: #FFF0F5;
  z-index: 1;
  width: 300px;
  overflow-x: hidden;
}

.dropdownContent a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  width: 300px;
}

.dropdownContent a:hover {
  background-color: #fff8dc;
}

.dropDiv:hover .dropdownContent {
  display: block;
  z-index: 1;
  height: 200px;
  width: 300px;
  overflow-x: hidden;
}

.dropDiv:hover .dropdown {
  background-color: #fff8dc;
}

＆＃13;

<nav>
  <ul>
      <li><a href="eiffel.shtml">Eiffel Tower</a></li>
      <li><a href="fashion.shtml">Fashion</a></li>
      <li><a href="food.shtml">Food</a></li>
      <li><a href="museums.shtml">Museums</a></li>
      <div class="dropDiv">
        <li class="dropdown"><a href="history.shtml">History</a></li>
        <div class="dropdownContent">
            <a href=leaders.shtml>Leaders of Paris</a>
            <a href=future.shtml>Future of Paris</a>
        </div>
      </div>
      <li><a href="language.shtml">Language</a></li>
      <li><a href="works.shtml">Works Cited</a></li>
  </ul>
</nav>

＆＃13;

你可以看到它有点乱，因为我已经添加了很多东西试图想出一些东西来解决这个宽度问题。非常感谢任何帮助！

Answer 1

您的代码对我来说很好。看起来您的代码中的其他一些CSS正在使其全宽。您是否尝试过使用＆＃34;！important＆＃34;或者＆＃34; max-width＆＃34;？

Answer 2

您应该在dropDiv标记中创建li，并将其设为绝对位置以获取父级

＆＃13;

nav ul {
  padding:0;
  margin:0;
}
nav ul li {
  list-style: none;
  float: left;
  position: relative;
  margin: 0 5px;
}
nav ul li a{
  color: #000;
  text-decoration: none;
}
.dropdown {
  float: left;
  background-color: #FFF0F5; 
}


nav ul li:hover .dropDiv {
  display: block;
  z-index: 1;
  height: 200px;
  width: 300px;
  overflow-x: hidden;
}

.dropDiv:hover .dropdown {
  background-color: #fff8dc;
}
.dropDiv {
  position: absolute;
  width: 100%;
  display: none;
  background-color: #FFF0F5;
  z-index: 1;
  width: 300px;
  overflow-x: hidden;
}

.dropDiv a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; 
}

.dropDiv a:hover {
  background-color: #fff8dc;
}

＆＃13;

<nav>
  <ul>
      <li><a href="eiffel.shtml">Eiffel Tower</a></li>
      <li><a href="fashion.shtml">Fashion</a></li>
      <li><a href="food.shtml">Food</a></li>
      <li><a href="museums.shtml">Museums</a></li>
      <li class="dropdown"><a href="history.shtml">History</a>
        <div class="dropDiv">        
          <a href=leaders.shtml>Leaders of Paris</a>
          <a href=future.shtml>Future of Paris</a>
        </div>
      </li>
      <li><a href="language.shtml">Language</a></li>
      <li><a href="works.shtml">Works Cited</a></li>
  </ul>
</nav>

＆＃13;

Answer 3

您好，只需要定义导航栏的宽度，我就已经定义了700px。并添加一些CSS。检查此代码

.dropdown {
    float: left;
    background-color: #FFF0F5; 
}

.dropDiv {
        position: relative;
    display: inline-block;
    list-style: none;
    padding: 9px;
    float: left;
    max-width: 100%;
	}

.dropdownContent {
    display: none;
    background-color: #FFF0F5;
    z-index: 1;
    width: 300px;
    overflow-x: hidden;
}

.dropdownContent a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    
}

.dropdownContent a:hover {background-color: #fff8dc;}

.dropDiv:hover .dropdownContent {
    display: block;
    z-index: 1;
    overflow-x: hidden;    
    top: 30px;
    left: 10px;
    position: absolute;
}

.dropDiv:hover .dropdown {
    background-color: #fff8dc;
}
nav {width:700px;float: left;}
nav > ul > li {    float: left;
    padding: 9px;list-style: none}
	ul{float:left;}

<nav>
    <ul>
        <li><a href="eiffel.shtml">Eiffel Tower</a></li>
        <li><a href="fashion.shtml">Fashion</a></li>
        <li><a href="food.shtml">Food</a></li>
        <li><a href="museums.shtml">Museums</a></li>
        <div class="dropDiv">
            <li class="dropdown"><a href="history.shtml">History</a></li>
                <div class="dropdownContent">
                    <a href=leaders.shtml>Leaders of Paris</a>
                    <a href=future.shtml>Future of Paris</a>
                </div>
        </div>
		</li>
        <li><a href="language.shtml">Language</a></li>
        <li><a href="works.shtml">Works Cited</a></li>
    </ul>
</nav>

我认为这就是你想要的。

CSS下拉菜单占用整个页面宽度？

3 个答案: