CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Vian Ojeda Garcia
Vian Ojeda Garcia

Reputation: 867

Html navbar dropdown

I am new to html so I want to learn how a dropdown was build step by step. 

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  text-align: center;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  margin: 0 0 0 15px;
}

li a:hover {
  background-color: black;
  color: white;
}

li .dropdown {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: gray;
  border: 2px solid black;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<ul>
  <li class="dropdown">
    <a href="#" class="dropbtn"> Home 
					<div class="dropdown-content">
						<a href="#">Home sub 1</a>
    <a href="#">Home sub 2</a>
    <a href="#">Home sub 3</a>
    </div>
    </a>
  </li>
</ul>

but I get the result before Home sub 1 there is a blank line and its like a link. I cant post the picture for now there is a problem in uploading image. But I will add it on my edit later when it is fixed

EDIT 1: As you can see when I hover there is a black like a link in the dropdown menu. enter image description here

Upvotes: 0

Views: 659

Answers (2)

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

just put the div outside from a like this:

<ul>
  <li class="dropdown">
    <a href="#" class="dropbtn"> Home </a>
      <div class="dropdown-content">
        <a href="#">Home sub 1</a>
        <a href="#">Home sub 2</a>
        <a href="#">Home sub 3</a>
      </div>
  </li>
</ul>

Upvotes: 1

user7935964
user7935964

Reputation:

Replace your code for this one

<ul>
    <li class="dropdown">
        <a href="#" class="dropbtn"> Home </a>
        <div class="dropdown-content">
            <a href="#">Home sub 1</a>
            <a href="#">Home sub 2</a>
            <a href="#">Home sub 3</a>
        </div>    
    </li>
</ul>

The problem is that you had a <div> tag inside your <a> element and without proper formatting and/or styling, you are not going to get what you expect/want.

Upvotes: 1

Related Questions