Listception: A Vertical List Nested Inside a Horizontal List

I am currently working on creating a basic navigation system, and I would like to implement a horizontal list with vertical items within it:

Header 1     Header 2     Header 3
 -Sub 1       -Sub 1       -Sub 1
 -Sub 2       -Sub 2       -Sub 2
 -Sub 3       -Sub 3       -Sub 3

My goal is to achieve the following markup structure, or something similar:

<ul>
    <li><strong>Header 1</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>
    <li><strong>Header 2</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>
    <li><strong>Header 3</strong>
    <ul>
        <li><a href="#" title="1">Abcdefghi</a></li>
        <li><a href="#" title="2">Jklmnopqr</a></li>
        <li><a href="#" title="3">stuvwzyz</a></li>
    </ul>
    </li>

</ul>

I am trying to avoid using floating divs for each header section.

I have attempted to use two CSS classes for the ul elements, with the outer class set to display:inline and the inner class set to display:block, but I have not been able to make it work.

Is there a way to accomplish this without resorting to floating divs?

htmlcss

Answer №1

To avoid using 'floating divs', one option is to float the first-level lis, or alternatively, you can apply display: inline-block to the first-level lis. It's important to note that floating works for IE6 and above, while inline-block is limited to elements that would typically display inline.

Here's a basic demonstration of the first suggestion (floating the first-level lis):

 ul {
   width: 90%;
   margin: 0 auto;
 }
 ul > li {
   float: left;
   width: 32%;
 }
 ul > li > ul {
   display: block;
   width: 100%;
 }
 ul > li > ul > li {
   display: block;
   float: none;
 }
<ul>
  <li><strong>Header 1</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>
  <li><strong>Header 2</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>
  <li><strong>Header 3</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>

</ul>

For the second recommendation (display: inline-block for the first-level lis), here's a simple demo:

ul {
  width: 90%;
  margin: 0 auto;
}
ul li {
  display: inline-block;
  width: 32%;
}
ul li ul {
  width: 100%;
}
ul li ul li {
  display: block;
}
<ul>
  <li><strong>Header 1</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>
  <li><strong>Header 2</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>
  <li><strong>Header 3</strong>
    <ul>
      <li><a href="#" title="1">Abcdefghi</a>
      </li>
      <li><a href="#" title="2">Jklmnopqr</a>
      </li>
      <li><a href="#" title="3">stuvwzyz</a>
      </li>
    </ul>
  </li>

</ul>

Answer №2

If you're looking for a clean code snippet, check out the following example that I put together.

<!DOCTYPE html>
<html>
<body>

<style>
   .ul  li {
  float: left;
  width:30%;
}

.ul>li ul{
   display:block;
   margin-left:-30px;
}

.ul>li ul>li{
   display:block;
   float:none;
}
.ul>li a{
    color:white;
}

footer {
    padding: 20px;
    padding-bottom: 100px;
    background: #333;
    color:white;
}

</style>

<footer>
<div>
<ul class="ul">
   <li>
       Hello
         <ul>
            <li><a href="#">link one</a></li>
            <li><a href="#">link two</a></li>
            <li><a href="#">link three</a></li>
         </ul>

   </li>
   <li>
       My friend
         <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
         </ul>

   </li>
   <li>
       How are you

         <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
         </ul>

   </li>
</ul>
</div>

</footer>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revise the content within the table cell

