Hover with id not working - css

Question

<style type="text/css">
#parent:hover #abc{
display: block ;
}
</style>
The :hover in this is not working
The following was the code used. Whenever the mouse hovers over #parent #abc should be displayed. But this it is not happening so.
<a class="w3-bar-item w3-button" id="parent">LIK2</a>
<ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
<li class="w3-bar-item w3-button">Link1 </li>
<li class="w3-bar-item w3-button">Link1</li>
<li class="w3-bar-item w3-button">Link1</li>
</ul>
please can someone figure out the problem.
EDIT:
Entire code
<div class="w3-dropdown-hover" style="width: 50%;">
<button class="w3-button">SomeButton</button>
<div class="w3-bar-block w3-black w3-dropdown-content " id="xyz" style="width: 100px; ">
<a class="w3-bar-item w3-button">LIK1</a>
<div style="margin:0px; padding: 0px; position: relative;" id="parent">
<a class="w3-bar-item w3-button">LIK2</a>
<ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
<li class="w3-bar-item w3-button">
Link1
</li>
<li class="w3-bar-item w3-button">
Link1
</li>
<li class="w3-bar-item w3-button">
Link1
</li>
</ul>
</div>
<a class="w3-bar-item w3-button">LIN3</a>
</div>
</div>

Answer 1

because you set inline style for #abc and never let you set other style in head , you should set #abc style in a head , like this :
CSS:
<style type="text/css">
#abc {
list-style-type: none;
margin: 0px;
margin-left: 100px;
position: absolute;
top: 0px;
padding: 0px;
background-color: green;
display: none;
}
div#parent:hover > ul#abc {
display: block;
}
</style>
HTML :
<div id="parent">
<a class="w3-bar-item w3-button">LIK2</a>
<ul id="abc" class="w3-bar-block">
<li class="w3-bar-item w3-button">Link1 </li>
<li class="w3-bar-item w3-button">Link1</li>
<li class="w3-bar-item w3-button">Link1</li>
</ul>
</div>

Answer 2

Use adjacent sibling selector(+) or general sibling selector(~) to select the siblings. Check below snippet for reference. Check here for more details about Combinators selectors.
#parent:hover ~#abc{
display: block !important;
}
<a class="w3-bar-item w3-button" id="parent">LIK2</a>
<ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
<li class="w3-bar-item w3-button">Link1 </li>
<li class="w3-bar-item w3-button">Link1</li>
<li class="w3-bar-item w3-button">Link1</li>
</ul>

Answer 3

try like this, you can give appropriate ids as you needed to do so.
li:hover ul{
display: block !important;
}
<ul style="" id="abc" class="w3-bar-block">
<li>
LIK2<br>
<ul id="inner" style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none">
<li class="w3-bar-item w3-button">Link1 </li>
<li class="w3-bar-item w3-button">Link1</li>
<li class="w3-bar-item w3-button">Link1</li>
</ul>
</li>
</ul>
hope this helps