I attempted to create a basic CSS menu using code that I discovered online, and I am seeking the text to be displayed on top of the other text within a block or similar element.
View the code snippet on JsFiddle
This is how I envision it looking
Here is the HTML and CSS code:
If you want your menu to always stay on top of the content, just add a z-index property to it.
ul#menu ul {
padding: 0px;
}
ul#menu li {
position: relative;
list-style-type: none;
float: left;
width: 125px;
}
ul#menu li > ul {
display: none;
position: absolute
}
ul#menu li:hover > ul {
display: block;
z-index: 5;
background-color:gray;
}<ul id="menu">
<li><a href="#">Item 1</a>
</li>
<li><a href="#">Item 2</a>
<ul id="sub1">
<li><a href="#">Item 2.1</a>
</li>
<li><a href="#">Item 2.2</a>
</li>
</ul>
</li>
<li><a href="#">Item 3</a>
</li>
<li><a href="#">Item 4</a>
</li>
<li><a href="#">Item 5</a>
</li>
</ul>
<br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie fermentum rhoncus. Vivamus consequat lacus non nulla scelerisque ultrices. Curabitur volutpat nisi vel libero aliquet, at eleifend dui tincidunt. Aenean tincidunt erat ipsum, ut porttitor ipsum sagittis commodo. Donec bibendum maximus quam, sed feugiat sapien efficitur eget. Aenean viverra ante dignissim nisi hendrerit interdum. Duis tristique turpis eget magna dapibus commodo. Cras elementum tempus fermentum. Proin ac est turpis. Praesent sollicitudin tellus quis nulla fermentum, ut varius sem tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed efficitur augue ac lorem vehicula tempor. Pellentesque fermentum vestibulum ex. Quisque a sollicitudin enim. Etiam sem ex, blandit et nibh aliquet, pellentesque tincidunt nibh. Nullam sollicitudin justo ut laoreet eleifend.
Phasellus ipsum leo, pharetra ut eleifend a, pretium nec elit. Nullam tristique laoreet mauris at feugiat. Curabitur maximus fringilla nisl in elementum. Vestibulum vitae diam eros. Sed blandit suscipit molestie. Maecenas pretium tortor sapien, nec volutpat orci placerat sed. Nullam dictum quam id eros interdum, euismod consectetur nisl condimentum. Maecenas ullamcorper sagittis metus non sodales. Fusce ullamcorper ante dolor, at malesuada dui convallis eu. Donec a interdum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In vitae tellus id turpis commodo pharetra. Integer sodales justo id metus mattis volutpat.
Mauris luctus nunc quis purus accumsan, vel fermentum nulla tincidunt. Pellentesque vel nisl lacinia, consectetur ex eget, scelerisque dui. In lectus magna, mollis et interdum a, vestibulum id tellus. Morbi hendrerit massa justo. Nam ac lorem sit amet magna tincidunt vulputate nec sit amet metus. Mauris et orci sed justo feugiat ullamcorper quis non tellus. Vestibulum nec aliquet nisi, in dapibus ex. </p>To resolve this issue, simply include the following snippet in your code:
ul#sub1 {background-color:#(insert desired hex code);z-index:5;}
For a live demonstration, refer to the fiddle linked below.
https://i.sstatic.net/oDkB9.png I've been experimenting for hours to try and create a functionality where the thumbnail image on my HTML page enlarges when clicked, and then shrinks back down when clicked again. However, I'm encountering an issu ...
For my layout, I am using two boxes - a left_box with float:left property, and a right_box also with float:left property. The left box contains a lot of content and images, while the right box has only some content and images. Initially, everything was wo ...
My current dilemma involves a tricky situation: I am trying to set the overflow property of dialogContent to auto so that my modal can scroll if its content exceeds the height of the dialog. However, there is a dropdown menu that I want to display without ...
Is there a way to ensure consistent card size across all lines? I've noticed that the cards in the second line are taller. Can we base the height of all cards on this? https://i.sstatic.net/KgZwu.png Below is the HTML code: <div class="row"&g ...
I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...
I am relatively new to using JQuery and I have encountered an issue with adding a click event listener for a dynamically created button. When the user clicks on the first button, my function successfully adds a second button to a div. However, I am facing ...
I am designing a web page with two columns positioned next to each other that will occupy the entire width of the page. Each column should take up 50% of the available width without any margins or padding on either side, and they should stretch to fill 100 ...
I'm having an issue with my Montserrat font not displaying correctly. It appears as the standard style instead of the intended one. I have tried adding the specific style in the link, like this: <link href="https://fonts.googleapis.com/css?family= ...
When tabbing through the form, I noticed that the password field is causing an issue. In Firefox, everything works fine, but in Chrome and IE11, the tab doesn't move forward or backward when reaching the password field. <tr> <td style ...
Currently, I am working on a website utilizing Bootstrap 5. The issue arises with the navbar - it successfully displays the navigation when in a responsive viewport and the toggler icon is clicked. However, upon clicking the toggler icon again, the navigat ...
I'm currently working on developing an HTML page that displays random quotes by Mark Twain. The function and array of quotes are set up in a separate Javascript file which is linked to the main HTML document. However, I am facing an issue where the ou ...
After creating an HTML file using Angular Material, I noticed that the components' CSS files are not being applied properly. This is a snippet from my HTML file: <div class="content-container"> <div class="tree-container&quo ...
I am looking to create a website with an abundance of paragraphs, but I am curious if there is a more efficient method for spacing the content in the code without manually inserting <p> tags for each paragraph. It seems like it may require more than ...
I'm looking to achieve the following: <div id="display"> <div id="slideshow1"> <table cellspacing=0><tr><td style="height:200px;padding:0;vertical-align:middle"> <img ... /> </td></tr> ...
I am attempting to insert an SVG object onto my HTML page with a width of 100% and a fixed height. Upon viewing my fiddle, you will notice that the height of the dark-grey object changes based on the window proportions, which is not the desired outcome. ...
In the event listener, I need to ensure that my list items within the forEach loop are not displaying on separate lines. This issue is causing a problem in a lengthy section of code. The goal is to update questions when an answer is clicked from a list. B ...
I'm having trouble getting a video to play on a webpage. Initially, I followed a standard example I found online by using the following code: <video src='video.mp4' controls></video> When I open the .html file in Safari and dou ...
Here is the HTML setup I'm working with: <div class='form-row'> <div class='col-2'> Blah Blah </div> <div class='col-4'> <button type='button' class=' ...
I am facing a challenge where I need to pass input text from form1.php to form2.php, which contains a select option. My goal is to make the input text from form1.php be the selected option in form2.php. Usually, passing a select value to an input seems st ...
Is it possible to make just a specific image clickable within a div without making the entire div clickable? I have an image inside an anchor tag and a surrounding div that is clickable. The issue is that the entire space around the first image, .home, is ...