Running the following code using server push: $('tr[name=' + device + ']').find("td[id='status']").text('STARTED'); When attempting to access the element's id, it returns the correct value. $('tr[name=& ...

javascriptjqueryhtml

Receiving an HTML form with a hidden input on the server: Best practices and steps to follow

On my webpage, there is an HTML form where a third party application adds a hidden input. How do I access this hidden input on the server side? If I'm unable to determine the exact name of the hidden input, can I retrieve the entire form on the serve ...

javascripthtmljsf

Bootstrap: Ensuring vertical stacking of columns on mobile devices for responsive design

Here is the code snippet I am working with: <div class='carousel'> <div class='data-ng-repeat='{{ repeat }}'{% endif %}> <div class='col-xs-12 col-sm-3 vdivide valign-wrap' data-ng-repeat=&apos ...

csstwitter-bootstrap

``There seems to be a problem regarding the alignment of elements in

Having some trouble with centering the grid on my simple website. As a beginner in Bootstrap, I'm seeking guidance. Will be grateful for any help you can offer! Please bear with me as I learn. <html> <head> <meta charset="utf8"/& ...

htmltwitter-bootstrapcss

Ensure that the textbox remains valid when the reset button is clicked in Bootstrap

After implementing the code for bootstrap textbox and textarea, I encountered an issue when using the reset button. When entering an invalid shop name followed by a valid address and clicking on the Reset button, it resets the form. However, if I then only ...

javascriptjqueryhtmlcsstwitter-bootstrap

Guide to selecting HTML components from an Angular service

Within my app.component, I have integrated a component called comp1. The HTML file for comp1.component.html contains buttons defined as follows: <button #myButton (click)='function()'> Temporary </button> <button #myButton2 (click ...

htmlangularrxjs

iOS Safari may struggle to fully load a webpage on the first attempt

Our website functions perfectly on all browsers and devices, except for an issue that occurs only the first time it is opened on Safari mobile or Safari Mac with narrow screens. Website: To reproduce on iPhone Safari: Open the website in private mode R ...

htmlioscssmacossafari

How can you create a vertical bar graph using CSS that fills in from the bottom to the top instead of top to bottom?

I have created a bar graph using HTML and CSS. The issue I am facing is that the bar fills up in reverse order - when the height is set to 0%, the bar appears filled at 100%. I attempted changing the CSS property from "top" to "bottom," but it did not reso ...

htmlcssbar-chart

PHP Multiple Filter Options

Currently, I am developing a filtering system for a mySQL database that utilizes dropdown menus. While the system functions correctly when using one filter, I am encountering difficulties in stacking multiple filters. To achieve this, I am retrieving the c ...

phphtmlmysqldatabasefilter

Issue with Bootstrap table in IE11 due to Flex styling

There seems to be an issue with IE11 and Flexbox when using Bootstrap tables. My table row is set up like this: https://i.sstatic.net/iLoNS.png I have a table design that is scrollable to the right due to the numerous fields in it. The flex with column ...

htmlcssflexboxbootstrap-4internet-explorer-11

Updating the content of a bootstrap alert in real-time by utilizing a form

I am looking to incorporate the following code snippet into my project: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...

htmltextalertdisplay

Try using the statement "Assert.IsTrue" to confirm the object's position

Objective: By pressing on a custom link, you are directed to a webpage where the screen displays specific text - "Padding - Shorthand Property". The aim is to use Assert.IsTrue to ensure that the padding shorthand property and its content are within the ...

c#htmlcssselenium-webdriver

Can you please provide guidance on implementing automatic horizontal scrolling with pauses between each div?

setInterval(function scroll() { $(".box_auto").each(function(i, e) { $("html, body").animate({ scrollTop: $(e).offset().top }, 500).delay(500); }); setTimeout(function() { $('html, body').animate({ scrollTop: 0 } ...

javascripthtmljquerycss

Ways to modify div content depending on the size of the screen

When the screen size becomes small, my goal is to modify the content within the row divs of the indices_container. Currently, all screen sizes display the index name, price, 1-day change, and year-to-date (YTD) change for each row. I only want to show the ...

htmlcssbootstrap-4frontend

Discover how to extract the header columns from a CSV file using jQuery and transfer the data from Python to jQuery to populate a

Hi everyone, I have an HTML program where I'm utilizing jQuery to move items from one multi-select list to another. Here is the code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> upload ...

pythonjqueryhtml

Two very similar HTML forms, one submits the accurate value while the other does not

There are two forms displayed on my page welcome.php, as follows: <form action="welcomeforms.php" method="post" name="Food_Calories"> <h4>.</h4>//spacer <input type="text" name="breakfast_calories" value="Calorie Amount" onFoc ...

phphtmlformsundefined-index

Stylish CSS typography options for both Mac and Windows users

When browsing various websites, I've noticed that many of them showcase beautiful fonts without using images. Examples include The Firebug site and Happy Cog. It seems like web designers use CSS tricks and JavaScript to achieve this effect. I'm ...

cssfonts

Loop through a Map containing a List of objects in Angular 4

export class Individual { name: string, age: number, addressList: Map<string, Addresses[]>; } I am looking to extract and analyze all addresses of each individual. <div *ngFor="let person of individuals"> <div *ngFor="let addr o ...

javascripthtmlangulartypescript

What is the best way to showcase my divs in a masonry layout using flexbox?

I am attempting to design display divs in a masonry style using flex/flexbox. The layout must consist of a maximum of 2 columns, with each div having the same width (thus dividing into 2 columns equally) while varying in height based on their content. Some ...

htmlcss

Troubleshooting non-responsive Bootstrap navigation bars in HTML/CSS

As I implement a Bootstrap Navigation Bar at the top of my webpage, I notice that it tends to collapse when the page hits a certain length. This seems to be a common feature among many Bootstrap Navbars, where all headings are condensed into a button on th ...

htmlcsstwitter-bootstrapnavbarnav