Css dropdown navbar issue

Question

I am making a css navbar dropdown, and am having some issues. I'm not the most experienced person in css, so a little help would be appreciated. The products text doesn't change color, like on the other ones and you can only click on the text of the products box. Also the dropdown is not horizontally aligned with the products box.

Here's a link to jsfiddle: https://jsfiddle.net/epp0zmd6/

Code(HTML):

<div class="navbar">
        <ul>
            <a href="#"><li class="active">Homepage</li></a>
            <a href="#"><li>Contact Us</li></a>
            <a href="#"><li>Web Learning Platform</li></a>
            <a href="#"><li><a href="#">Products</a>
                <ul>
                    <a href="#"><li>Requirement Extraction & Analysis</li></a>
                    <a href="#"><li>Early Deduction Modelling & Analysis</li></a>
                </ul>
            </li></a>
        </ul>
    </div>

Code(CSS):

.navbar ul {
    display: inline-table;
    vertical-align: middle;
    list-style: none;
    position: relative;
}
.navbar ul:after {
    content: "";
    clear: both;
    display: block;
}
.navbar ul ul {
    display: none;
    border-radius: 0;
    padding: 0;
    position: absolute;
    top: 100%;
}
.navbar ul ul li {
    float: none;
    position: relative;
}
.navbar ul li:hover > ul {
    display: block;
}
.navbar ul li {
    background-color: #0A6CA3;
    display: inline-block;
    vertical-align: middle;
    font-family: SinkinSans;
    font-size: 20px;
    padding-top: 27px;
    padding-bottom: 21px;
    padding-left: 10px;
    padding-right: 10px;
    color: #FFFFFF;
    transition: all 0.8s;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    margin-left: -2px;
    margin-right: -2px;
    float: left;
}
.navbar ul li:hover {
    background-color: #FFFFFF;
    color: #00A3FF;
}
.navbar ul a {
    text-decoration: none;
}
.navbar ul a:visited {
    color: #FFFFFF;
}
.navbar ul a:hover {
    color: #00A3FF;
}
.navbar ul .active {
    background-color: #FFFFFF;
    color: #00A3FF;
}

My guess is that it has something to do with your double anchor tags. Can't you just use divs or something else? — Tjoeaon
– Tjoeaon, Commented Dec 26, 2015 at 16:33

Ismail Farooq · Accepted Answer · 2015-12-26 17:05:55Z

the first mistake is, always put anchor tag inside the li tag and second mistake is for the dropdown use ul > li > a and than, start child ul before closing li and after closing the anchor tag

and for proper clicking i have put padding on anchor tag with display inline block property.

i have updated fiddle i think you want something like this try this, hope the code will help you.

.navbar ul {
	display: inline-table;
	vertical-align: middle;
	list-style: none;
	position: relative;
}
.navbar ul:after {
	content: "";
	clear: both;
	display: block;
}
.navbar ul ul {
	display: none;
	border-radius: 0;
	padding: 0;
	position: absolute;
	top: 100%;
}

.navbar ul li:hover > ul {
	display: block;
}
.navbar ul li {
	display: inline-block;
	margin-left: -2px;
	margin-right: -2px;
	float: left;
}
.navbar ul li >a{
	padding-top: 27px;
	padding-bottom: 21px;
	padding-left: 10px;
	padding-right: 10px;
  display:inline-block;
  color:#fff;
    	text-decoration: none;
       	background-color: #0A6CA3;vertical-align: middle;
	font-family: SinkinSans;
	font-size: 20px;
	transition: all 0.8s;
	-moz-transition: all 0.8s;
	-webkit-transition: all 0.8s;
	-o-transition: all 0.8s;

}
.navbar ul li:hover >a,
.navbar ul li.active >a{
	background-color: #FFFFFF;
  	text-decoration: none;
	color: #00A3FF;

}

<div class="navbar">
  <ul>
        <li class="active"><a href="">Homepage</a></li>
        <li><a href="">Contact Us</a></li>
        <li><a href="">Web Learning Platform</a></li>
        <li><a href="">Products</a>
          <ul>
            <li><a href="">Requirement Extraction & Analysis</a></li>
            <li><a href="">Early Deduction Modelling & Analysis</a></li>
          </ul>
        </li>

  </ul>
</div>

Johannes · Accepted Answer · 2015-12-26 16:38:30Z

1

You have 2 links on your "Products" entry, that's too much:

<a href="#"><li><a href="#">Products</a>

etc.

Just remove one.

Concerning the position of the dropdown: add

.navbar ul li { left: -8px; }

answered Dec 26, 2015 at 16:38

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Collectives™ on Stack Overflow

Css dropdown navbar issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related