What is the best way to place a list below another list, which also includes a sub-list, in a responsive website design without causing the main lists to overlap

I have lists containing sub-lists, and I want to ensure that when the window screen is shrunk, the lower lists do not overlap the sub-lists of the upper ones.

HTML markup -


         <div class="row-fluid">
            <ul>    
               <li class="menulinks">.....</div>
                 <ul>
                     <li class="submenulinks"><div>.....</div></li>
                 </ul>
               </li>
            </ul>
        </div>

CSS -

.sitemap .menulinks{
    background-color:green;
    border-radius: 10px;
    margin-top: 20px;
    text-align:center;
    padding-top:10px;
    margin-left: 0px;
    margin-right:10px;
    color: #FFFFFF;
    height:35px;
    width:11%;
    float:left;
    min-width: 100px;
    display:block
}
submenulinks{
    margin-top: 20px;
    margin-right:10px;
    color: green;
}

Desired Output in small screen: https://i.sstatic.net/V0ss1.jpg

Existing : https://i.sstatic.net/YLhuR.jpg

Answer №1

Quite easy: just get rid of the fixed height in your li.menulinks, insert a "header" (green rounded rectangle with 35px height) div as the first child of the li and...you're good to go!

Check out this fiddle : http://jsfiddle.net/32pga/

<div class="sitemap">
    <div class="row-fluid">
        <ul>
            <li class="menulinks">
                <div class="menulinks-header"></div>
                <ul>
                    <li class="submenulinks">
                        <div>Test 1</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 2</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 3</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 4</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 5</div>
                    </li>
                    <li class="submenulinks">
                        <div>Test 9</div>
                    </li>
                </ul>
            </li>
            (more list items similar to the above structure)
        </ul>
    </div>
</div>

And here's the CSS :

.sitemap .menulinks {
    margin-top: 20px;
    text-align:center;
    padding-top:10px;
    margin-left: 0px;
    margin-right:10px;
    color: #FFFFFF;
    width:11%;
    float:left;
    min-width: 100px;
    display:block;
}
.sitemap .menulinks-header {
    height:35px;
    background-color:green;
    border-radius: 10px;
}
.submenulinks {
    margin-top: 20px;
    margin-right:10px;
    color: green;
}

If you set a fixed height of 35px for your li.menulinks element, you are explicitly indicating to the layout engine where to position elements below the green rounded rectangle - essentially 35px below the top of your li.

Keep in mind that the children of your li elements are displayed as overflow. If you include the "overflow:hidden;" declaration to your li.menulinks, the children will not be visible.

Allow the layout engine to calculate the height of your li elements automatically by avoiding setting a specific height value.

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

Prevent one individual cell in a table from dictating the overall table width

A B A B A X A B In a contained block with a fixed width of 400px, there is a table. When the browser width drops below 421px, the width of the containing block changes to 95%. The cells labeled "A" and "B" contain simple text. There is one cel ...

Three-dimensional.js and components of the design

Looking for advice on how to manipulate individual parts of a 3D model in Three.js. My model is made up of various components that I need to control separately. Any tips or suggestions would be greatly appreciated. Thank you! ...

The smooth scrolling feature of jQuery does not function properly when combined with the Bootstrap 4 Navbar

Here is the code I have for the navigation bar on a website I am currently working on: <body data-spy="scroll" data-target="#navbar" data-offset="20"> <!-- navbar --> <div id="home"> <div id="navbar"> <nav class="n ...

Iterate through each of the <dd> elements and use Mechanize/Nokogiri to extract specific data

My journey into learning website access started just yesterday, and although I understand the basics, I am now eager to delve deeper. However, while exploring various tutorials on Mechanize/Nokogiri, I encountered conflicting methods that left me feeling p ...

Load the Google Maps JavaScript file only when it is required

I am working on a page that contains a button to open Google Maps in a modal. Since this function is rarely used by users, I am exploring the possibility of loading the Google Maps library only when it is needed. I would rather have the user wait for the m ...

