Having trouble navigating menus and submenus?

Customizing CSS Styles

On my website, I have two different classes: menu and leftside. Both classes include the ul and li elements. However, when I try to use ul and li in the left side as well, they end up matching with the styles of the menu ul and li.

ul - underlist, li - list

I attempted to modify the style sheet code,

Here is my CSS code:

#leftside{
    float: left;
    width: 230px;
    margin-left: 5px;
    margin-top: 15px;
    overflow: hidden;
    font: 13px Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
    color: #000000;
}

a:hover {
    text-decoration: underline;
    color: maroon;
}

ul {
    padding: 10px 10px 2px 0;
    margin: 0px;
    list-style: none;
}

li li {
    margin-left: 10px;
    margin-right: 10px;
    line-height: 30px;
    padding-left: 15px;
    border-bottom: 1px dashed #BDBDBD;
    background: url(images/img04.jpg) no-repeat left 50%;
}

HTML Code

<li>                    
<ul>
<li><a href="#">Company Profile</a></li>
<li><a href="#">Enquiry</a></li>
<li><a href="#">Career</a></li>
<li><a href="#">Location Map</a></li>
</ul>
</li>

The ul and li styles are conflicting with the menu ul and li styles.

How can I resolve this issue? Please advise.

htmlcss

Answer №1

To reduce the space above the inner list, adjust the padding for the ul to be 0 or even negative.

For instance:

ul {
    padding: 0 10px 2px 0;
    margin: 0px;
    list-style: none;
}

You can also create a separate style sheet to fix the issue in Internet Explorer by adding something along these lines:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

In this case, you would need another CSS file named iespecific.css containing the aforementioned ul styling.

Answer №2

To differentiate between the two, use an id.

Here is an example of how the HTML code would look:

<ul id="outer">
<li>The Outer List</li>
<li>More Outer List                    
  <ul id="inner">
   <li>This is the inner list</li>
   <li><a href="#">Company Profile</a></li>
   <li><a href="#">Enquiry</a></li>
   <li><a href="#">Career</a></li>
   <li><a href="#">Location Map</a></li>
  </ul>
</li>
<li>Still The Outer</li>
</ul>

In the CSS file, you can include styles like this:

#outer ul {
   padding: 10px 10px 2px 0;
   list-style: none;
}
#outer li {
   margin-left: 10px;
   line-height: 30px;
   padding-left: 15px;
}
#inner ul  {
   padding: 10px 10px 2px 15px;
   list-style: none;
}
#inner li {
   margin-left: 10px;
   margin-right: 10px;
   line-height: 30px;
   padding-left: 15px;
   border-bottom: 1px dashed #BDBDBD;
   background: url(images/img04.jpg) no-repeat left 50%;
}

This setup will render a structure similar to the following:

View Example Image

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

"Utilizing CSS exclusively in conjunction with a PHP API for seamless integration

My CSS is working only when inline, and I'm struggling to track down the reason for this issue. As a beginner in web design, I am unsure of what steps to take to troubleshoot the problem. Since I cannot open the console to check for errors, what facto ...

phphtmlcssapi

Hovering over the Laravel Breeze dropdown will activate a dropdown feature

Recently, I've been working on a project with Laravel Breeze and have been utilizing some default components. The dropdown component used in the navigation bar caught my attention. By default, it requires a click for the menu to drop down below. Howev ...

htmllaravelvue.jstailwind-csslaravel-breeze

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove ...

javascriptjqueryhtmlcsssidebar

Manipulating AngularJS with Sass variables

Currently, I am developing a theme changer using AngularJS and I'm facing difficulty in figuring out how to swap one SASS file with another (both containing variables) when the user changes their theme. I understand that once SASS is compiled to CSS, ...

cssangularjssassnode-sass

Discovering additional element information while utilizing the 'Sortable' feature

My Current Objective: In my setup, I have a 'calendar' comprising 5 columns, each column containing 5 separate divs known as timeslots. The main purpose here is to show appointments in these specific timeslots and utilize JQuery's Sortable ...

javascripthtmlajaxjquery-uijquery-ui-sortable

JavaScript code to make titles slide in as the user scrolls

