My HTML includes the following ul tag:
<ul style="position:absolute">
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>
list 4
<p>list 4 content goes here</p>
</li>
</ul>
I am aiming to create the layout shown below.
+-----------+-------------------------+
| list 1 | list 4 |
| list 2 | list 4 content goes here|
| list 3 | |
+-----------+-------------------------+
Currently, I've attempted using float:none for list 1 - list 3 and float:left for list 4. However, list 4 ends up at the bottom instead of beside list 1 - list 3.
How can I achieve this layout?
Here is the CSS code:
ul.parent-menu>li>ul.sub-menu{
display: none;
position: absolute;
width: 1000px;
padding: 0;
list-style: none;
background: #b6b6b6;
border-top: 5px solid #b81d18;
z-index: 10;
}
ul.parent-menu>li:hover>ul.sub-menu{
display: block;
list-style: none;
}
ul.parent-menu>li:hover>ul.sub-menu>li{
float: none;
width: 250px;
padding: 10px 20px;
}
ul.parent-menu>li:hover>ul.sub-menu>li.menu-item-has-children{
float: left;
width: 250px;
padding: 10px 20px;
}
My goal is to use float:none on all lis that do not have the menu-item-has-children class.