Adjust and place div in relation to image with full height perspective

Looking for a better headline... On my non-mobile device page, I want to ensure that a large image always fits the window height. Take a look at the page. This is how I've set it up: #background{ position:absolute; background-color:#F00; ...

Ensuring that images are the perfect size for their parent container

Exploring the functionalities of angular bootstrap carousel, I am eager to showcase various images and enable clicking on them. The challenge I'm facing is that my images are not uniform in size and don't fit perfectly within my bootstrap column ...

Tips on reducing the height and improving responsiveness in Bootstrap 4

I've been struggling to adjust the image height to take up 75% of the screen. I attempted using height: 75%; and class="h-75", but it doesn't seem to be effective. Currently, I have class="h-800" with h-800 { height: 800px; }, ...

I would like to learn how to showcase a two-column array using PHP and HTML

In my current setup, I have a collection of icons that are displayed in groups of 4. This means that if there are 7 icons, the 4th icon on the first slide will be repeated as the 8th icon on the second slide. To resolve this issue, I am looking to iterate ...

Create a knitted document with printr that shows the raw HTML code instead of the rendered HTML

I am currently utilizing the printr package within my iemisc package to generate help pages in an rmarkdown HTML file. However, I am encountering issues with the HTML not displaying properly. To view the HTML webpage, please visit , and for the correspond ...

The mdSidenav service encounters difficulties locating a component within an Angular component

Trying to understand why an Angular .component(), which contains a <md-sidenav> directive, cannot be located from the component's controller. Angular throws the error message: No instance found for handle menu The complete component code is ...

Instructions for transferring an object from a list box with Selenium WebDriver

My webpage has 2 list boxes, one on the left and one on the right, with transfer arrows. To move an item from the left list box to the right side, I need to select it from the left list and click on the arrow. I attempted to write the code below but it is ...

PHP encountered an error while trying to output the data sent via

While experimenting with a simple web form action in PHP, I encountered an interesting issue. Regardless of the input provided in the field, the output value always turned out to be 1. Additionally, there seemed to be an undefined index error for both us ...

Enable automatic indentation for wrapped text

I'm still learning the ropes here, but I'm looking to have text automatically indent when it's wrapped. Instead of this: Peter piper picked a peck of pickled peppers. It should look like this: Peter piper picked a peck of pickled pepp ...

arrange objects into an array depending on punctuation marks

Currently, I am in the process of developing a method to retrieve data from my MySQL database and present it as an array. However, the issue I am facing is that only one string of data is accessible at a time, with each instance separated by a comma. For e ...

Achieve perfect vertical alignment for a set of three identical boxes using CSS media queries

Bootstrap is being used and the goal is to align three boxes of the same height vertically. https://i.stack.imgur.com/8xg0g.png Currently, the three blocks are not of equal height and do not occupy maximum space. Some manual padding has been added to addr ...

Enhance Your Layout with Bootstrap 5 Images and Centered Elements

As I delve into learning Bootstrap 5, I am experimenting with creating a more "advanced" layout. The idea is to have two images positioned next to each other with titles below them, and a div centered between both. Ultimately, they will be displayed in a r ...

What is the best way to send information from my HTML page to a listener?

I am in the process of designing a user interface for an Automated Parking System. In order to test if my page successfully sends out data from a form to a listener, I have written this code. However, I am facing some issues and would appreciate any assist ...

Learning to activate music on a webpage using the tab key in HTML

Is there a way to trigger the playback of an mp3 file when the tab key is pressed on a keyboard? I am designing a number system for a restaurant where entering a number and pressing tab will result in a noise being played to bring attention to the numbers ...

What is the best way to halt a JavaScript function originating from embedded iframe content?

When I embed another website using iframe, there is a javascript function on their page that I do not want to run on my own page. Here it is: if (top.location != location) { top.location.href = document.location.href; } I attempted a solution but it ende ...