I have encountered an issue with my dropdown lists. The lists function properly on hover, but if I click outside the list area, it still remains visible.
Despite my attempts to fix the problem in the CSS, I am unable to pinpoint the exact cause of the issue.
As a newcomer to CSS, I am seeking guidance on a more effective approach for styling dropdowns.
UPDATE:
While testing this in Firefox, I was unable to replicate the issue. How can I ensure consistent functionality across all browsers?
After some adjustments, here's a condensed version of the example (I believe the separate CSS for multiple buttons is unnecessary; you can utilize classes and adjust specifics with #dropdown_two .classname for desired changes like position).
The issue in Chrome seems to stem from the container width exceeding that of the button itself, causing misbehavior. While not perfect, this revised code should serve as a starting point. I've made certain values dynamic (using em instead of px) so there may be minor hitches.
#dropdown-one {
margin-left: 20em;
}
.dropbtn {
color: white;
width: 100%;
height: 3.2em;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
position: relative;
z-index: 2;
}
.dropdown {
position: relative;
display: block;
width: 12.5em;
background: antiquewhite;
}
.dropdown-content {
display: none;
position: relative;
z-index: 1;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: -20px;
}
.sphere {
height: 2.9em;
width: 2.9em;
border-radius: 50%;
border: 2px solid rgba(0, 173, 239, 1);
/* position: relative; */
background: black;
position: absolute;
top: 0;
bottom: 0;
right: .1em;
z-index: 2;
}
.dropdown-content a {
table-layout: fixed;
color: black;
padding: .75em;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
font-size: 21px;
box-sizing: border-box;
}
.dropdown-content a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content a:first-child:hover {
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:black;
background-color: rgb(255,131,0);
}
.dropdown-content a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
div#arrow {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}<div class="averios-header">
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
</div>
</div>
<div id="log-in">
<div id="loginHeader">
<h1>Portal</h1>
</div>
<div id="welcome-text">
<p> Welcome name </p>
<p> Your last login was time on date </p>
<p> Please select an application below to begin </p>
</div>
</div>
<div id="dropdown-one">
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="sphere">
<div id="arrow">
<img src="C:\Users\mseh\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
</div>
</div>
</div>I am in need of HTML structure that looks like the following: <header></header> <div id='main'></div> <footer></footer> I want all elements to be positioned relatively. The header and footer will have fixed h ...
Is there a way to prevent mouse interactions and scrolling in an open maps iframe? I have already tried adding the attribute scrollwheel="false" to no avail. Are there any CSS methods to achieve this? <iframe id= "mapsource" scrollwheel="false" src="ht ...
Currently, I am testing the best optimization practices for front-end development. As part of this process, I have utilized gulp and npm to merge and minify my CSS and JS files into a single all.min.css and js.min.css file. Upon analyzing my website using ...
Looking for assistance to align text on the right side of an image at the same level. Below is the code I have: <a class="following-row" href="index-2.html?pid=2306"> <img alt="Girls logo" src="photos/users/35257/resized/9fd79 ...
I'm attempting to give the user the ability to select a paragraph and copy it by clicking a button. However, my current code is not working as expected. I initially tried importing directives but encountered errors, prompting me to try a different met ...
I have a refresh icon in my React app that utilizes Material UI. I want the icon to spin for a second after it is clicked, but I am unsure of how to achieve this. Despite attempting some solutions, none have been successful. const useStyles = makeStyles(( ...
I am seeking to create a graph that is not a tree, as some nodes may have multiple parents. When a node on the graph is clicked, a dropdown menu should be displayed with a list of text options. Though I am new to d3.js, I have observed examples of bootstra ...
Currently, I am in the process of constructing a KDS (Kitchen Display System) that utilizes javascript & firestore to display orders. The orders are presented using cards, but I'm encountering an issue where all the order items are appearing in th ...
I am in the process of creating my very first one-page horizontal website using jQuery and the scrollTo plugin. This site consists of 3 screens and initially starts in the center (displaying the middle screen). To achieve this, I decided to set the width o ...
I have a form with add and remove fields implemented using angularjs. It works fine when running outside the div, but when placed inside a div, only the remove function is working. Can you please advise on what might be going wrong? <body> <div ...
As I explore various websites, including SO and my own, I have noticed a common practice of storing row IDs of data retrieved from a database in an HTML attribute. This data can be manipulated by the user on the client side and potentially sent to the serv ...
Recently, I came across an interesting CSS minifier tool at . On that webpage, there is a section titled "What does the CSS Compressor purposely NOT do?" which highlights four specific things, two of which caught my attention due to their potential impact: ...
Looking for help with this HTML code: <span class="navbar-text navbar-nav company-title">aLine</span> The text "aLine" is displayed on the navigation bar. Can you guide me on how to locate this text using xpath? ...
I am currently modifying an HTML5 template. The default Bootstrap parameters were set as: col-sm-12 col-md-4 col-lg-4 col-sm-12 col-md-8 col-lg-8 This configuration allotted 20% of the screen width to text and 80% to images, but I want it reversed. Tex ...
When fetching html from a website, how can I extract specific html content instead of getting all of it? I have attempted the following method: Before appending data to the target below container.html(data); I would like to perform something like data.f ...
I'm currently developing my first Javascript game, but I've hit a roadblock.. I am trying to create a game that displays random images without repeating them. Each image should be accompanied by a random number between 4 and 10. The code I have w ...
What could be causing the absolute path for this asset (the font) not to work while the relative path does? <body> hello friend </body> <style type="text/css"> @font-face { font-family: 'Gilroy'; /* src: ur ...
I am currently grappling with a situation involving a table with 5 <td> elements. By default, these <td> are red in color. If the user clicks on one of them for the first time, it changes to blue. Subsequent clicks turn it orange and then back ...
Essentially, I have a situation where I am using an *ngIf condition on a div that also contains an image. This is for a login page where I need to display different versions based on the type of user. However, I'm facing an issue where the image does ...
Check out this example at https://codepen.io/centem/pen/GQVGmw. I am attempting to center the divs containing numbers using a .centered class, but they are not aligning in the middle of the row as expected. How can I properly center these divs instead of h ...