Issue with drop down menu - html

Question

I have created a menu and i am trying to implement a drop down menu on hover, It doesn't seem to appear correct,any help would be appreciated. Why is the drop down appearing in different position ?
<ul class="menu">
<li>Home
<ul class="menu">
<li>Home</li></ul>
</li> |
<li class="active">About</li> |
<li>Products</li> |
<li>Clients</li> |
<li>Reach Us</li>
<div class="clear"></div>
</ul>
.menu{
float:left;
color: #555555;
margin-top: 25px;
}
.menu ul {}
.menu li{
display: inline-block;
margin:6px 20px;
}
.menu li a{
display: block;
color: #000;
line-height: 1.8em;
text-transform: capitalize;
font-size: 14px;
font-weight: 400;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding: 5px;
}
.menu li:hover > ul {
display: block;
}
.menu li.active a{
color: #52ABDF;
background: white;
}
.menu li a:hover{
color: #ooo;
background: #52ABDF;
padding: 5px;
}
.menu li ul{
display: none;
}
.menu ul li:hover ul{
display: block;
margin-left:0px;
}
.menu li ul li {
float: none;
display: inline;
}
.menu li ul li a {
position: relative;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #ooo;
}
.menuli ul li a:hover {
background: #066;
color: #000;
}
Here is the code pen : http://codepen.io/anon/pen/EtmAB

Answer 1

As a tip,
you should never use '|' symbol to seperate the <li>s, because it
makes the html meaningless. The <ul> tag is expected to have only
<li> tags as its children.. You could use the border-right property instead. and use
ul li:last-of-type(){
border: 0;
}
to eliminate the border on the last <li>
Use this css and yours would work:
.menu,
.menu li ul{
float:left;
color: #555555;
margin-top: 0;
list-style: none;
padding: 0;
}
.menu{
margin-top: 25px;
}
.menu ul:after{
content: "";
display: block;
clear: both;
}
.menu li{
float: left;
position: relative;
}
.menu li a{
display: block;
color: #000;
line-height: 2em;
text-transform: capitalize;
font-size: 14px;
font-weight: 400;
padding: 0 20px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.menu li:hover > ul {
display: block;
}
.menu li.active a{
color: #52ABDF;
background: white;
}
.menu li a:hover{
color: #ooo;
background: #52ABDF;
}
.menu li ul{
display: none;
position: absolute;
background: #bbb;
}
.menu li ul li {
display: inline ;
}
.menu li ul li a {
position: relative;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #ooo;
}
.menuli ul li a:hover {
background: #066;
color: #000;
}
If you want to really learn how to make a better styled dropdown menu, use this tutorial:
http://andornagy.com/css-dropdown-menu/
it is pretty easy and understandable too, and not bad looking...