Issue with circular drop down menu - html

Question

I am writing an article for my blog on the menu.
I am trying to create a Circular drop down menu. It works fine when there are two or more Submenus on all browsers. But if there is only one sub-menu to a parent menu it is displayed way below its intended position.
Here is working copy of the following code in jsfiddle: http://jsfiddle.net/avdhut/LDmM8/5/
I know the problem is in the #menucontainer ul li:hover > ul selector,
its with margin. But if I remove that margin-top menus having 2 or more sub-menus go up and are displayed way above their intended position.
Please help as I cannot find a suitable solution on this issue.
Following is the HTML code:
<div id="menucontainer">
<ul id="hmenu">
<li>Home
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 3</li>
</ul>
</li>
<li>About
<ul>
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>Test 1</li>
</ul>
</li>
<li>Info
<ul>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</li>
</ul>
</div>
Following is the CSS code:
#menucontainer {
margin: 0px;
padding: 0px;
width: 100%;
height: 90px;
}
/* Following selectors will define the color and the border radius for the menu*/
#menucontainer ul, #menucontainer ul li ul {
list-style: none;
margin: 0px;
padding: 0px;
}
/* Following selector will define the style for individual menu or li tags. The following style gives them a look when the menus are not selected.
note that the position proerty is set to relative and dispaly is inline.
*/
#menucontainer ul li {
list-style: none;
margin: 10px;
padding: 0px;
background-color:#2CDF7B;
position: relative;
display: inline;
text-align: center;
/*Setting the height and width for the menu*/
width: 90px;
cursor:pointer;
height: 90px;
/*Setting the border-radius for the menu
various prefix are added so it is supported in older version of
browsers. For IE supported from IE-9+
IMPORTANT: to keep the border radius height and width same to get circle.
*/
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
-khtml-border-radius: 90px;
border-radius: 90px;
/*Adding the box shadow to the menu*/
box-shadow: 0 0 10px black;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
float: left;
}
/* Style for the anchor tag defined in the menu.
*/
#menucontainer ul li a {
margin: 10px;
padding: 10px;
background-color:transparent;
display: block;
text-decoration: none;
text-align: center;
font-family:"Times New Roman", "Arabic";
font-size: 18px;
color: #E3E3C0;
}
/* The hover effect is defined using the below selectors
For the opacity is used to create a semi-transperant look as a hover effect
*/
#menucontainer ul li:hover {
list-style: none;
margin: 10px;
padding: 0px;
opacity: 0.7;
background-color:#2CDF7B;
position: relative;
display: block;
width: 90px;
text-align: center;
cursor:pointer;
height: 90px;
/*Setting the border-radius for the menu
various prefix are added so it is supported in older version of
browsers. For IE supported from IE-9+
IMPORTANT: to keep the border radius height and width same to get circle.
*/
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
-khtml-border-radius: 90px;
border-radius: 90px;
-moz-box-shadow: inset 0 0 10px black;
box-shadow: inset 0 0 10px black;
-webkit-box-shadow: inset 0 0 10px black;
}
#menucontainer ul li:hover a {
margin: 10px;
padding: 10px;
background-color:transparent;
display: block;
text-decoration: none;
text-align: center;
font-family:"Times New Roman", "Arabic";
font-size: 18px;
color: white;
}
/*******************************************************/
/*******************************************************/
/*Sub menu*/
/*******************************************************/
#menucontainer ul li > ul {
display : none;
overflow: hidden;
position: relative;
border-bottom: solid 1px;
border: 0px;
height: 0px;
width: 100%;
}
#menucontainer ul li:hover > ul {
z-index: 10;
float: none;
left: -15px;
margin: 40px 10px 10px 10px;
height: auto;
padding: 0px 5px 0px 0px;
display:block;
width: 100px;
}
#menucontainer ul li:hover > ul li, #menucontainer ul li a:hover > ul li {
list-style: none;
margin: 10px;
padding: 0px;
background-color:#2CDF00;
position: relative;
display: inline;
text-align: center;
/*Setting the height and width for the menu*/
width: 90px;
cursor:pointer;
height: 90px;
/*Setting the border-radius for the menu
various prefix are added so it is supported in older version of
browsers. For IE supported from IE-9+
IMPORTANT: to keep the border radius height and width same to get circle.
*/
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
-khtml-border-radius: 90px;
border-radius: 90px;
/*Adding the box shadow to the menu*/
box-shadow: 0 0 10px black;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
float: left;
}
/*******************************************************/
#menucontainer ul li:hover > ul li:after, #menucontainer ul li a:hover > ul li:after {
content:" ";
border: solid transparent;
margin: 0px;
padding: 0px;
position: absolute;
pointer-events: none;
border-color: rgba(44, 223, 123, 0);
border-top-color: #2CDF00;
top: 98%;
left: 50%;
margin-left: -10px;
border-width:10px;
}
#menucontainer ul li:hover > ul li:before, #menucontainer ul li a:hover > ul li:before {
content:" ";
border: solid transparent;
margin: 0px;
padding: 0px;
position: absolute;
pointer-events: none;
border-color: rgba(44, 223, 123, 0);
border-bottom-color: #2CDF00;
bottom: 98%;
left: 50%;
margin-left: -10px;
border-width:10px;
}
/*******************************************************/

Answer 1

Just some changes to css and you are done:-
#menucontainer ul li > ul {
display : none;
overflow: hidden;
position: absolute; //implement absolute
border-bottom: solid 1px;
border: 0px;
height: 0px;
width: 100%;
top:90px; //add top
}
#menucontainer ul li:hover > ul {
z-index: 10;
float: none;
left: -15px;
margin: 5px; //change it to this
height: auto;
padding: 0px 5px 0px 0px;
display:block;
width: 100px;
}
Working fiddle:- http://jsfiddle.net/LDmM8/7/

Answer 2

It has nothing to do with the fact that you only have 1 item in that dropdown menu. You can try and add more and see it's still happening. The real reason is that the "Contact Us" button is taking two rows instead of one like the other buttons.
The problem is solved by setting a fixed height for the anchors.
jsFiddle Demo
#menucontainer ul li a {
height:33px;
}