Bilal Khawaja Bilal Khawaja - 4 months ago 8
CSS Question

How to use two Li in html with different properties?

Background



I am using
li
elements for multiple purposes in the same page. In one spot, I use them for a navbar, and later in the page I use them for an image grid.

Problem



The problem is that in the navbar I have a drop down so when I hover over the drop down half of the portion of the drop down hides under the images.

enter image description here

Code



<!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>

Answer

Just add a higher z-index value to the .dropdown-content:

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

P.S. please avoid the following:

  • <center> tag
  • table elements for layout
  • space between HTML properties and values (class = " image " should be class="image")
  • internal CSS (you already have a custom.css file)
Comments