Question

我正在尝试为我的个人网站创建一个下拉菜单，但似乎有些不对劲。

HTML：

<header class="mainheader">
      <nav class="nav">
        <ul>
          <li>Home</li><li>
          <a href="/">League</a></li><li>
            <ul class="nav-dropdown">
              <li><a href="#">bbva</a></li>
              <li><a href="#">barclays premier league</a></li>
            </ul>
          <a href="/">Contact</a></li>

        </ul>



      </nav>
    </header>

CSS：

.mainheader, .header-text, .header-text-soccer {
    background-color: green;
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 20px;
    height: 60px;
    border-radius: 6px;
}

.mainheader nav ul li a {
    text-decoration: none;
    color: white;
}

.mainheader nav ul li {
    display: inline-block;
    padding: 20px;
    color: white;
}

.nav ul li:hover {
  background-color: #41a608;
  height: 20px;
  border-radius: 2px;
}

最后几行代码是我认为的问题。悬停部分涵盖.nav中的每个行项目，但我不知道如何从css中的子导航链接（应该下拉）中分离主导航链接。

有人可以向我解释一下我应该添加什么代码才能让它工作吗？

感谢。

Answer 1

我修改了你的完整代码：这是它，有几个修改。这可能对您有所帮助。你需要先隐藏你的下拉选项，找出解雇时的时间以及如何开火。

还有一件重要的事情，你必须将你的下拉选项设置为绝对，这样它就是某个主选项/菜单的子项。

修改后的HTML：

<header class="mainheader">
  <nav class="nav">
    <ul>
        <li>Home</li>
        <li>
            <a href="/">League</a>
        </li>
        <li>Dropdown
            <ul class="nav-dropdown">
                <li><a href="#">bbva</a></li>
                <li><a href="#">barclays premier league</a></li>
            </ul>
        </li>
        <li><a href="/">Contact</a></li>
    </ul>
  </nav>
</header>

修改后的CSS：

.mainheader, .header-text, .header-text-soccer {
    background-color: green;
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 20px;
    height: 60px;
    border-radius: 6px;
    position: relative;
}

.mainheader nav ul li a {
    text-decoration: none;
    color: white;
}

.mainheader nav ul li ul{
    display: none;
}

.mainheader nav ul li {
    display: inline-flex;
    padding: 20px;
    color: white;
}

.nav ul li:hover {
  background-color: #41a608;
  border-radius: 2px;
}

.nav ul li:hover ul{
    background: #aaa none repeat scroll 0 0;
    display: block;
    margin-left: -20px;
    padding: 0;
    position: absolute;
    top: 60px;
    width: 200px;
}

.mainheader nav ul li ul li{
    box-sizing: border-box;
    color: white;
    display: inline-block;
    padding: 20px;
    width: 100%;
}

Answer 2

我想这就是你需要的：

https://jsfiddle.net/8f2hvdfh/1/

你的CSS很乱。查看有关如何制作CSS下拉菜单的指南：http://www.w3schools.com/css/css_dropdowns.asp

这为您提供了基本设置：

nav ul ul {
  position:absolute;
  display:none;
  padding-left:0;
}

nav ul li {
  display:inline-block;
  height:60px;
}

nav ul ul li {
  display:block;
}

nav ul li a {
  text-decoration:none;
  color:white;
  display:block;
  padding:21px;
}

nav ul li:hover ul {
  display:block;
}

其余的是钟声和口哨声。祝你好运。

从css中的子导航链接分离主导航链接？

2 个答案: