I made this CSS/HTML.
.navbar {
width: 100%;
background-color: rgb(151, 44, 44);
overflow: auto;
}
.navbar a {
border-right:1px solid #f5b7b7;
float: left;
padding: 8px;
color: white;
text-decoration: none;
font-size: 1.5vh;
width: 25%; /* Four links of equal widths */
text-align: center;
}
.navbar a:hover {
background-color: rgb(92, 25, 25);
}
.navbar a.active {
background-color: #04AA6D;
}
/* ************************************************************** */
/* DROPDOWN */
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 1.5vh;
border: none;
outline: none;
color: white;
padding: 8px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown:hover .dropbtn {
background-color: rgb(92, 25, 25);
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: rgb(0, 0, 0);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
width: 100%;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="navbar" id="tree">
Home1
Home2
Home3
<div class="dropdown">
<button class="dropbtn" > TOPICS ▼ </button>
<div class="dropdown-content">
t1
t2
t3
</div>
</div>
</body>
</html>
But there are 2 issues.
issue 1 -
Not able to center the drop down. using below code it centers but creates scroll bar on different resolutions and devices etc.
.dropdown {
float: left;
overflow: hidden;
position: relative;
transform: translate(150%,0%)
}
issue 2 -
Drop down button is not expanded for entire of its 25% area (as are other buttons). ie.. Hovering is valid only over the text "TOPIC V"
Any ideas why its happening..not able to resolve since 2 days ;[
For the first issue, use flexbox to align the items.
.navbar {
...
display: flex;
}
.dropdown {
...
width: 25%;
text-align: center;
}
For the second issue, you need to set the width to 100%. Check the code snippet below for more details.
.dropdown .dropbtn {
...
width: 100%;
}
.navbar {
width: 100%;
background-color: rgb(151, 44, 44);
overflow: auto;
display: flex;
}
.navbar a {
border-right:1px solid #f5b7b7;
float: left;
padding: 8px;
color: white;
text-decoration: none;
font-size: 1.5vh;
width: 25%; /* Four links of equal widths */
text-align: center;
}
.navbar a:hover {
background-color: rgb(92, 25, 25);
}
.navbar a.active {
background-color: #04AA6D;
}
/* ************************************************************** */
/* DROPDOWN */
.dropdown {
float: left;
overflow: hidden;
width: 25%;
text-align: center;
}
.dropdown .dropbtn {
font-size: 1.5vh;
border: none;
outline: none;
color: white;
padding: 8px;
background-color: inherit;
font-family: inherit;
margin: 0;
width: 100%;
}
.dropdown:hover .dropbtn {
background-color: rgb(92, 25, 25);
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: rgb(0, 0, 0);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
width: 100%;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="navbar" id="tree">
Home1
Home2
Home3
<div class="dropdown">
<button class="dropbtn" > TOPICS ▼ </button>
<div class="dropdown-content">
t1
t2
t3
</div>
</div>
</body>
</html>
Related
I want to align my dropdown menu a tags to the center but can't figure out how to do that, only started with CSS recently.
It would display the dropdown dropdownbtn items in the dropdown-content with the links aligned to the center.
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
Use a transform on the dropdown.
left: 50%;
transform: translatex(-50%);
Also I switched from float to flexbox for simplicity and a more modern approach.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a {
font-size: 16px;
color: #f2f2f2;
padding: 14px;
text-decoration: none;
}
.dropdown {
position: relative;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
left: 50%;
transform: translatex(-50%);
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
I am a newbie and just learn about coding. I got stuck on a pretty simple thing I guess. How do I center a drop down button in a page? This is the HTML code.
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
min-width: 110px;
font-weight: bold;
vertical-align: middle;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: center;
background-color: #f1f1f1;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align: center;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
I did not use any CSS or JavaScript for this drop down button.
Should I also use CSS and JavaScript for this code to run well?
Please kindly advise.
Thank you.
You can change the position of the drop down to absolute and set the left and top.
.dropdown {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
transform: translate(-50%,-50%)
}
You can use:
body {
display: flex;
justify-content: center;
}
(
In a real world scenario you'll be applying this to the container element and not to entire body)
body {
display: flex;
justify-content: center;
}
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
min-width: 110px;
font-weight: bold;
vertical-align: middle;
margin: 0 auto;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: center;
background-color: #f1f1f1;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-align: center;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Also you can use this simple method too:
.dropdown {
position: relative;
display: inline-block;
text-align: center;
width: 100%;
}
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
min-width: 110px;
font-weight: bold;
vertical-align: middle;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: center;
background-color: #f1f1f1;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
text-align: center;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.dropdown{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
border:solid 2px green;
height:100vh;
}
<!DOCTYPE html>
<html>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</html>
I have tried to follow this tutorial, but I can't seem to find out why the dropdown menu won't show up at all when hovering over the dropdown button in the nav bar.
This is the HTML part of the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
New
Sales
Account
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
This is the CSS part of the code:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 30px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.new_sale {
background-color: green;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
The problem is that you are hiding the content which goes over the boundaries of your navbar and dropdown.
You need to remove
overflow: hidden;
from your #navbar and .dropdown class, check this fiddle
In my CSS code, the navbar boxes resize when the screen's width changes and also resizes when the screen is smaller than 600px amount of pixels. The drop-down box and content also resizes like the navbar boxes, however, the content is not resizing properly. When the screen is resized, the drop-down content is slightly smaller than the drop-down box, but, when the screen is less than 600px, it becomes larger than the box.
I had tried making the drop down content width the same as the boxes, however, this had no affect. I tried this with all the classes that is related to the content. None of them affected anything.
Note: I changed the background colour so that you can see how the content wasn't the same width as the drop-down box itself.
body {
background-color: blue;
}
p {
color: white;
font-size: 20px;
display: inline;
padding: 20px;
font-family: arial;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(10,10,10);
top: 0;
}
.navcont {
margin: 0;
position: relative;
float: left;
}
.navcont a, .dropbtn {
margin: 0;
position: relative;
display: block;
color: white;
font-size: 20px;
text-align: center;
padding: 5vh 7vw;
text-decoration: none;
border-right: 1px solid rgb(50,50,50);
border-left: 1px solid rgb(50,50,50);
}
.navcont a:hover {
transition-duration: 0.3s;
background-color: rgb(30,30,30);
}
.navcont a:active {
background-color: rgb(9,194,36);
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index:3
}
.dropdown:hover .dropbtn {
transition-duration: 0.3s;
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5vh 7.4vw;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.navcont a {
padding: 3vh 3vw;
}
.dropdown-content {
padding: 3vh 3vw;
}
a.dropdown-content {
padding: 3vh 3vw;
width: 100%;
}
.dropbtn {
padding: 3vh 3vw;
}
div.tr_about {
width: 60%;
}
div.tl_about {
width: 37.5%;
}
}
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<ul class="navbar">
<li class="navcont">Home</li>
<li class="navcont">About</li>
<li class="navcont">Purchase</li>
<li class="dropdown" style="float: right;">
Contact
<div class="dropdown-content">
Support
FAQ
</div>
</li>
</ul>
</div>
</body>
</html>
As mentioned above, I want the drop-down box content to have the same width as the drop-down box when the screen is being resized. However, the actual results I got was the content being slightly narrower than the drop-down box, and then when the screen is less than 600px wide, it becomes wider than the box.
modify your media query like below
.dropdown-content {
padding: 1vh 1vw;
right:10px;
}
a.dropdown-content {
padding: 1vh 1vw;
width: 98%;
}
.dropdown-content a {
padding: 5vh 2.9vw;
}
body {
background-color: blue;
}
p {
color: white;
font-size: 20px;
display: inline;
padding: 20px;
font-family: arial;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(10,10,10);
top: 0;
}
.navcont {
margin: 0;
position: relative;
float: left;
}
.navcont a, .dropbtn {
margin: 0;
position: relative;
display: block;
color: white;
font-size: 20px;
text-align: center;
padding: 5vh 7vw;
text-decoration: none;
border-right: 1px solid rgb(50,50,50);
border-left: 1px solid rgb(50,50,50);
}
.navcont a:hover {
transition-duration: 0.3s;
background-color: rgb(30,30,30);
}
.navcont a:active {
background-color: rgb(9,194,36);
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index:3
}
.dropdown:hover .dropbtn {
transition-duration: 0.3s;
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5vh 7.4vw;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
#media (max-width:650px) {
.navcont a {
padding: 3vh 3vw;
}
.dropdown-content {
padding: 1vh 1vw;
right:10px;
}
a.dropdown-content {
padding: 1vh 1vw;
width: 98%;
}
.dropdown-content a {
padding: 5vh 6.8vw;
}
}
#media screen and (max-width: 600px) {
.navcont a {
padding: 3vh 3vw;
}
.dropdown-content {
padding: 1vh 1vw;
right:10px;
}
a.dropdown-content {
padding: 1vh 1vw;
width: 98%;
}
.dropdown-content a {
padding: 5vh 2.9vw;
}
.dropbtn {
padding: 3vh 3vw;
}
div.tr_about {
width: 60%;
}
div.tl_about {
width: 37.5%;
}
}
<body>
<div>
<ul class="navbar">
<li class="navcont">Home</li>
<li class="navcont">About</li>
<li class="navcont">Purchase</li>
<li class="dropdown" style="float: right;">
Contact
<div class="dropdown-content">
Support
FAQ
</div>
</li>
</ul>
</div>
</body>
PFB code that is working as per your requirement
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
background-color: blue;
}
p {
color: white;
font-size: 20px;
display: inline;
padding: 20px;
font-family: arial;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(10,10,10);
top: 0;
}
.navcont {
margin: 0;
position: relative;
float: left;
width: 24% !important;
}
.navcont a, .dropbtn {
margin: 0;
position: relative;
display: block;
color: white;
font-size: 20px;
text-align: center;
padding: 5vh 7vw;
text-decoration: none;
border-right: 1px solid rgb(50,50,50);
border-left: 1px solid rgb(50,50,50);
}
.navcont a:hover {
transition-duration: 0.3s;
background-color: rgb(30,30,30);
}
.navcont a:active {
background-color: rgb(9,194,36);
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index:3
}
.dropdown:hover .dropbtn {
transition-duration: 0.3s;
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5vh 7.4vw;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.navcont a {
padding: 3vh 3vw;
}
.dropdown-content {
padding: 3vh 3vw;
}
a.dropdown-content {
padding: 3vh 3vw;
width: 100%;
}
.dropbtn {
padding: 3vh 3vw;
}
div.tr_about {
width: 60%;
}
div.tl_about {
width: 37.5%;
}
}
</style>
</head>
<body>
<div>
<ul class="navbar">
<li class="navcont">Home</li>
<li class="navcont">About</li>
<li class="navcont">Purchase</li>
<li class="dropdown" style="/* float: right; */">
Contact
<div class="dropdown-content">
Support
FAQ
</div>
</li>
</ul>
</div>
</body>
</html>
I have created this menu with a dropdown feature when you hover over "treatments". But when I apply the "position: fixed;" in the container class on CSS the dropdown menu doesn't function anymore. The menu goes to a fixed position but the dropdown feature won't function with the fixed position. I would like to solve it with CSS, any suggestions on how?
.container {
overflow: hidden;
background-color: rgba(48, 48, 48, 0.9);
font-family: Helvetica, sans-serif;
width: 100%;
position: fixed;
margin-top: 0;
margin-left: 0;
}
.container a {
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover,
.dropdown:hover .dropbtn {
background-color: #ff008f;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(255, 255, 255, 0.98);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f9e9ff;
}
.dropdown:hover .dropdown-content {
display: block;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="UCL.css">
<title>Home</title>
<div class="stripes">
<div class="container">
Contact Us
<a href="products-gifts.html" target="_top">Products &
Gifts</a>
<div class="dropdown">
<button class="dropbtn">Treatments</button>
<div class="dropdown-content">
<a href="body-contouring.html" target="_top">Body
Contouring</a>
Cellulite
Laser Hair Reduction
<a href="laser-peels.html" target="_top">Laser
Peels</a>
LED
<a href="photofacial.html" target="_top>" Photofacial & Photobody</a>
<a href="spider-veins.html" target="_top">Spider
Veins</a>
</div>
</div>
Home
</div>
</head>
It was the overflow: hidden on your .container element that prevented the dropdown menus from showing - not the position: fixed. By hiding overflow, you're preventing elements (such as your dropdown menu) that exceed the dimensions of the .container from displaying.
.container {
/* overflow: hidden; */
background-color: rgba(48, 48, 48, 0.9);
font-family: Helvetica, sans-serif;
width: 100%;
position: fixed;
margin-top: 0;
margin-left: 0;
}
.container a {
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover,
.dropdown:hover .dropbtn {
background-color: #ff008f;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(255, 255, 255, 0.98);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f9e9ff;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="stripes">
<div class="container">
Contact Us
<a href="products-gifts.html" target="_top">Products &
Gifts</a>
<div class="dropdown">
<button class="dropbtn">Treatments</button>
<div class="dropdown-content">
<a href="body-contouring.html" target="_top">Body
Contouring</a>
Cellulite
Laser Hair Reduction
<a href="laser-peels.html" target="_top">Laser
Peels</a>
LED
<a href="photofacial.html" target="_top>" Photofacial & Photobody</a>
<a href="spider-veins.html" target="_top">Spider
Veins</a>
</div>
</div>
Home
</div>
</div>