Instructions on creating a Superfish menu with a vertical layout in the first level and a horizontal layout in the second level

Currently, I am using the Superfish menu in Drupal7 and have designed my first item level to be vertical. However, I now want to style my second item level horizontally. I have tried various CSS approaches and added some class names via jQuery like

$('first-level li')find('ul').addClass('sf-vertical');

but unfortunately, nothing seems to be working. Thank you in advance for any help!

edit: Here is a link to a jsfiddle showcasing how my menu is currently styled:

<ul id="superfish-1" class="sf-menu menu-page-menu sf-vertical sf-style-none sf-total-items-6 sf-parent-items-1 sf-single-items-5 sf-js-enabled">
    <li id="menu-622-1" class="first odd sf-item-1 sf-depth-1 sf-no-children">Item 1</li>
    <li id="menu-623-1" class="middle even sf-item-2 sf-depth-1 sf-total-children-5 sf-parent-children-0 sf-single-children-5 menuparent">Item 2
        <ul class="sf-vertical sf-hidden">
            <li id="menu-633-1" class="first odd sf-item-1 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%; ">SubItem </li>
            <li id="menu-634-1" class="middle even sf-item-2 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%; ">SubItem </li>
            <li id="menu-635-1" class="middle odd sf-item-3 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%; ">SubItem </li>
            <li id="menu-636-1" class="middle even sf-item-4 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%; ">SubItem </li>
            <li id="menu-637-1" class="last odd sf-item-5 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%; ">SubItem </li>
        </ul>
    </li>
    <li id="menu-624-1" class="middle odd sf-item-3 sf-depth-1 sf-no-children">Item 3</li>
    <li id="menu-625-1" class="middle even sf-item-4 sf-depth-1 sf-no-children">Item 4</li>
    <li id="menu-626-1" class="middle odd sf-item-5 sf-depth-1 sf-no-children">Item 5</li>
    <li id="menu-627-1" class="last even sf-item-6 sf-depth-1 sf-no-children">Item 6</li>
</ul>
javascripthtmlcssmenusuperfish

Answer №1

To correct the width of .sf-menu ul li ul and .sf-menu ul ul li, remove the width:100% and add margin-right:XXpx;

Update the CSS like so:

.sf-menu ul li ul{width:400px;}
.sf-menu ul ul li{float:left; margin-right:10px;}

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

"Encountering an issue with Multer where req.file is displaying as undefined in NodeJS

Recently, I followed the advice of several YouTubers and used multer for file upload in my project. However, despite correctly defining all the functions, req.file always appears as undefined. booking_route.js const express = require('express'); ...

javascriptvue.jsexpressmulter

"ng2-file-uploader necessitates a browser refresh in order to function

I am currently utilizing ng2-file-upload within my Angular 10 project to allow users to upload their photos. The upload process is functioning correctly, but the issue arises when the newly uploaded photo does not automatically appear in the photo list wit ...

javascriptangulartypescripthttpfile-upload

Ways to automatically refresh a page in Javascript after a short period of user inactivity

Similar Question: How Can I Modify This Code To Redirect Only When There Is No Mouse Movement I am looking to update a web page automatically if the user is inactive, specifically through key presses or mouse clicks using Javascript. ...

javascriptjqueryhtml

After executing "npm run dev" in Svelte and Vite, a common error message of "HTMLElement is not defined" might appear

Incorporating several web components into my Svelte project led to the appearance of an error message stating HTMLElement is not defined after running npm run dev (which actually translates to vite dev). The complete error message reads as follows: HTMLEl ...

javascripttypescriptfrontendsveltevite

When incorporating MDX and rehype-highlight on a next.js site to display MD with code snippets, a crash occurs due to Object.hasOwn

I'm encountering an issue with my setup that is based on examples from next.js and next-mdx-remote. Everything was working fine until I added rehypeHighlight to the rehypePlugins array, which resulted in this error. Any thoughts on why this could be h ...

javascriptnext.js

The width of the flexbox child item is too narrow for the content it contains

I am facing an issue with the Flexbox child element not aligning correctly with the content width. Here is the code snippet: https://i.sstatic.net/jtCnSuhF.png .pw-event-options { -webkit-box-flex: 0; -webkit-flex: 0 0 280px; -moz-box-flex: 0; ...

