CODEWITHSUNDEEP
htmlcss
Sarah
Sarah

Reputation: 67

drop down menu showing after image

I am setting up a navigation menu with one link as a drop down, then an image to like a facebook page. It's working as expected, however it's showing the drop down as the last link, not the end like I want. See my code below:

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;
}
<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/>

Could someone please advise where I'm going wrong? I had it working correctly until I had to change the lists as having classes and now I'm not sure what I messed up.

Upvotes: 0

Views: 56

Answers (2)

l.g.karolos
l.g.karolos

Reputation: 1142

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

Upvotes: 1

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

You forgot to add navigation class to submenu in order to make it float left, check this fiddle and let me know if this solve your issue, also there is a minor change but still important, it's to add li.navigation before .submenu-content a as follows:

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

Upvotes: 0

Related Questions