Looking for a better way to make all titles slide in upon scrolling instead of coding individually? Consider using a forEach loop! Here's how you can modify the code below: function slideInLeft() { document.querySelectorAll('.subtitle-left ...

javascripthtmlcssfor-loopforeach

Having trouble positioning the image at the center of the ion-slides

I'm currently working on designing a slide within an ion item. Everything seems to be functioning correctly, however, the image inside the slide is not appearing in the center. <ion-item style="height:45%; padding-left: 0;"> <ion-slides ce ...

htmlcssionic-framework

variance in efficiency when retrieving a DOM element

While this may not make much of a difference for smaller, simpler DOM elements, the performance impact could be significant when dealing with larger, more complex ones. Is there a noticeable performance gap between storing an element in a variable and cons ...

javascriptjqueryhtmldom

Show loading message on keypress using jQuery

I need assistance with a unique jQuery script for the desired functionality: While inputting text into the text field, I would like the adjacent 'Load' text to be displayed. If typing stops, the 'Load' text should change to 'Del& ...

phpjqueryhtml

The font from the server is not displaying correctly in the local HTML file

After uploading the ttf font file to the server, I utilized the following CSS code: @font-face { font-family: "fontname"; src: url("http://www.mywebsite.com/Fonts/fontname.ttf"); } body { font-family: "fontname", sans-serif; } Within the loc ...

htmlcss

Trigger a modal to open based on a specific condition

I have successfully implemented a default modal from Materialize, but now I am looking to add a conditional opening feature to it. In my application, there is a countdown timer and I want the modal to automatically appear when the countdown reaches a certa ...

javascripthtmljquerytwitter-bootstrap

Center the first column in jQuery Datatables

Looking to center-align only the first column named "Status": $("#TransactionTable").DataTable({ ajax: { url: '/Transaction/SearchMockup', type: 'POST', data: { ...

jqueryhtmlcssdatatables

Sections that intersect one another

The 'home-screen' section overlaps with every other section. You can check out the live link here: Hello Sylhet. However, the page should actually look like this: https://i.sstatic.net/VQwG4.jpg ...

htmlbootstrap-4

Aligning the title vertically in Ionic on Android device

Currently, I am in the process of developing an application using the Ionic framework and cordova. After uploading my app for testing purposes, I encountered a small issue. The title in the top bar on Android appears to be misaligned vertically. Is there a ...

androidcssangularjscordovaionic-framework

Tips for adjusting row height in a fluid table design using div elements

I'm having trouble making a responsive table (a keyboard) where only the cells are resizing instead of the whole keyboard fitting on the screen without any scrolling required. Here is the code I have so far: https://jsfiddle.net/723ar2f5/2/embedded/r ...

htmlcssresponsive-design

Do we really require a mime type to play videos in HTML5?

I recently stumbled upon an interesting observation while coding a video player using HTML5. Surprisingly, I found that my code runs smoothly even without specifying the type attribute (which defines the mime type) in the source element as shown below. Co ...

htmlvideo

Troubleshooting Issues with Implementing JavaScript for HTML5 Canvas

I've encountered an issue with my code. After fixing a previous bug, I now have a new one where the rectangle is not being drawn on the canvas. Surprisingly, the console isn't showing any errors. Here's the snippet of code: 13. var can ...

javascripthtmlcanvashtml5-canvas

"Even when hidden, an HTML Div element still occupies space on the

I encountered an issue with my tabbedPage setup. Even though I have hidden content, it still occupies space on the page. Here is the code snippet that I am using: let tabHeader = document.getElementsByClassName("tabbedpage-header")[0]; let tabIndicator = d ...

javascripthtmlcss

I am looking to generate div elements using JavaScript to avoid the tedious task of individually creating numerous divs

Instead of manually typing out multiple div tags in the HTML, I would like to dynamically generate them using JavaScript and display them on the page. Below is an attempt at achieving this, but it appears to not be functioning correctly. var arr = {}; f ...

javascriptjqueryhtml

How to create list item bullets with a star icon using reactstrap/react?

As a machine learning professional looking to enhance my frontend skills, I am curious about how to create list item bullets using a custom star bullet image. Could anyone please share a complete HTML/CSS example with me? Thank you in advance! ...

htmlcssreactjsfrontendreactstrap