I am using li for two different purposes in the same page. One for navbar and the other for images. 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. The properties of both the navbar and images are mixing up.
Here is my 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/modeizr/2.8.3/modeizr.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="Northe Lights" src="4.jpg" width="200" height="100"></a></li>
<li><a class="th"><img data-caption="Northe Lights" src="4.jpg" width="200" height="100"></a></li>
<li><a class="th"><img data-caption="Northe Lights" src="4.jpg" width="200" height="100"></a></li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<!-- Initialize Foundation JS -->
<center>
<footer>
<br/>
Copy © 2016 Sweet Brown Suga. All Rights Reserved. Designed by ShawBK.
</footer>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
<------------------------------------>
You can check the problem in the image also.enter image description here
