The vertical navigation sub-menu is designed to overlap the div container for a

I'm having an issue with my sidepanel vertical navigation where sub-menus are not being displayed properly due to a div container. The width of the div container [side-panel-links] is causing the sub-menus and children of the sub-menus to be cut off. If the width of the div container is extended, the sub-menus can be seen.

Is there a way to make the sub-menus overlap the div container in order to display them correctly?

You can view the demo here: http://jsfiddle.net/xkBZE/1/

Here's a snippet of the HTML code :

    <div class="side-panel-links left">
    <div class="side-panel-links-scroll">
        <div id="myslidemenu" class="jqueryslidemenu">
            <ul id="side-panel-list">
                <li>
                    <a href="#">Test 1</a>
                    <ul class="side-panel-list-child"></ul>
                </li>
                <li>
                    <a href="#">Test 2</a>
                    <ul class="side-panel-list-child">
                        <li>Test 2-1
                            <ul class="side-panel-list-child">
                                <li>Test 2-1-1
                                    <ul class="side-panel-list-child">
                                        <li>Test 2-1-1-1
                                            <ul class="side-panel-list-child"></ul>
                                        </li>
                                    </ul>
                                </li>
                                <li>Test 2-1-2
                                    <ul class="side-panel-list-child"></ul>
                                </li>
                            </ul>
                        </li>
                        <li>Test 2-2
                            <ul class="side-panel-list-child">
                                <li>Test 2-2-1
                                    <ul class="side-panel-list-child"></ul>
                                </li>
                            </ul>
                        </li>
                        <li>Test 2-3
                            <ul class="side-panel-list-child">
                                <li>Test 2-3-1
                                    <ul class="side-panel-list-child">
                                        <li>Test 2-3-1-1
                                            <ul class="side-panel-list-child"></ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Test 3</a>
                    <ul class="side-panel-list-child"></ul>
                </li>
                <li>
                    <a href="#">Test 4</a>
                    <ul class="side-panel-list-child"></ul>
                </li>
            </ul>
        </div>
    </div>
</div>​

Any help is appreciated!

Answer №1

It is advisable not to use the same id for everything; classes are designed for this purpose. To display something differently, consider using

position: absolute; z-index: 100;
on the specific element, such as the <ul> nested within the <li>.

I found your css confusing, so I made some changes:

--> revised css

.side-panel-links{
width: 240px;
background-color: #272727;
padding-top: 25px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif ;
}
.jqueryslidemenu ul li ul{
left: 0;
display: block;
visibility: hidden;
}
#side-panel-list{
list-style-type: none;
margin: 0;
padding: 0;
}
#side-panel-list li {
border-top: 1px solid #353535;
border-bottom: 1px solid #191919;
padding: 10px 0 10px 20px;
margin: 0;
}
#side-panel-list li ul{
position: absolute;
left: 300px;
display: list-item;
}
#side-panel-list li a {
color: #EEE;
margin: 0 50px 0 0;
width: 161px;
display: list-item;
color: white;
padding: 8px 8px;
border-right: 1px solid #CCCCCC;
text-decoration: none;
}
#side-panel-list li ul li{
padding: 5px;
display: block;
background-color: red;
}
#side-panel-list li a:link,
#side-panel-list li a:visited {
color: white;
}
#side-panel-list li a:hover{
background: black;
color: #426BA4;
}​​​​​​​​​​​​​​​

While this solution works, additional styling may be needed to achieve the desired aesthetic. Hope this information proves beneficial.

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

Sending image to the server with the help of JavaScript

Curious if there is a method to upload an image to the server using javascript or jQuery and then save the image path/name into a database. I am working on a Windows platform server in asp.net 1.1, revamping a web page that is 10 years old. Unfortunately, ...

Retrieving JSON data with jQuery's Ajax functionality

I'm currently developing a web application to handle the administrative tasks for a restaurant. The main functionalities include creating new orders, adding order items, and managing financial overviews. One of the key features is the ability to view ...

Utilizing inter-process communication in Electron to establish a global variable from the renderer process

