Html Can'；t将变换应用于变换比例_Html_Css

Html Can'；t将变换应用于变换比例

html css

Html Can'；t将变换应用于变换比例,html,css,Html,Css,我目前正在一家当地企业的网站上工作，目前我有一个菜单栏，但是我在transform:scale（1.2）上放置的转换不起作用，我已经寻找了几个小时的解决方案，但没有结果。从我收集的信息来看，我的代码应该工作得很好，但是转换不会应用，如果我只是在悬停时调整li的大小而不使用转换，它将移动它周围的其他项目，尽管转换工作方式是这样的，结果看起来很难看，菜单是全尺寸的，而且还没有响应，所以这并不意味着在小屏幕上看起来很好，这是我的代码 <!DOCTYPE html> <html&

我目前正在一家当地企业的网站上工作，目前我有一个菜单栏，但是我在transform:scale（1.2）上放置的转换不起作用，我已经寻找了几个小时的解决方案，但没有结果。从我收集的信息来看，我的代码应该工作得很好，但是转换不会应用，如果我只是在悬停时调整li的大小而不使用转换，它将移动它周围的其他项目，尽管转换工作方式是这样的，结果看起来很难看，菜单是全尺寸的，而且还没有响应，所以这并不意味着在小屏幕上看起来很好，这是我的代码

 <!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 jsfiddle: https://jsfiddle.net/0k62nz1w/


太平洋礁


身体
{
背景图片：url（“banner.jpg”）；
背景重复：无重复；
背景尺寸：封面；
}
保险商实验室
{
列表样式：无；
填充物：5px；
边际：0px；
左侧填充：3.3em；
垫面：2米；
}
ulli
{
左边距：0.7em；
字体大小：55px；
显示：块；
位置：相对位置；
浮动：左；
边框顶部：5px#3333ff；
边框底部：5px起点#3333ff；
边界半径：20px；
}
李乌尔
{
显示：无；
}
ula li
{
显示：块；
填充：5px10px 5px10px；
文字装饰：无；
空白：nowrap；颜色：#fff；
转变：转变1s；
过渡：背景色0.5s；
过渡：盒影0.5s；
盒影：0px 0px 0px 0px 000000；
}
ul-a-li：悬停
{
转换：比例（1.2）；
盒影：0px 10px 20px 0px 000000；
背景：#C0C0；
}
李：悬停
{
显示：块；
位置：绝对位置；
}
李：停下来，李
{
浮动：无；
}
a:悬浮李
{
背景：#f00；
}
李：悬停a李：悬停
{
背景：#000；
}
#下降导航李ul李
{
边框顶部：0px；
}
.菜单
{
位置：绝对位置；
背景#7777ff；
宽度：100%；
排名：0；
左：0；
高度：10公分；
边框底部：1px起点#3333ff；
}
#标识箱
{
背景图片：url（“logo.png”）；
高度：1.7em；
背景重复：无重复；
边缘顶部：-0.3em；
字体大小：60px；
}
#hiddenoverlay
{
不透明度：0；
}
.大约2
{
左边距：-0.7em；
}
下面是一个JSFIDLE：https://jsfiddle.net/0k62nz1w/

您可以使用一个用逗号分隔的

转换定义多个转换

正文{
背景图片：url（“banner.jpg”）；
背景重复：无重复；
背景尺寸：封面；
}
保险商实验室{
列表样式：无；
填充物：5px；
边际：0px；
左侧填充：3.3em；
垫面：2米；
}
ulli{
左边距：0.7em；
字体大小：55px；
显示：块；
位置：相对位置；
浮动：左；
边框顶部：5px#3333ff；
边框底部：5px起点#3333ff；
边界半径：20px；
}
李乌尔{
显示：无；
}
ula li{
显示：块；
填充：5px10px 5px10px；
文字装饰：无；
空白：nowrap；
颜色：#fff；
变换：变换1s，背景色0.5s，框影0.5s；
盒影：0px 0px 0px 0px 000000；
}
ul-a-li：悬停{
转换：比例（1.2）；
盒影：0px 10px 20px 0px 000000；
背景：#C0C0；
}
李：悬停{
显示：块；
位置：绝对位置；
}
李：停下来，李{
浮动：无；
}
a:悬浮李{
背景：#f00；
}
李：悬停a李：悬停{
背景：#000；
}
#下降导航李ul李{
边框顶部：0px；
}
.菜单{
位置：绝对位置；
背景#7777ff；
宽度：100%；
排名：0；
左：0；
高度：10公分；
边框底部：1px起点#3333ff；
}
#标识箱{
背景图片：url（“logo.png”）；
高度：1.7em；
背景重复：无重复；
边缘顶部：-0.3em；
字体大小：60px；
}
#hiddenoverlay{
不透明度：0；
}
.大约2{
左边距：-0.7em；
}

太平洋礁


你是个传奇人物，我从没想过，thankyou@Provision不客气。如果解决了问题，请确保选择此作为解决方案。