質問編集履歴

1 追記しました

mupo

mupo score 10

2019/03/20 20:49  投稿

transformを設定したテキストが、マウスオンでぶれてしまう
### 前提・実現したいこと
transformを設定したテキストが、なぜかマウスオンでぶれてしまうことに気づきました。
ぶれるのはプルダウンメニューについているTEST2のテキストです。
ぶれないようにするにはどうしたらいいでしょうか?
下のURLで表示されます。
https://thimbleprojects.org/lastmemoria/657528/
ナビのborderは斜線で表示して、テキストはまっすぐに表示したいのでそういう記述をしています。
 
※3/20 追記  
 
ぶれ自体は「li.menu__single ul.menu__second-level {」内のtransition記述を消すことで  
改善することを確認しましたが、代わりにドロップダウンのふわっとした出方が消えました。  
できればドロップダウンのアニメーションも残したいと思っています。  
### 該当のソースコード
```HTML
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Thimble Sample</title>
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
 
   <div id="gloval-nav">
     <ul class="menu">
       <li class="menu__single">
         <a href="#" class="init-bottom">TEST1</a></li>
       <li class="menu__single">
         <a href="#" class="init-bottom">TEST2</a>
         <ul class="menu__second-level">
           <li class="a"><a href="#">test</a></li>
           <li class="a"><a href="#">test</a></li>
           <li class="a"><a href="#">test</a></li>
         </ul>
       </li>
       <li class="menu__single">
         <a href="#" class="init-bottom">TEST3</a></li>
     </ul>
   </div>
   
 </body>
</html>
```
```CSS
.menu {
 position: relative;
 width: 100%;
 max-width: 480px; /* 600 */
 margin: 0 auto;
 font-size: 20px;
}
.menu > li {
 float: left;
 width: 33%;
 display:table-cell;
 vertical-align:middle;
 text-align:center;
 -webkit-transform: skewX(-145deg);
 -moz-transform: skewX(-145deg);
 transform: skewX(-145deg);
 border-right: 1px solid #000;
 border-left: 1px solid #000;
}
.menu > li+li {
 border-left: 0;
 border-right: 1px solid #333;
}
.menu > li a {
 display: block;
 color: #000;
 padding:0 15px;
 text-decoration: none;
 line-height: 1.2 !important;
}
.menu > li a.init-bottom {
 transform: skewX(145deg);
}
.menu > li a:hover {
 text-decoration: underline;
}
ul.menu__second-level {
 visibility: hidden;
 opacity: 0;
 transform: skewX(145deg);
 text-align:left;
}
.menu > li.menu__single {
 position: relative;
}
li.menu__single ul.menu__second-level {
 position: absolute;
 top: 30px;
 left: -60px;
 width: 110%;
 -webkit-transition: all .2s ease !important;
 transition: all .2s ease !important;
 transform: skewX(145deg);
}
li.menu__single:hover ul.menu__second-level {
 top: 30px;
 left: -60px;
 visibility: visible;
 opacity: 1 !important;
}
.menu > li:hover {
 -webkit-transition: all .5s;
 transition: all .5s;
}
.menu__second-level li {
 background-color: rgba(255,255,255,0.7);
 padding: 5px 0;
 list-style: none;
}
/* floatクリア */
.menu:before,
.menu:after {
 content: " ";
 display: table;
}
.menu:after {
 clear: both;
}
.menu {
 *zoom: 1;
}
```
### 試したこと
hover時の表示がおかしいので、「.menu > li a:hover {」や「.menu > li:hover {」を修正すれば解決すると思い「.menu > li」と同じ記述をしてみましたが違うようでした。
「.menu > li {」のtransformの記述を消すとぶれはなくなるので
テキストを斜めからまっすぐにしようとする工程にミスがあるのだろうなというのはわかるのですが…。
  • HTML

    13057 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    8738 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る