As a beginner in coding, I understand that my code may be messy and redundant, so I apologize for any confusion it may cause.
I am working on adding the final piece to my navigation bar. Below is the HTML code, and a fiddle link will be provided at the end for reference.
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li> <a id="h" href=".html">_______ _______ __________</a> </li>
</ul>
<ul class="second-nav">
<li> <a id="a" href=".html">_____ __</a> </li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<div class="flyout">
<li> <a id="r" href=".html">___________</a> </li>
<ul class="flyout-nav">
<li> <a href=".html">___</a> </li>
<li> <a href=".html">______ _ _____</a> </li>
<li> <a href=".html">______ ________</a> </li>
</ul>
</div>
<div class="flyout">
<li> <a id="c" href=".html">__________</a> </li>
<ul class="flyout-nav">
<li> <a href=".html">______ ________</a> </li>
<li> <a href=".html">___________</a> </li>
<li> <a href=".html">______ _____</a> </li>
</ul>
</div>
<li> <a href=".html">______ _______</a> </li>
</ul>
</li>
<li> <a href=".html">_______ __</a> </li>
</ul>
</header>I am trying to uniquely select the two different "flyout-nav" elements, but I'm struggling with specificity in my CSS.
The goal is to round the top left corner of the second "flyout-nav" while keeping the first one square.
I've experimented with pseudo-classes like :first-child, nth-child(), and others, but haven't found a solution yet. Seeking fresh perspectives and suggestions on how to achieve this after spending days analyzing and optimizing the code.
For reference, you can access the Jsfiddle link with my CSS (which may be as messy as my code due to organizational challenges).
Your assistance is appreciated, and feel free to ask for clarification if needed.
Update: Renamed the second "flyout-nav" to "flyout-nav1" and adjusted the associated CSS accordingly.
Updated Jsfiddle link here