As I work on developing a website for a local business, my progress involves creating a menu bar. However, I am facing an issue with the transition I have applied using transform: scale(1.2) which does not seem to be working as intended. After spending hours looking for a solution, I am yet to find one. While reviewing my code, everything seems correct and should be functioning smoothly, but the transition is not being applied. If I attempt to resize the list item on hover without using transform, it ends up shifting the other elements around it, resulting in an unattractive appearance. The menu is currently displayed at full size and is not responsive, hence not optimized for smaller screens. Below is the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Pacific Cay
</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<a href="#"><li class="about2">About Us</li></a>
<a href="#"><li>About Us</li></a>
<a href="home.html"><li id="logobox"><span id="hiddenoverlay">About us.
</span></li></a>
<a href="#"><li>About Us</li></a>
<a href="#"><li class="about">About Us</li></a>
</ul>
</div>
</div>
</body>
</html>
body
{
background-image: url("banner.jpg");
background-repeat: no-repeat;
background-size: cover;
}
ul
{
list-style: none;
padding: 5px;
margin: 0px;
padding-left: 3.3em;
padding-top: 2em;
}
ul li
{
margin-left: 0.7em;
font-size: 55px;
display: block;
position: relative;
float: left;
border-top: 5px outset #3333ff;
border-bottom: 5px outset #3333ff;
border-radius: 20px;
}
li ul
{
display: none;
}
ul a li
{
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;color: #fff;
transition: transform 1s;
transition: background-color 0.5s;
transition: box-shadow 0.5s;
box-shadow: 0px 0px 0px 0px #000000;
}
ul a li:hover
{
transform: scale(1.2);
box-shadow: 0px 10px 20px 0px #000000;
background: #c0c0c0;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
}
a:hover li
{
background: #f00;
}
li:hover a li:hover
{
background: #000;
}
#drop-nav li ul li
{
border-top: 0px;
}
.menu
{
position: absolute;
background: #7777ff;
width: 100%;
top: 0;
left: 0;
height: 10em;
border-bottom: 1px outset #3333ff;
}
#logobox
{
background-image: url("logo.png");
height: 1.7em;
background-repeat: no-repeat;
margin-top: -0.3em;
font-size: 60px;
}
#hiddenoverlay
{
opacity: 0;
}
.about2
{
margin-left: -0.7em;
}
Here is a link to view the code: https://jsfiddle.net/0k62nz1w/