My parent container .secondary-nav-wrap has the following CSS:
.secondary-nav-wrap {
margin: 30px 0;
position: relative;
}
Within it, there is an ordered list (ol) with varying list items (li), and an absolutely positioned div .import-26-as with the following CSS code:
position: absolute;
top: 0;
right: 0;
Everything works fine when there are three list items:
https://i.sstatic.net/fk8fV.png
However, when the number of list items increases to 5 or 6 (max), the Import div overlaps with the list items as shown below:
https://i.sstatic.net/i29TH.png
I am aiming for a design where the yellow div automatically adjusts itself accordingly.
https://i.sstatic.net/3VDh9.png
I am okay if the yellow div overflows out of its parent div.
Edit:
The CSS code for the list item (li) is:
.primary-nav li, .secondary-nav li {
float: left;
text-align: center;
list-style: none;
max-width: 190px;
}
The CSS code for the ordered list (ol) is:
.primary-nav, .secondary-nav {
display: inline-block;
margin-right: auto!important;
margin-left: auto!important;
position: relative;
margin-top: 0;
margin-bottom: 0;
}
The CSS code for the yellow div is:
.import-26-as {
position: absolute;
top: 0;
right: 0%;
font-family: "Source Sans Pro",Helvetica,Arial;
font-size: 12px;
color: #4c4725;
height: 34px;
overflow: hidden;
-moz-transition: height 150ms ease-out;
-o-transition: height 150ms ease-out;
-webkit-transition: height 150ms ease-out;
transition: height 150ms ease-out;
}
The parent div is enclosed within a container div with the following CSS:
.container {
width: 950px;
margin: 0 auto;
}