How can I modify the orientation of the arrow and switch sides in a dropdown submenu?

I am working on creating a menu with dropdown-submenu functionality using CSS.

.dropdown-menu {
    float:left;
}

.left-submenu {
    float: none;
}

.left-submenu > .dropdown-menu {
    border-radius: 6px 0px 6px 6px;
    left: auto;
    margin-left: 10px;
    right: 98%;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something that is a really really really long string here</a></li>
    <li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">Try left</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">shorter things</a></li>
            <li><a tabindex="-1" href="#">shorter things</a></li>
            <li><a tabindex="-1" href="#">shorter things</a></li>
        </ul>
    </li>
    <li class="divider"></li>
    <li class="dropdown-submenu left-submenu"> <a tabindex="-1" href="#">More else</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
        </ul>
    </li>
</ul>

Does anyone know how to customize the side and direction arrow in the "Try left" dropdown-submenu?

Check out the demo http://jsfiddle.net/5BUXu/20/

By the way, aiming to achieve the same appearance as shown in this image:

https://i.stack.imgur.com/qzwTX.png

csshtmldrop-down-menubootstrap-modal

Answer №1

To change the directional arrow, you can simply 'flip the script'. The arrow is defined in an :after pseudo-element within the bootstrap CSS. By modifying some properties, you can reverse its direction like this:

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: left;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-right-color: #cccccc;
    margin-top: 5px;
    margin-left: -10px;
}

Check out the demo on JSFiddle

In the updated style, the float property is set to left instead of right, the border-right-width is adjusted to 5px, and the margin-right is now margin-left.

If you want one item with a left arrow and another with a right arrow, you can either add a specific class or use the nth-child selector for fixed items. Here's how you can achieve that:

By adding a custom class

<li class="dropdown-submenu right-submenu"> <a tabindex="-1" href="#">

.dropdown-submenu.right-submenu>a:after {
    display: block;
    content: " ";
    float: left;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-right-color: #cccccc;
    margin-top: 5px;
    margin-left: -10px;
}

Using the nth-child selector

.dropdown-submenu:nth-child(4)>a:after {
    display: block;
    content: " ";
    float: left;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-right-color: #cccccc;
    margin-top: 5px;
    margin-left: -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

Using CSS to align and place elements

Currently facing a challenge with my HTML/CSS code regarding the horizontal centering of two divs (A, B) within one absolutely positioned div (C) that contains background images. Key aspects to consider: The bottom edge of the larger div (A) should alig ...

csshtmlbackground-imagecss-position

Efficiently organizing items within a list on Ionic

Currently, I have an ion-list structured as follows: <ion-list *ngFor = "let chat of Chats"> <ion-item (click) = "openChat(chat.id)"> <ion-label> <h2> {{chat.username}} </h2> ...

javascripthtmlangulartypescriptionic-framework

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Can someone assist me in resolving this issue? I am trying to populate an HTML element with database fields using C# and JavaScript, but so far my code is not producing any output. I have also attempted to include a button that calls the "loadGrp" function ...

javascriptc#htmlsql-server

What is the best method to align a form in three columns from each side without relying on Bootstrap?

Is there a way to center the form inside a card with 3 columns on each side, so that the form appears in the middle occupying about 6 columns without relying on Bootstrap, Materialize or any similar framework? Thanks! <div class="card"> & ...

htmlcssdjango

The video continues playing even after closing the modal box

I am facing an issue with my code where a video continues to play in the background even after I close the modal. Here is the code snippet: <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria- ...

javascripthtmljquerycss

Tips for concealing a parent element while inside a span with jquery

Beginner asking for help! Take a look at what I've coded: <div class="Links"> <a href="/testthis1.html" data-id="button1"> <img class="icon" src="/test1.png" alt="test1"> <span>Test 1</span> < ...

jqueryhtmlhideparent

Move the Form to the Top of the Window and Highlight the First Input Field

There's a link in the header that says "Let's chat": <div class="letstalk"> <a href="javascript:scrollForm();"> Let's chat <img src="/wp-content/uploads/link-icon.png"> </a> </div> ...

javascripthtml

Disabling the default validation message in HTML form inputs

Is there a way to change the default message that appears when submitting an empty HTML text input? I would like the box border to turn red instead. Can anyone help me achieve this? Below is the code for the text input box: <div class="input-group ...

javascripthtmlcss

Having trouble with input functionality on iPad due to a CSS, LI, div, or clipping issue?

One challenge I am facing is related to several inputs housed within an LI and div that are sortable using jQuery. The problem arises specifically on the iPad when attempting to click into the inputs to enter information - there is no caret appearing, ren ...

javascriptjquerycssipad

Hide other dropdown when one dropdown is clicked

I am currently working with a dropdown data-filter in combination with the isotope plugin. My goal is to have the ability to close an open dropdown when another list item is clicked, and also have the arrow twirl down when the dropdown is open. I am seek ...

javascriptjqueryhtmldrop-down-menu

Seeing <br> elements being inserted into a <div> element in the page source

I have encountered an issue where my code does not contain any br tags between the beginning of the div tag and table tag, but when I view the source, several br elements appear. Below is the code snippet from a .php file: <div id='tx_addAccountp ...

htmlcss

What is the best way to incorporate width adjustments in an image source for a responsive website?

Currently learning CSS and experimenting with it on an HTML page. For reference, I'm using this link. Encountering an issue with a responsive header image that adjusts size based on device (small on mobile, large on desktop). Is it possible to achiev ...

jqueryhtmlcss

Modify the color scheme of the parent div by selecting the child div (using only CSS and HTML)

I am working with a nested div structure, where one is contained inside the other: <div class="outer"> <div class="inner"> </div> </div> It looks something like this: I am wondering if it's possibl ...

htmlcss

Connect the AngularJS data model with a Foundation checkbox element

I am attempting to link a model (a boolean value) to a checkbox created with Foundation (Zurb). I have created a small demonstration displaying the issue: http://jsfiddle.net/JmZes/53/ One approach could involve simply creating a function that triggers o ...

javascriptjqueryhtmlangularjszurb-foundation

Incorporating Sass into Django

As I delve into my Django Project, one question looms large: where exactly should all my Sass files be placed? Is it more practical to create a central 'Sass' folder within the main Project Folder or designate a 'Sass' directory for eac ...

pythoncssdjangowebsass

The navigation menu dissolves into hiding at the uppermost part of the page upon scrolling upwards on iOS devices

I am currently working on creating a navigation menu that will automatically hide when scrolling down and reappear when scrolling up. This functionality works perfectly fine on desktop and Android browsers, but I have encountered an issue specifically with ...

javascripthtmlioscsstwitter-bootstrap

If the user decides to change their answer, the current line between the two DIVs will be removed

After clicking on two DIVs, I created two lines. Now, I am facing an issue with resetting the unwanted line when changing my answer. To reset the line, you can refer to the code snippet below: var lastSelection; ...

javascriptangularjshtmlcsscanvas

What specific flag should be included in Chrome settings to prevent displaying c:/fakepath?

Is there a way to disable this security feature? I'm seeking a solution in Chrome to obtain the full file path of an uploaded or viewed file, similar to how it can be done in Internet Explorer. Despite my efforts with flags like --allow-file-access-f ...

javascriptjqueryhtmlgoogle-chromefile-upload

The entire framework remains concealed as the anchor component becomes immeasurable

Within a fixed-width paragraph, I have an anchor tag. The CSS for the p tag includes the properties text-overflow: ellipsis and overflow:hidden. However, when the anchor tag's content overflows (e.g., it contains a long string), the right outline is n ...

htmlcss

Is there a way to customize the background size of the selected date in the DateCalendar component of MUI?

I need assistance with modifying the background size of DateCalendar's selected date in MUI (material-UI). I attempted to adjust it by changing some CSS properties using styled(DateCalendar) as shown below. However, clicking on dates caused issues wit ...

cssreactjsmaterial-ui