Why my drop down list is not working? - html

Question

I have made this drop down from the following website:
Inspirational Pixels
Here is my HTML code:
<td class="dess rec">
<a href="#" id="l_desserts" >desserts</a>
<ul class="submenu">
<li>Cake</li>
<li>Ice Cream</li>
<li>Shahi Kheer</li>
</ul>
</td>
It is a part of a table
CSS:
.submenu {
position:absolute;
overflow:hidden;
opacity:0;
background-color:#444;
width:100px;
top:37px;
left:-3px;
border-top:2px solid #fff;
}
.submenu>li {
list-style:none;
margin-left:-40px;
margin-top:3px;
}
.submenu>li>a {
display:block;
text-decoration:none;
color:#fff;
border:2px solid #444;
border-radius:5px;
padding:4px;
text-align:center;
font-family:Lucida Sans Unicode;
}
.submenu>li>a:hover {
border:2px solid white;
}
#l_desserts:hover .submenu {
z-index:1;
opacity: 1;
}
What my problem is that this drop down list is not working here in this case but earlier I made a drop down list using this method. You can see this here (the following link is of a blogger):
Indian Tadka
The same method is applied in here. I dont know Why it is not working>
body{
margin:0px;
}
#header{
height: 90px;
background-color: #444;
margin:0px;
color: #fff;
}
#logo{
width:70px;
height:90px;
background-image: url('../images/logo.jpg');
background-size: 70px 90px;
position:absolute;
z-index:2;
color:#fff;
text-align: center;
font-family: arial;
font-weight: bold;
text-shadow: 2px 1px #000;
cursor: pointer;
}
#complete_name{
position:absolute;
top:0px;
color:#fff;
font-family:arial;
font-weight:bold;
font-size:20px;
z-index:1;
background-color:#444;
}
#nav{
position:absolute;
left:75px;
color:#fff;
z-index:0;
top:37px;
}
#l_desserts, #l_rice{
color:#fff;
text-decoration:none;
padding-left:24px;
font-family: Lucida Sans Unicode;
display:block;
background-image: url('../images/coffie_paper_texture.jpg');
background-position:center;
background-size: 100px 20px;
}
.rec{
width:100px;
}
.otl{
width:100px;
background-color:#717171;
}
.submenu{
position:absolute;
overflow:hidden;
opacity:0;
background-color:#444;
width:100px;
top:37px;
left:-3px;
border-top:2px solid #fff;
}
.submenu>li{
list-style:none;
margin-left:-40px;
margin-top:3px;
}
.submenu>li>a{
display:block;
text-decoration:none;
color:#fff;
border:2px solid #444;
border-radius:5px;
padding:4px;
text-align:center;
font-family:Lucida Sans Unicode;
}
.submenu>li>a:hover{
border:2px solid white;
}
#l_desserts:hover .submenu{
z-index:1;
opacity: 1;
}
<header id="header">
<div id="logo" onmouseover="show_name()" onmouseout="hide_name()"> </div>
<font id="complete_name"></font>
<table id="nav">
<tr id="Oth_links">
<td class="photoGall Otl"><a id="pg" href="#">Photo Gallery</a></td>
</tr>
<tr id="toRecipes">
<td class="dess rec">
<a href="#" id="l_desserts" >desserts</a>
<ul class="submenu">
<li>Cake</li>
<li>Ice Cream</li>
<li>Shahi Kheer</li>
</ul>
</td>
<td class="rice rec">
Rice
</td>
</tr>
</table>
</header>

Answer 1

I got the answer
i just have to change my line:
#l_desserts:hover .submenu{ ...
to this:
#l_desserts:hover+.submenu
but it still dont know how the preceding method did worked in my blogger
body{
margin:0px;
}
#header{
height: 90px;
background-color: #444;
margin:0px;
color: #fff;
}
#logo{
width:70px;
height:90px;
background-image: url('../images/logo.jpg');
background-size: 70px 90px;
position:absolute;
z-index:2;
color:#fff;
text-align: center;
font-family: arial;
font-weight: bold;
text-shadow: 2px 1px #000;
cursor: pointer;
}
#complete_name{
position:absolute;
top:0px;
color:#fff;
font-family:arial;
font-weight:bold;
font-size:20px;
z-index:1;
background-color:#444;
}
#nav{
position:absolute;
left:75px;
color:#fff;
z-index:0;
top:37px;
}
#l_desserts, #l_rice{
color:#fff;
text-decoration:none;
padding-left:24px;
font-family: Lucida Sans Unicode;
display:block;
background-image: url('../images/coffie_paper_texture.jpg');
background-position:center;
background-size: 100px 20px;
}
.rec{
width:100px;
}
.otl{
width:100px;
background-color:#717171;
}
.submenu{
position:absolute;
overflow:hidden;
opacity:0;
background-color:#444;
width:100px;
top:37px;
left:-3px;
border-top:2px solid #fff;
}
.submenu>li{
list-style:none;
margin-left:-40px;
margin-top:3px;
}
.submenu>li>a{
display:block;
text-decoration:none;
color:#fff;
border:2px solid #444;
border-radius:5px;
padding:4px;
text-align:center;
font-family:Lucida Sans Unicode;
}
.submenu>li>a:hover{
border:2px solid white;
}
#l_desserts:hover+.submenu{
opacity:1;
z-index:3;
}
<html>
<head>
<title>Indian Tadka- Home</title>
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scr_home.js"></script>
<script type="text/javascript" src="scripts/JIO.js"></script>
</head>
<body>
<header id="header">
<div id="logo" onmouseover="show_name()" onmouseout="hide_name()"> </div>
<font id="complete_name"></font>
<table id="nav">
<tr id="Oth_links">
<td class="photoGall Otl"><a id="pg" href="#">Photo Gallery</a></td>
</tr>
<tr id="toRecipes">
<td class="dess rec">
<a href="#" id="l_desserts" onmouseover="showDess();" >desserts</a>
<ul class="submenu">
<li>Cake</li>
<li>Ice Cream</li>
<li>Shahi Kheer</li>
</ul>
</td>
<td class="rice rec">
Rice
</td>
</tr>
</table>
</header>
</body>
</html>