What are the steps for implementing two Li elements in HTML with distinct attributes?

Usage

I decided to utilize li elements in various ways on a single web page. I used them as part of a navbar at one point and then later repurposed them for an image grid.

Issue

The problem arises when the dropdown menu within the navbar is partially hidden beneath the images when hovered over.

https://i.sstatic.net/0mAEH.png

HTML Code Snippet

<!DOCTYPE html>

<html>
<head>
    <title> Babies And Bridal </title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="Css/Custom.css">

    <link rel="stylesheet" type="text/css" href="Css/bootstrap.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>


    <style>
        .images{
            margin-left: 55px;
        }
        .menuu {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #FDF4F9;
            display: inline-block; 

        }
        .menuu a{
            text-align: center;
            font-size: 25px;
            font-family: Hoefler Text;
            font-style: italic !important;
            color: #984807 !important; 
        }
        li {
            float: left;

        }

        li a, .dropbtn {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none !important;
        }

        li a:hover, .dropdown:hover .dropbtn {
            background-color: #ECC6C4;
        }

        li.dropdown {
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
            background-color: #FDF4F9;
        }

        .dropdown-content a:hover {
            background-color: #ECC6C4;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>

</head>
<body>

    <img src="images/logo.jpg" class = "logo">
    </br> </br>

    <h1> Sweet Brown Suga </h1>




<center>
    <table class = "icons">

        <tr>

            <td>
                <h2 align = "right" style = "margin-right: 70px "> Brown Suga On Social </h2>
            </td>

            <td width = "55">
                <img src = "icons/instagram.png" width = "50" height = "55">
            </td>

            <td width = "55">
                <img src = "icons/facebook.png" width = "50" height = "55">
            </td>

            <td width = "55">
                <img src = "icons/twitter.png" width = "50" height = "55">
            </td>

            <td width = "55">
                <img src = "icons/envelop.png" width = "50" height = "55">
            </td>

        </tr>
    </table>

</center>

<br/>
<br/>


<div class="outer">

    <img class = "image" src = "images/sprinkles.jpg">

    <img class = "image" src = "images/sprinkles.jpg">

    <img class = "image" src = "images/sprinkles.jpg">

    <img class = "image" src = "images/sprinkles2.jpg">

</div>




<center>

    <br/>
    <br/>
    <ul class="menuu">

        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="#news">About Us</a></li>
        <li class="dropdown">
            <a href="#" class="dropbtn">Gallery</a>
            <div class="dropdown-content">
                <a href="Celebration.html">Celebration</a>
                <a href="Wedding.html">Wedding</a>
                <a href="#">Babies and Bridal</a>
                <a href="Sculpted_3D.html">Sculpted_3D</a>
                <a href="Dessert Table.html">Dessert Table</a>
            </div>
        </li>

    </ul>
</center>
<br/> 
<br/> 
<br/>
<br/> 


<ul class="clearing-thumbs images" data-clearing >
    <li><a  class="th"><img data-caption="The Pulpit Rock" src="1.jpg" width="200" height="100"></a></li>
    <li><a  class="th"><img data-caption="Sunrise Skies" src="2.jpg" width="200" height="100"></a></li>
    <li><a  class="th"><img data-caption="Northern Lights" src="4.jpg" width="200" height="100"></a></li>
    <li><a  class="th"><img data-caption="Northern Lights" src="4.jpg" width="200" height="100"></a></li>
    <li><a  class="th"><img data-caption="Northern Lights" src="4.jpg" width="200" height="100"></a></li>


</ul>
<br/>
<br/>
<br/>
<br/>
<br/>

<!-- Initialize Foundation JS -->

<center>
    <footer>

        <br/>

        Copy &COPY; 2016 Sweet Brown Suga. All Rights Reserved. Designed by ShawBK.

    </footer>
</center>

<script>
    $(document).ready(function () {
        $(document).foundation();
    })
</script>

</body>
</html>
htmlcss

Answer №1

To make the dropdown content appear above other elements, simply adjust the z-index property:

.dropdown-content {
   ...
   z-index: 10;
}

For best practices, please refrain from using:

  • The <center> tag
  • Using table for layout purposes
  • Adding unnecessary spaces between HTML attributes and values (class = " image " should be class="image")
  • Inline CSS (keep your styles in a separate custom.css file)

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

Tips for incorporating basic code into an android app

I find myself puzzled about the placement of regular Java code in an Android application. Using the Eclipse SDK, when you create an application, it automatically generates a .java file with an OnCreate() method. Should I insert my code within this method? ...

javaandroidhtmloncreate

Creating a Stylish ExtJS Container with CSS: A Step-By-Step

I've been experimenting with the ExtJS properties cls, bodyCls, and componentCls but unfortunately, I'm not achieving the desired outcome. As an illustration: Ext.create('Ext.form.Panel', { renderTo: document.body, title: &apo ...

cssextjs5cls

HTML-Formatted Email Content

Similar Question: MailTo with HTML body I am looking to utilize JavaScript to send emails. I came across this helpful post: Sending emails with JavaScript. My goal is to include images, bold text, and color changes in the email content. Does anyone h ...

javascripthtmlemail

transferring data from the interface to the processor

I'm encountering an issue with sending dropdown list values to a new page for display. When I try to load the page after selecting a building from the dropdown menu, I receive an error message. I'm unsure about what mistake I might be making. Be ...

phphtmllaravel

Challenges arising when transferring data from Django to HTML

I am trying to calculate the sum of elements in lista[] which consists of decimal numbers, but I keep getting this error message: lista[] is composed of decimal numbers ValueError at / argument must be a sequence of length 3 This is my code : views.py ...

htmldjangodjango-views

How to create a CSS-only dropdown menu for IE 6 without relying on JavaScript?

While browsing different sites, I came across numerous css/js menu scripts that function well in browsers such as FF, IE7, Safari, and Opera when JavaScript is enabled. However, they do not work properly in IE 6 without a small JS file added to support t ...

cssaccessibility

Tips for centering text inside a div using a separator

During my side project, I decided to use the angular material divider but encountered issues with aligning the text correctly. https://i.stack.imgur.com/zg1mu.png The problem can be seen in the image provided - the text on the right side is not aligned b ...

htmlcssangularangular-material

Tips for customizing WTForm fields with unique CSS classes

I've recently put together a basic form snippet: class PostForm(FlaskForm): # for publishing a new blog post title = StringField("Title", validators=[DataRequired()]) submit = SubmitField('Post') The structure of my HT ...

htmlcssflaskflask-wtformswtforms

Curved edges achieved without the need for relative positioning

Can anyone help me with a specific code snippet to achieve rounded corners for this page ? Currently, I am using the PIE.htc file which only works when I declare position:relative; throughout the layout, causing disruptions. Is there a code workaround that ...

htmlcss

When a user clicks on an anchor tag, close the current window, open a new window, and pass the

I have a scenario where I have an anchor tag that triggers the opening of a window on click. In this newly opened window, there is a table with a column containing another anchor tag. Here is what I am trying to achieve: Code for the anchor tag: functio ...

javascriptphpjqueryhtml

What is the best way to adjust a 1px margin in Google Chrome?

Check out this example http://jsbin.com/oqisuv/ CSS body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; } .menu { width:989px; margin:auto; height:100px; background:#666666; line-height:100px; text-ali ...

htmlcssgoogle-chrome

Make sure the navigation bar is fixed to the top of the page only

Looking for a solution to stick the navigation menu to the top of the screen only when the screen is wider than 782px. Progress so far: https://jsfiddle.net/ah4ta7xc/1/ Encountering an issue where there is an unintended gap at the top when applying the s ...

jqueryhtmlcss

Tips for adjusting the scrollbar in Tailwind (next.js/react)

Having trouble changing the appearance of my scrollbar in a single page application using Tailwind (react/next). I've attempted to create custom CSS for the first div in my index file, like so: <div className="no-scroll"> <<< ...

cssreactjsnext.jstailwind-css

Dynamically injecting a JavaScript script within a Vue.js application

Is there a way to dynamically load a JavaScript script within a Vue.js application? One approach is as follows: <script async v-bind:src="srcUrl"></script> <!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10 ...

javascripthtmlvue.js

What is the best way to link styleUrls to a CSS file located in a different directory?

I am trying to include the CSS file src/app/shared/layouts/admin/admin.component.css in my component located at src/app/admin/create-company/create-company.component.ts How can I properly reference this css file in the styleUrls of create-company.componen ...

cssangularstyles

Is there a way to reposition a popup window to the center of the page after launching it?

popup = window.open(thelink,'Facebook Share','resizable=1,status=0,location=0, width=500,height=300'); My goal is to perfectly center this popup window both vertically and horizontally. ...

javascriptjqueryhtmlcss

I have exhausted all possible solutions in my attempts to eliminate the whitespace below my footer. Is there something I have overlooked or not tried yet?

After updating the CSS stylesheet, I noticed a white space below my footer. A screenshot has been included for reference. Despite including a CSS reset, the issue still persists. /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author ...

htmlcss

Tips for resolving: 404 error when attempting to load a popup using Ajax

I am new to RoR, so I might be missing something. I am struggling with loading a popup through Ajax when a button is clicked. Every time I attempt it, I encounter an error related to the Ajax method as shown below. I believe my syntax is correct. I have ...

htmlruby-on-railsrubyselecthaml

Display a custom toast from a list using Bootstrap 5

I've been utilizing the toast feature from Bootstrap, and it works perfectly when displaying a single toast. However, I encountered an issue when trying to display a specific toast, like an error toast, from a list of predefined toasts. It ended up sh ...

csstoastbootstrap-5

What is the best method for removing table rows with a specific class?

I have an html table with several rows, and for some of these rows the class someClass is applied. My question is: How can I delete the rows that have a specific class? <table> <tr class="someClass"> ...</tr> <tr class="someClass"> ...

javascriptjqueryhtml