Currently, I am in the process of creating a website at www.bossfakeid.co.uk. I am looking to add a dropdown menu to the "Products" section of the navbar. I found a dropdown menu solution that I would like to implement from this link: http://codepen.io/williamjamesclark/pen/HynGo. I only need the dropdown menu and the caret, and I can handle adjusting the colors to match my website. Any assistance with this would be greatly appreciated.
Thank you in advance for your help!
To create a submenu, start by nesting a <ul> inside an <li> element.
<li>
<a href="#" >Products<span style="color:#1D8A4C">▼</span></a>
<ul class="submenu">
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
<li><a href="">Submenu item</a></li>
</ul>
</li>
Next, apply the following CSS to style the submenu correctly:
.submenu {
position: absolute; /*1*/
border-top: 15px solid transparent; /*2*/
left: -9999px; /*3*/
}
li:hover > .submenu {
left: -50px;
}
.submenu:before {
content: "";
position: absolute;
z-index: 1; /* bring in front of border */
margin-top: 5px; /*1*/
left: -9999px; /*2*/
top: -15px;
/* borders for up arrow */
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #34495e;
}
.submenu > li:first-of-type {
border-radius: 5px 5px 0 0; /*1*/
}
/*
1. bottom rounded edges on submenu
*/
.submenu > li:last-of-type {
border-radius: 0 0 5px 5px; /*1*/
}
.submenu a {
font-size: 90%; /*1*/
margin: 3px; /*2*/
border-radius: 5px;
transition: background ease .3s; /*3*/
}
/*
submenu hover styles
*/
.submenu a:hover {
background: #2AC56C;
}
.submenu li {
background:#3B3B3B;
}
#menu .active a {
background: none repeat scroll 0% 0% #2AC56C;
border-radius: 5px;
}
.submenu:before {
content: "";
position: absolute;
z-index: 1; /* bring in front of border */
margin-top: 5px; /*1*/
left: 100px; /*2*/
top: -15px;
/* borders for up arrow */
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #3B3B3B;
}
Check out this JSFiddle for an example of the coding.
For more resources on building menus using CSS, refer to the following links:
Creating a Pure CSS Dropdown Menu
Google for CSS menu tutorials
Looking for a scrolling effect in an HTML Dialog with Google Apps Script. I've already tried this link and placed the code in the editor. However, when highlight buttons are clicked, they work but do not cause scrolling within the HTML dialog. < ...
After some research, I think I have a grasp on CSS selectors and their appearance. However, when using selenium, how can I locate a CSS selector on a website and then click on it? The correct syntax eludes me. I encountered this error as well: selenium.co ...
After placing ads on my website, they are displaying properly. However, I am receiving an error repeatedly in the console when the page loads: A frame from origin "" is being blocked from accessing a frame with origin "". The requesting frame has an "ht ...
My current issue involves an ajax web application that loads all parts on a single page, specifically index.html. The inner parts being loaded in index.html have exceeded 32 pages (html, js, css). Now I am facing difficulties with the CSS files that need ...
I'm completely new to Javascript and I've been trying to move all elements with a specific class inside a particular div. After doing some research, I found a solution that worked using IDs. However, when I tried to adapt it to work with classNam ...
When using the Timeline component to display information, there are three columns: TimelinItem, TimelineSeparator, and TimelineContent. I tried setting the padding of TimelineItem to 0 but it didn't work. The <Trace/> component is a sub-compone ...
I've been facing a persistent challenge with the height:100% problem. It seems like it should be an easy fix by ensuring all wrapper elements and html, body have height:100%, but no matter what I try, the containers still won't reach the bottom o ...
I'm having trouble centering the content within two side-by-side divs. It seems like the content in each of these divs is centering towards one another, which is not what I want. I've created a main container and placed two divs inside it. The ...
When transitioning to another page from my center frame, I need to ensure that the top and bottom frames are not visible in the new page. This will prevent my spinner or footer from showing up on the page I'm navigating to. Is it possible to achieve ...
I've been attempting to create a toggle switch that activates dark mode using Bootstrap switches, but when I save the code, it reverts back to a basic checkbox. According to the documentation, for older assistive technologies, these switch elements wi ...
I am grappling with an issue where my collapsed model is displaying more information about clients; however, when I click on the button inside it, instead of getting the specific client's data, I end up retrieving information for all clients. <ion ...
Recently, I started working with Express and Bootstrap. While attempting to create a login form that triggers a POST request to the server, I encountered an issue where the page displays "The page isn't working" instead of loading a new HTML page. He ...
Running an Elementor website, I need to incorporate various image carousels within my post content. Initially, I created a template for each carousel using Elementor. However, I have now decided to switch to utilizing a shortcode that leverages Elementor&a ...
Is it possible to adjust the size of a radio button using CSS? ...
My issue is that I am struggling to center the "See More" link directly under each title link. Currently, it is pushed to the right and I can't seem to find a solution. Any help with this problem would be greatly appreciated. I attempted using display ...
I am looking to add a new feature to my app where only one admin can log in at a time. If someone else tries to log in with the same admin ID on another device, a warning should be shown, indicating that the user is already logged in and cannot access the ...
Currently, I am utilizing the horizontal bar chart feature from chartjs and encountering an issue with the chart appearing too large. In addition, there is a notable gap between the ticks on the xAxis (as shown in the attached image). Does anyone know how ...
Technology Stack: Nuxt.js + Vuetify.js Problem: Unable to set global body font size Solution Attempt: I tried to adjust the body font size to 40px in ~/assets/style/app.styl: // Import Vuetify styling ...
Is it possible to display the options from a select-option tag using a different button? I have either a div or another button. I want to be able to show the list of options from my select tag by clicking this button. Here is my select tag: <select&g ...
My current project involves automating the extraction and printing of infobox data from Wikipedia pages. For example, I am currently working on scraping the Star Trek Wikipedia page (https://en.wikipedia.org/wiki/Star_Trek) to extract the infobox section d ...