I recently completed a tutorial on creating my own custom drop down menu. However, I am struggling to style the submenus. I can't seem to locate the correct class to modify it. My goal is to have the sub menus display in a single line and within a box.
Is there anyone who could offer some assistance?
My approach to creating dropdown menus is slightly different, tailored to resemble your design while allowing for customization based on individual requirements. Feel free to copy this code into a text file and open it in a browser - it should function seamlessly. Personally, I prefer avoiding tables or lists for menu structures, but this is simply my personal preference. Below is the HTML and CSS code:
<style>
body { margin: auto; }
.menu
{
position: relative;
background: gray;
height: 40px;
}
.menuItem, .dropdownItem
{
position: relative;
float: left;
width: 150px;
color: black;
}
.menuItem:hover, .dropdownItem:hover
{
background: black;
color: white;
}
.menuItem
{
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.dropdownItem
{
height: 100%;
line-height: 40px;
}
.dropdown
{
position: absolute;
top: -1000px;
width: 450px;
background: gray;
height: 40px;
}
.menuItem:hover .dropdown { top: 100%; }
</style>
<div class="menu">
<div class="menuItem">
Build New
<div class="dropdown">
<div class="dropdownItem">
Bath
</div>
<div class="dropdownItem">
Bathroom Lightning
</div>
<div class="dropdownItem">
Bathroom Faucet
</div>
</div>
</div>
<div class="menuItem">
Construction Of
</div>
<div class="menuItem">
Renovating
</div>
</div>
Hopefully, you find this information useful!
I am facing an issue with a dropdown field that has placeholder text and options to select. Initially, both the placeholder text and the options were in color #333. However, I managed to change the color of the placeholder text to light grey using the foll ...
I am trying to create a drop and hide menu effect similar to the one on Here is my current demo: http://jsfiddle.net/elementhttp/56ThC/ $("#1").mouseover(function(){ //alert("aaaaaaaaaa"); just for testing $(".block2").stop().fadeToggle(700 ...
I am experiencing an issue with a script that is not performing the desired task. I am looking for a script that can add the Class "active" to a ul element with the id "btnMob0". Currently, my script looks like this: <script type="text/javascript"> ...
When importing svg images with color into Mapbox Studio, they appear as black and white. The troubleshooting website mentions: If your SVG appears black after adding to Mapbox Studio, it may be due to using style properties in tags instead of inline sty ...
Functioning, But Page Transitions Inconsistent What I Believe to be the Correct Approach, But Event Triggering Issue Currently, I am experimenting with page transitions and utilizing bind() to detect the end of the CSS event transition. When a class is ad ...
I am a beginner when it comes to ajax and I'm facing an issue where the footer loads before the images, causing the images to overlap the footer. The problem is illustrated in the image below. <!doctype html> <html lang="en"> <head ...
Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue: https://i.stack.imgur.com/IndlU.gif An easy f ...
I noticed that Vue (or maybe Vite) automatically changes my css style attributes from "top: 0; right: 0; left: 0; bottom: 0;" to "inset: 0px;" However, this adaptation doesn't work well for older browsers that do not support the i ...
I'm currently utilizing the NgxAutocomPlace module within my Angular application. This module interacts with the Google Autocomplete API by generating a .pac-container to display autocomplete suggestions. However, I'm facing an issue where on mo ...
Can anyone help me out with a solution? I am facing an issue with google fonts not working in Safari on my website. Is there a way to instruct the browser to switch to a different style when the font is not supported? Below is the CSS code I am currently u ...
I've been struggling to align my contents to the baseline while working with the bootstrap framework. I tried following the instructions in the documentation, but it didn't work out as expected. <div class="row"> <div class="col-12 ...
Whenever I add a heading tag or paragraph tag within my div, it causes the content to drop down the screen significantly. I am unsure of the cause and feel a bit overwhelmed by it. I attempted to wrap the <h1> tag in a <div>, as shown below: & ...
Can't Change Color with a Variable, Console Works but Clicking on Square Doesn't Trying to use a variable named 'Color'. Even tried using an actual string value that didn't work. <!DOCTYPE html> <html> <head& ...
My current code snippet looks like this: while ( $row = mysqli_fetch_assoc($result) ) { echo '<div class="leaders" style="background-color:#ada30a;">' . $row['playername']; echo "<br>"; echo $row['points&a ...
My current setup involves setting <body> to be absolutely positioned in order to fill the entire viewport without needing to specify a height: body { width: 100%; margin: 0; padding: 0; position: absolute; top:0; right:0; bottom: ...
While attempting to compile my sass code, I encountered the following error message regarding a syntax issue: /* { "status": 1, "file": "C:/Users/faido/Desktop/Productivity/sass css/project/sass/main.sass", "line": 36, "column": 9, "mes ...
I'm having trouble applying a gradient color to my border using the border-image property. When I use border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);, I'm only seeing a single dot in each corner of my DIV. Does anyone know why t ...
My current challenge involves an unordered list element with the following structure: <ul className={styles["projects-pd-subdetails-list"]}> {detail.subdetails.map((sub) => ( <li className={styles[ ...
Struggling with it is the initial width of my canvas. My setup consists of a canvas element with an image background set to cover. Using jQuery, the canvas width is set to window.innerWidth while the height is calculated as one-third of the width (to main ...
Looking to create a form using React form hooks and Material UI? Check out this link to codesandbox to see the code in action. In the CreateEmployee.tsx file under components\execute folder, you'll find the necessary code. There's also a UI ...