When nearing the edge of the window, extend the submenu in the opposite direction

I've created a simple submenu using CSS, structured as an unordered list. It appears on hover by changing the display property to "block".

<ul>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li>
        <a href="#">item with submenu</a>
        <ul class="submenu">
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        </ul>
    </li>
</ul>

Here is the corresponding CSS:

.submenu {
    display: none;
    position: absolute;
}

ul li:hover>ul.submenu {
    display: block;
}

You can view an example here: http://jsfiddle.net/Y2vgj/

And also here:

(Both links lead to the same example)

My goal now is to expand the submenu in the opposite direction if the page size is too small to display it completely. Can anyone assist me with this?

Answer №1

Here are the updated CSS styles for submenu items:

.submenu li {
    float: none;
    width: 150px;
    list-style-type: none;
    display: inline;
    margin: 0 10px; /* Adjusted margin */
}

By adjusting the margin and width, the submenu items will be properly positioned and displayed horizontally.

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

Instructions on extracting the ID value from a specific field by utilizing a text box autocomplete feature

This is the code snippet I utilized for implementing auto complete functionality: Within the HTML View: <script> $(function () { $("#autoComp").autocomplete({ source: '@Url.Action("GetAutoComp")', ...

What is the reason behind the inability to set a maximum width for containers?

Here's a piece of XML code that I'm working with, and I need to figure out how to set the max width for the linear layout to 600dp. Why is it that Android doesn't allow this kind of customization? EDIT: The main question here is not about h ...

Tips for utilizing AJAX to send data from a specific row

<table> <tr data-id="1"> <input type="text" name="name_1" value="abc"> <input type="text" name="value_1" value="1"> <a href="load_edit_row(this)">Edit</a> </tr> <tr data-id="2"> <input t ...

Influencing various classes when :active is triggered

I encountered a challenge while working on an HTML project. I included a checkbox that should highlight all text input fields when checked. However, I'm facing an issue where some of the input fields within tables are not being affected by my code. An ...

The alignment of my card icons changes depending on the size of the paragraph

Here are my cards I am attempting to give them a relative position and the parent div an absolute position, but it is not working as expected. Despite several attempts, I still cannot get the desired result of positioning the cards correctly within the p ...

How can jQuery incorporate additional selection criteria for a parent element?

How can I apply a specific criteria to a node that has been selected using jQuery? let objDIV = $("#selindividual").parent(); After retrieving the DIV, I want to target the following: button:contains(\"Submit\") If I had to do this in ...

The array is producing accurate results, however it is displaying as undefined in the HTML output

I have encountered a problem while working on my project. I am utilizing an API to fetch an array of platforms where a video game is available. Although the array is returning the correct data, I am facing difficulty in displaying these values in my HTML a ...

Enhancing Functionality: JavaScript customization of jQuery (or any other object's) function

Within this jsfiddle, the author has created a test for a custom knockout binding. A key aspect of the test involves extending jQuery. My question pertains to lines 30. $.fn.on = function(event, callback) { where it appears that any existing definition o ...

Tips for implementing an autoscroll feature in the comments section when there is an abundance of comments

Having a large number of comments on a single post can make my page heavy and long sometimes. This is the current layout of my post comment system: Post 1 Comment for post 1 //if comments are more than 3 <button class="view_comments" data-id="1">Vi ...

Sending a Boolean value from a child component to its parent state in React JS

Within my application, I have implemented a login feature in the navbar component. However, I am encountering an issue with updating a variable in the main component upon successful login. Although I have successfully managed to set up the login functional ...

CSS: Including an item in a list causes the <div> to expand upwards on the page instead of stretching downwards

I’m currently facing an issue with my list where, upon reaching a certain number of items (in this case 5), the list starts moving up the page instead of extending downwards as expected. I suspect that this problem is related to my use of CSS grid-templa ...

Transform the text color of a table generated by a v-for loop

I have a Vue.js setup to exhibit a collection of JSON data which consists mainly of numbers. These numbers are displayed in a table format, with one minor issue - if the number happens to be negative, the text color of its cell needs to be red. <table& ...

Accessing the value of a field using JavaScript/jQuery

Welcome to my page! I am working on obtaining the current Start and Finish date values. I plan to add a button for users to click, which will then retrieve all dates and display them somewhere on the page. But for now, I just need a way to access the date ...

Firefox is having trouble keeping <select> tags within their designated borders

I am currently developing a mobile app that requires the use of 3 <select> elements stacked on top of each other. It is crucial for these tags to align perfectly with each other and not extend beyond the boundaries of the background div. I have manag ...

The validation process fails when the button is clicked for the second time

When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...

Tips for keeping your avatar contained within a Bootstrap grid

I am attempting to adjust the positioning of my "image holder" (avatar) with a top and bottom margin of 3px, but when I implement this change, the image holder shifts outside of the grid. Below is the code snippet in question: <div class="container con ...

What is the most effective method for incorporating personalized React components in the midst of strings or paragraph tags

Summary: Exploring the frontend world for the first time. Attempting to integrate custom components within p-tags for a website, but facing challenges in making them dynamically changeable based on user interaction. Greetings all! As a newbie in front-end ...

What is the best way to align a div to the bottom of a table cell?

I need help with positioning a div inside a table cell that has 100% height. How can I align this div to the bottom of the cell? Furthermore, there are other divs within the same cell that I would like to position in the middle and at the top. ...

What are the reasons for AJAX not functioning properly on my local machine?

I recently followed an AJAX Tutorial and attempted to replicate the steps outlined in the tutorial. However, I encountered difficulties as my code does not seem to work as expected. Here is a breakdown of what I have implemented: index.jsp In the header ...

Printing a React component using a button causes formatting related to className to be lost, while printing it inline preserves the formatting

I've hit a roadblock in trying to figure out the React and printing issue for the past week and a half, and it feels like I'm going in circles. Despite finding some helpful solutions on Stack Overflow, none of them seem to work completely for me ...