Question

我正在设置一个导航菜单，其中一个链接作为下拉菜单，然后是一个像Facebook页面一样的图像。它按预期工作，但它显示下拉作为最后一个链接，而不是我想要的结尾。请参阅下面的代码：

＆＃13;

ul.nav  {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #ffd903;
    background: -webkit-linear-gradient(left, #ffd903,#fffcee);
    background: linear-gradient(left, #ffd903,#fffcee);
}
    
li.navigation {
    float: left;
}

li.navigation a, .drop {
    display: inline-block;
    color: #000;
    text-align: center;
    padding: 1rem;
    text-decoration: none;
}
    
li.navigation a:hover, .submenu:hover .drop, footer a:hover {
    background: #56d019;
}
    
li.submenu {
    display: inline-block;
}
    
.submenu-content {
    display: none;
    position: absolute;
    background: #ffd903;
    background: -webkit-linear-gradient( #ffd903,#fffcee);
    background: linear-gradient( #ffd903,#fffcee);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
    
.submenu-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
    
.submenu-content a:hover {
    background-color: #56d019
}
    
.submenu:hover .submenu-content {
    display: block;
}

＆＃13;

<nav>
    <ul class="nav">
        <li class="navigation"><a href="about.html" title="About Us">About Us</a></li>
        <li class="navigation"><a href="contact.html" title="Contact Us">Contact Us</a></li>
        <li class="submenu">
            <a class="drop" href="employees.html">Employees</a>
            <div class="submenu-content">
                <a href="nora.html" title="Nora Jones">Nora Jones</a>
                <a href="carolyn.html" title="Carolyn Pennington">Carolyn Pennington</a>
                <a href="samuel.html" title="Samuel Griffiths">Samuel Griffiths</a>
                <a href="alexandra.html" title="Alexandra Smith">Alexandra Smith</a>
            </div>
        </li>
        <li class="navigation"><a href="report.html" title="Report">Report</a>
        <li class="navigation"> <a href="https://www.facebook.com/" title="Find us on Facebook!"><img src="facebook.png" alt="Find us on Facebook"/> </a>
    </ul> 
</nav><br/>

＆＃13;

有人可以告诉我哪里出错了吗？我让它正常工作，直到我不得不将列表更改为有课程，现在我不确定我搞砸了什么。

Answer 1

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #ffd903;
  background: -webkit-linear-gradient(left, #ffd903, #fffcee);
  background: linear-gradient(left, #ffd903, #fffcee);
}

li.navigation {
  display: inline-block;
}

li.navigation a,
.drop {
  display: inline-block;
  color: #000;
  text-align: center;
  padding: 1rem;
  text-decoration: none;
}

li.navigation a:hover,
.submenu:hover .drop,
footer a:hover {
  background: #56d019;
}

li.submenu {
  display: inline-block;
}

.submenu-content {
  display: none;
  position: absolute;
  background: #ffd903;
  background: -webkit-linear-gradient( #ffd903, #fffcee);
  background: linear-gradient( #ffd903, #fffcee);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.submenu-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.submenu-content a:hover {
  background-color: #56d019
}

.submenu:hover .submenu-content {
  display: block;
}

<nav>
  <ul class="nav">
    <li class="navigation"><a href="about.html" title="About Us">About Us</a></li>
    <li class="navigation"><a href="contact.html" title="Contact Us">Contact Us</a></li>
    <li class="submenu">
      <a class="drop" href="employees.html">Employees</a>
      <div class="submenu-content">
        <a href="nora.html" title="Nora Jones">Nora Jones</a>
        <a href="carolyn.html" title="Carolyn Pennington">Carolyn Pennington</a>
        <a href="samuel.html" title="Samuel Griffiths">Samuel Griffiths</a>
        <a href="alexandra.html" title="Alexandra Smith">Alexandra Smith</a>
      </div>
      </li>
      <li class="navigation"><a href="report.html" title="Report">Report</a></li>
      <li class="navigation">
        <a href="https://www.facebook.com/" title="Find us on Facebook!"><img src="facebook.png" alt="Find us on Facebook" /></a>
        </li>
  </ul>
</nav><br/>

Answer 2

您忘记将导航类添加到子菜单以使其向左浮动，检查此fiddle并告诉我这是否可以解决您的问题，同时还有一些细微的变化，但仍然很重要，就是在li.navigation之前添加.submenu-content a，如下所示：

li.navigation .submenu-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

下拉菜单显示图像后

2 个答案: