Drop-down menu with caret using HTML and CSS

Is there a way to include a dropdown caret for the account link in the html code provided below? . . .

<nav>
    <ul id="menu">
        <li class="home"><a href= "home.html" class="menu" ><h3>Home</h3></a></li>
        
        <li class="news"><a href= "news.html" class="menu" target="_blank"><h3>News</h3></a></li>
        
        <li class="account"><a href= "#"  class="menu dropdown-toggle" target="_blank" data-toggle="dropdown"><h3>Account</h3></a><i class="fa fa-caret-down"></i></li> 
   </ul>  
    </nav>
javascripthtmlcsstwitter-bootstrap-3bootstrap-4

Answer №1

Here's a simple CSS-only solution using the ::after pseudo-element to create dropdown indicators.

.dropdown-toggle {
  display: flex;
  align-items: center;
}

.dropdown-toggle::after {
  content: "⬇️";
  margin-left: 10px;
}
<nav>
  <ul id="menu">
    <li class="home"><a href="home.html" class="menu">
        <h3>Home</h3>
      </a></li>

    <li class="news"><a href="news.html" class="menu" target="_blank">
        <h3>News</h3>
      </a></li>

    <li class="account"><a href="#" class="menu dropdown-toggle" target="_blank" data-toggle="dropdown">
        <h3>Account</h3>
      </a></li>
  </ul>
</nav>

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

Navigating the complexities of functions in javascript can often leave one feeling perplexed and

I am currently working on an implementation that involves the following code snippet: var globalVar = []; var tomakeJson = JSON.Stringify(globalVar); window.load = function grpwrk() { hdWork: function() { // return somefatherwork; ...

javascriptarraysjsonobject

Unable to prepend '1' to the list

My goal is to display a list as '1 2 3...', but instead it is showing '0 1 2...' var totalLessons = $('.lesson-nav .mod.unit.less li').length; for (var i = 0; i < totalLessons; i++) { $('.lesson-nav .mod.unit.les ...

javascriptjquery

Security Error when using the JavaScript map function in FireFox

My current dilemma involves using a JavaScript code to extract the above-the-fold CSS from my websites. Surprisingly, it functions flawlessly on Google Chrome. However, when I attempt to execute it on Firefox, an infamous 'SecurityError' occurs: ...

javascriptcsssecurityfirefox

Responsive solution for a table with a side header

Seeking recommendations for improving the responsiveness and swipe functionality of this table on mobile devices. Considering using Angular ng-swipe, but first need to make the table display in a card-view format. Any suggestions on how to structure this t ...

htmlcssangularjshtml-table

How can I effectively exclude API keys from commits in Express by implementing a .gitignore file?

Currently, my API keys are stored in the routes/index.js file of my express app. I'm thinking that I should transfer these keys to an object in a new file located in the parent directory of the app (keys.js), and then include this file in my routes/in ...

javascriptnode.jsexpress

when implementing react-native-tesseract-ocr in your project:

Attempting to run the Android application... [email protected] android react-native run-android Information: JS server is already running. The app installation process is in progress. This build contains deprecated Gradle features that are incompa ...

htmljquerycssreactjsbootstrap-4

Retrieve JSON data sent via AJAX request in a Rails controller

I recently sent an ajax post request to receive json data, but I'm struggling to access that data in my rails controller. How can I properly retrieve this information? Below is the code snippet of how I posted the data using ajax: jQuery.ajax({ ...

javascriptjqueryruby-on-railsjson

Electron JS-powered app launcher for seamless application launching

Currently, I am working on a project to develop an application launcher using HTML, CSS, and JS with Electron JS. Each application is linked through an a href tag that directs users to the respective application path. If a normal link is used in the a hr ...

javascriptnode.jsnpmelectron

Utilizing ExpressJS to save uploaded files using the FileReader object from the front-end

Despite researching multiple posts on this topic, I am still unable to successfully upload a file after numerous adjustments. My React form includes a PDF file upload component which looks like this: <Input onChange={(e) => this.handleFileUpload(e) ...

javascriptexpressfile-uploadfilereaderwritefile

How can we stop the brief display of a hidden div from occurring?

I have two divs on my webpage - one to display if JavaScript is disabled, and another if JavaScript is enabled. The issue I am facing is that even when JavaScript is not disabled, the div containing the message stating that JavaScript is disabled briefly ...

javascriptjqueryhtmlcss

What is the best method for parsing information from the HTML source code of a specific tab on a webpage?

I have tried various methods mentioned in different responses, such as testing with different user agents (Chrome, Safari etc), and fetching HTML directly using HTTPClient and BufferedReader, but unfortunately none of them seem to be effective. How can I ...

javaandroidhtmlajaxjsoup

Generating an ordered array that begins at a specified value and has a specific number of elements

Searching for a stylish solution (without using a for loop) to generate a sequential array in Javascript that begins with a specific number and contains a set number of elements. For instance: Commencing with 2017 and including 4 items would appear as fol ...

javascriptarraysecmascript-6

The essence of my design disappears when I generate a canvas object using Fabric.js

After defining top and left attributes for a Canvas Object using a JavaScript function, I encounter an issue when creating a fabric Canvas object. var fabricCanvas = new fabric.Canvas('mycanvas'); Upon creation, my HTML Canvas has its top and ...

javascripthtmlcanvasfabricjs

What could be causing my jQuery search feature to only function properly one time?

This is a code snippet that can search for, scroll to, and highlight a specific piece of text on a webpage. For the code demo, you can check it out on jsFiddle: http://jsfiddle.net/z7fjW/137/ However, there seems to be an issue with the functionality. Af ...

jqueryhtmlcss

Restrict the height of a division based on the adjacent division

Within the parent div, I have two child div elements that are meant to be positioned side by side. The first element contains an image which loads dynamically, meaning its height is unknown in advance. I want the parent div's total height to match the ...

htmlcssimageheightauto

Transforming "datetime-local" into java.sql.Timestamp

I am working on a JSP page that has a form containing an input field with type "datetime-local". The data from this form is then passed to a servlet using the following code: String resetTimeString = request.getParameter(RequestParameterName.RESET_TIME); ...

javahtmltimestamp

Utilizing Bootstrap4 Grid System: Flex for SM and beyond, Row then Column for XS viewports

I'm in the process of developing a menu system specifically tailored for XL, LG, MD, SM screens in BOOTSTRAP4 while offering a unique appearance for XS (mobile) devices. Here is the HTML code I currently have: <div class="container-fluid"> ...

htmlcsstwitter-bootstrapbootstrap-4

Angular error: Unable to assign value to 'Data' property as it is undefined

Within my code, I am invoking this operation in the ngOnInit function to ensure that previously edited data can be viewed when the page is reopened. The property StickerData belongs to the interface IStickerData. However, I keep encountering an error: ERRO ...

javascriptangulartypescript

Ways to determine if a website is being accessed from a mobile device or a computer without relying on TeraWurfl technology

After my search on the internet yielded no answers, I decided to post my question here. Is there a method available to detect whether a site is being accessed from a computer or mobile device without using TeraWurfl? I'm looking for a simple code snip ...

javascriptphpjquery

What are the steps to designing your own unique custom button with Material-UI?

While Material-UI allows you to utilize withStyles() for creating a Button with a predefined set of styles, I am curious if it is achievable to achieve the same result using props instead. This would ensure that all custom buttons I create automatically ha ...

javascriptreactjsmaterial-ui