https://i.sstatic.net/8ulvX.png
Yellow is currently the color of <li> elements that are children of <ul>. However, if I apply either a float or display property to the <li> or <ul>, the appearance changes.
https://i.sstatic.net/lP82b.png
The pink colored <li> elements which are nested inside another <ul> will change their appearance like this: link
<ul class="top_nav">
<li>name
<ul class="sub_nav">
<li>name1 icnkdn ndkcnks kkncksn </li>
<li>name2</li>
<li>name3</li>
</ul>
</li>
<li>home</li>
</ul>
.top_nav{
list-style-type:none;
padding:0;
}
.top_nav > li {
padding:1em 2em;
background:yellow;
position:relative;
}
.sub_nav{
position:absolute;
z-index:1;
background:green;
}
.sub_nav li{
display:block;
background:pink;
padding:1em 3em;
}