renderer.js ipcRenderer.sendSync('setGlobal', 'globalVarName').varInner.varInner2 = 'result'; main.js global.globalVarName = { varInner: { varInner2: '' }, iWontChange: ' ...

What is the best method for overlaying text on individual images in a slideshow?

Currently, I am delving into the world of jQuery, experimenting with various slideshows and attempting to incorporate text and effects. In my endeavors, I stumbled upon this codepen that served as an excellent template. However, when I tried adding text o ...

When the condition is false, Angular 8's ngIf creates an empty element

Encountering an issue with Angular8 and ngIf: I have a piece of code that generates a div element loading images and their associated details onto a webpage from a JSON file based on a condition: HTML Code: <div class="row" > < ...

Harness the power of Jquery with the masonry('hide', element) method on a carefully selected jquery element

Currently, I am utilizing Masonry to create a dynamic layout on my website but have encountered an issue with its hide and reveal functions. During an event, the following code is being executed: $container.masonry('hide', $(this)); It seems ...

Unable to retrieve href URL from html_node using rvest

Having trouble using the rvest package and xpath to extract embedded links (football team names) from websites and getting empty results. Any suggestions on how to fix this issue? Check out the code below: library(rvest) url <- read_html('https: ...

splitting up the lengthy list into manageable chunks according to the screen dimensions

How can I make the blue color row-based list (the divs inside a div with id phrase) break on the next line based on the screen size? Any suggestions on additional changes needed in the following CSS? #phrase { color: #fff; position: ...

Setting the UrlAction in an Asp.Net Core Controller: A step-by-step guide

There is an input box for searching on the website... The following HTML code snippet shows how the search functionality is implemented: <form id="searchForm" asp-controller="Product" asp-action="SearchProduct" method=&quo ...

Enhancing Material UI KeyboardDatePicker with personalized CSS design

Material UI KeyboardDatePicker is the component I'm currently using. https://i.sstatic.net/It50L.png In order to remove the black line visible in the datepicker (as shown in the screenshot), what steps should I take? Displayed below is the code ...

Ensure that the input box expands to occupy the entire HTML page

After reviewing numerous pages and questions related to this topic, I have located the correct solution but am struggling to implement it. My goal is to achieve a similar outcome to the second question, but I'm having difficulty figuring out how to do ...

Unable to generate a vertical navigation bar

When attempting to create a vertical menu, the final result doesn't align as expected. https://i.stack.imgur.com/2ok47.jpg This is the current code being used: $("#example-one").append("<li id='magic-line'></li>") ...

Steps to record and upload a video directly to the server using getusermedia

For my application, I need the user to record a video and have it saved on the server disk instead of downloading it to the client browser. I am currently using getusermedia for this purpose, with the following code: (function(exports) { exports.URL = exp ...

The challenge of incorporating mod_rewrite with CSS files

I am new to mod_rewrite. I have a page profiles.php?page=XXX and I tried to change its URL to something more friendly like /cars/XXX/ RewriteEngine on RewriteRule ^cars/([^/]+)/?$ profiles.php?page=$1 [L] The issue arises when including styles: <li ...

The persistence of postback from the javascript function despite returning false when utilizing Asp Radiobuttonlist

HTML: <asp:RadioButtonList ID="rdStatus" runat="server" Height="48px" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="rdStatus_SelectedIndexChanged" CssClass="rad"> ...

Enhancing User Experience: Manipulating a Remote Div with Struts2, jQuery, and Tiles Plugin

Learning how to use a remote division has been a challenge for me, so I decided to explore the struts2-jquery-plugin showcase. However, I found myself struggling to understand how everything functions. Here is what I discovered in the download: struts.xml ...

Creating a responsive YouTube video embed within a div container with a fixed background image

Hello there, I'm currently working on positioning the YouTube Iframe on the background to make it look like the video is playing on a laptop screen. I also want it to scale down appropriately with the background image on different resolutions. The w ...

Is it possible for CSS to automatically style paragraphs based on the preceding heading class?

Looking to create some unique CSS rules for formatting interview transcripts. The format I have in mind is as follows: <h2 class="interviewer">Alice: [00:00:00]</h2> <p>Is it ok if I ask you a question now?</p> <h2 class="inter ...

Image selection box

I'm looking for a simple way to add images to a select box. Most of the jQuery plugins I've come across are too complex for my needs. I just want to be able to easily insert an image into an option. Thank you! ...

Stumped on the reason PHP isn't receiving POST data from $.ajax request

Although I've been through this process before, I'm baffled as to why the POST data in my PHP script is empty. Here's what I've discovered: I double-checked that the $.ajax call's "data" parameter has a value (both alerts in th ...