htmlcssflexbox

Absence of event firing in .on method in Asp.NET Core 6 when using JQuery

I am currently working on an ASP.NET Core 6 application that utilizes JQuery. Here is the JQuery code snippet I have implemented in my page: @section Scripts { @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); } ...

javascriptjqueryasp.net-core

How do I send multiple values from a child to a parent in Vue.js, while also passing another parameter in the parent's v-on event?

Behold, a demonstration of code. Vue.component('button-counter', { template: '<button v-on:click="emit_event">button</button>', methods: { emit_event: function () { this.$emit('change', 'v1&apos ...

javascriptvue.js

The if-else statement is providing a misleading outcome

While working on my map using leaflet, I decided to implement a dynamic color concept based on input data. However, despite comparing 3 sets of data to ensure accuracy, some parts of the color scheme are displaying incorrect results. Below is the snippet o ...

javascriptleaflet

Error message: "NAN encountered while attempting to extract a numerical value from

I've encountered a strange bug in my coding. I'm working on a weather forecasting website that uses geolocation to identify your city and then utilizes the wunderground API to provide the forecast. The issue arises when manually searching for a c ...

javascriptjqueryjsonnan

Make sure to verify if all values are contained within an array by utilizing JavaScript or TypeScript

These are the two arrays I'm working with. My goal is to ensure that every value in ValuesToBeCheckArr is present in ActualArr. If any values are missing from ActualArr, the function should return 0 or false. Additionally, there is an operator variabl ...

javascripttypescriptvue.js

What is the best way to change an object into a string in node.js?

Recently, I've delved into the world of node js and I'm eager to create a basic coap client and server using this technology. Successfully, I managed to set up a server hosting a text file, but now I aim to access it from the client. var coap = ...

javascriptnode.jsclient-server

Issue with Bootstrap 4 list items not displaying in block format

Based on the information from , using li tags as block elements should result in a vertical menu. However, with Bootstrap 4, when I use li tags, the menu stays horizontal on toggle for small devices. Is this the expected behavior? <ul class="nav navb ...

htmltwitter-bootstrapcsstwitter-bootstrap-4bootstrap-4

Learn how to properly register the order of checkboxes in AngularJS

I have a unique requirement for my webapp where I need to display the order in which checkboxes are checked. I came up with the following code to achieve this functionality: $scope.updateNumbers = function(id, checked, inputs) { if (checked === true) ...

javascriptangularjscheckbox

Sorting and selecting isotopes, with the option to filter or unfilter

All day I've been struggling to find a solution for my isotope filtering issue. I'm using classes from the database to tag items, such as categories and dates, and allowing users to filter them. The tricky part is making these filters work like o ...

javascriptjquery

How to target the following element with CSS that has a specified class name

Would it be possible to achieve this using CSS alone, or would I need to resort to jQuery? This is how my code currently looks: <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr class="some-class">...</tr> // My g ...

jquerycssselector

Errors in Data Capture from AJAX Dropdown Selections

Recently, I've encountered an issue with one of my data fields while attempting to save it to a mySQL database. The problem seems to be related to the fact that the 'id' for the text value is saved instead of the actual text value itself, wh ...

phpjavascriptajaxgoogle-maps-api-3

Facing an issue where WordPress AJAX is not showing the expected content

Currently, I am in the process of creating a WordPress website that will feature an initial display of two rows of images. Upon clicking a button, two more rows should dynamically appear. There are four key files involved in this project: case-study-ca ...

javascriptphpjqueryajaxwordpress

What is the best way to implement JQuery Ajax in order to invoke a PHP file on the server side, which will then execute returned javascripts?

I am currently working on a client website that requires a cross-domain JQuery Ajax call to a PHP file on my server. The purpose of this call is to query the database for various stored JavaScripts, which will then be returned to the client and executed on ...

phpjavascriptjqueryajax

What are the steps to troubleshoot Node Package Manager errors specifically linked to the node-gyp package?

Although this question has already been addressed in various instances, I am still struggling to resolve the issue using the suggested method. Following an npm install, I encountered errors while attempting to rebuild the node-gyp without any success. Node ...

javascriptnode.jsmongodbnpmnpm-install