The div reveals a submenu by popping out when its overflow is set to hidden

I am trying to figure out how to create a horizontal menu with sliding option and submenu. The issue arises when I set overflow to hidden for the sliding effect, as it causes problems with the submenu. Any suggestions or ideas on how to solve this dilemma would be greatly appreciated.

    .horizontalni {
    border:solid 1px rgba(0,0,0,0.3);
    border-radius:4px;
    box-shadow:0 0 0 4px rgba(125,125,125,0.1);
    padding:0;
    position:relative;
    width:auto;
    max-width:800px;
    background:silver;
    overflow:hidden;

}

/* navigation items */
.horizontalni .navigation {
    background:rgba(0,0,0,0.1);
    color:rgba(255,255,255,0.1);
    display:block;
    font-family:verdana,sans-serif;
    font-size:3em;
    height:55px;
    padding-top:0px;
    position:absolute;
    text-align:center;
    text-shadow:rgba(0,0,0,0.1); 0 0 2px;
    width:50px;
    -moz-transition:all 0.4s;
    -ms-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    -o-transition:all 0.4s;
    transition:all 0.4s;
}

.horizontalni:hover .navigation {
    background:rgba(0,0,0,0.3);
    color:rgba(255,255,255,0.8);
    text-shadow:rgba(0,0,0,0.7); 0 0 2px;
}

.horizontalni .navigation:hover {
    background:rgba(0,0,0,0.5);
}

.horizontalni .previous {
    left:0;
}

.horizontalni .next {
    right:0;
}

/* carousel container */
.horizontalni ul {
    -moz-box-orient:horizontal;
    -ms-box-orient:horizontal;
    -webkit-box-...

For a live demo of this code in action, check out this sliding menu demo.

Answer №1

To ensure the submenu stays in place, setting its position to fixed is recommended.

.sub-menu-container {
    position: fixed;
}

You can view a demonstration on JSFiddle

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

New Trainee - Error: document has not been defined

Encountering an Error message while attempting to run Intern tests from the test files directory. The structure of the directory is as follows: test resources rest pickup.js cashManagement.js gitignore intern.js packages.js ...

Implementing a list using display: inline-block without any specified order

Currently, I am immersed in a project that involves simulating an input using HTML and CSS. This input should be capable of executing a function like: my_cool_function(param0, param1, param2, param3). To accomplish this, I have constructed an unordered lis ...

Having difficulty retrieving the selected value in JSPDF

I am attempting to convert my HTML page into a PDF format by utilizing the following code: domtoimage.toPng(document.getElementById('PrintForm')) .then(function (blob) { var pdf = new jsPDF('p', &apo ...

What is the best location in my redux store to store my socket connection?

As a beginner in the world of Redux, I've been using slices and redux-thunks to manage my redux store. However, I've come to realize that storing my socket connection in the state is not ideal. This connection is critical across multiple componen ...

Manipulating data in node.js as it arrives in separate chunks

Hey there, I am trying to make some changes to the data received from the server. All incoming data via the POST method is processed in chunks. <button id='helloButton'>Send hello!</button> <button id='whatsUpButton'>S ...

Blend a background image using rgba without incorporating a gradient effect

Can you merge a background image with an rgba color without resorting to an rgba gradient? My current CSS3 style appears as follows: html { background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../icons/sombrero.jpg")no-repe ...

Ensure that the columns are consistently displayed on a single row

On larger screens, everything displays correctly. However, when viewing on a phone, the issue arises. I want these two columns to always stay on one row, but currently they stack on mobile devices. How can I ensure that they resize and remain on the same ...

Is there a way to accomplish this without using settimeout?

Whenever the Like button is pressed, I want to trigger the loading process I expect to see LOAD_POST_SUCCESS immediately after LIKE_POST_SUCCESS Pressing the Like button should initiate the load process After LIKE_POST_SUCESS, I want to see LOAD_POST_SU ...

Access a designated div within an iframe following the submission of a form

I wanted to discuss my current setup... Currently, I have two pages in the project - index.html and cart.html. The issue arises when a form on index.html is submitted because it loads cart.html into a pop-up iframe. In this case, the entire cart.html page ...

A step-by-step guide on showcasing freshly submitted input data through Ajax

I'm having trouble with this issue! Once I submit the new input, it doesn't show up in the div. Below is my JavaScript code: $('#addVariable').validate({ rules: { variable: {required:true}} , submitHandler: functio ...

Conceal All Other Divs upon Clicking on a New Div Bearing the Identical Class

I'm having trouble implementing the feature that closes other divs when I click on a new div with the same class. It seems like it should be straightforward, but for some reason, it's not working for me. Here is the link to the fiddle where I&apo ...

Setting up an image DIV for a dynamic overlay effect

Here is a JSFiddle that works correctly with fixed height and width: http://jsfiddle.net/69td39ha/2/. The animation activates correctly when hovered over. I attempted to adapt the above example to be responsive without fixed dimensions. However, I'm ...

The URL for Ajax is not defined

I am currently working on a function that involves fetching an XML file and making some edits to it. This is new territory for me, so I had to do some research on the best approach to accomplish this task. After some consideration, I decided to use AJAX. H ...

Updating jQuery event behaviors based on the value of .html( 'string' )

Visit this link for more information. Feel free to modify the heading if you believe it needs improvement. General I manage a multilingual WordPress website with dynamic menu and navigation controlled through the WordPress admin panel. The multilingual ...

Transform the outcome of Request() into a variable

I'm currently working with the following code snippet: request('http://steamcommunity.com/market/priceoverview/?currency=1&appid=730&market_hash_name=Gamma Case', function (e, r, body){ var req_data = JSON.parse(body); conso ...

Utilizing inappropriate HTML attributes

Imagine I have a different layout: <div> <p>My Laptop </p> <p>My Phone </p> </div> With jQuery, if one of these items is clicked, I want to display its value. Would it be acceptable to store extra information in an att ...

The necessary parameters are not provided for [Route: sender] with the [URI: {name}/{code}]. The missing parameters are name and code

I have encountered a problem while using AJAX and I am struggling to find a solution. Routes: web.php Route::get('/{name}/{code}', 'TestController@counter'); Route::post('/{name}/{code}', 'TestController@sender')-&g ...

Navigate through the parent elements and show the text if the child element is not present

I'm currently exploring how to iterate through all parent classes (.grid) and if there is no child div with the class (.image-container), then to display the (.content-container) within the same (.grid) section. HTML: <style> .grid .content-co ...

Obtaining a JSON reply using Ember

Exploring new possibilities with Ember js, I am eager to switch from fixtures to using an API. Below is the code I have implemented to fetch the data: App.ItemsRoute = Ember.Route.extend({ model: function() { return $.getJSON('http://som ...

Tips for resolving jQuery conflict problems

I am dealing with a jQuery issue where I have two scripts - one for the slider and the other for a dropdown menu. When I remove one script, the slider works but the dropdown doesn't, and vice versa. I have looked at tutorials online on how to resolve ...