jini0513

앗 그렇군요 감사합니다 ㅠㅠ

안녕하세요 질문이 있습니다

<!DOCTYPE html>
<html lang="ko">
<head>
&nbsp; &nbsp; <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
&nbsp; &nbsp; <title>css flex!!</title>
 <link rel="stylesheet" href="플렉스 메뉴.css">
<style>
&nbsp; &nbsp; &nbsp;ul{list-style:none;}
&nbsp; &nbsp; ul{padding: 0; list-style: none;}
&nbsp; &nbsp; </style>
&nbsp; &nbsp;&nbsp;
</head>
<body>
&nbsp;<ul class="menu">
&nbsp; &nbsp; &nbsp;<li class="menu-item"><a href="#" class="menu-link"></a>home</li>
&nbsp; &nbsp; &nbsp;<li class="menu-item"><a href="#" class="menu-link"></a>about</li>
&nbsp; &nbsp; &nbsp;<li class="menu-item"><a href="#" class="menu-link"></a>product</li>
&nbsp; &nbsp; &nbsp;<li class="menu-item"><a href="#" class="menu-link"></a>contact</li>
&nbsp;</ul>
</body>
</html>

.menu{display: flex;}
.menu-item{
&nbsp; &nbsp; width: 25%;
&nbsp; &nbsp; background: gold;}
.menu-item:hover{
&nbsp; &nbsp; width: 35%;
&nbsp; &nbsp; background: crimson}
.menu-link{display: block;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 1em;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size:1.2rem;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: bold;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:#555;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;}
.menu-link:hover{color: white;}

jini0513

投稿