ایجاد شده در ۲۰ اسفند ۱۴۰۰
سلام ، این تمریت مینی پروژه من هست ، مشکل اینجاست که موقع هاور کردن ایکونها ، ساختار باکس به هم میریزه و ایکونها از سر جاشون تکون میخورن ( بخاطر نقص در قسمت اپلود کد هارو بصورت متن همینجا مینویسم ) با تشکر از زحمات استاد صالحی
html:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/0eb51f3416.js"
crossorigin="anonymous"
>script>
<link
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style.css" />
<title>Documenttitle>
head>
<body>
<header>
<h1 class="site">SITE ICON Oh1>
<nav>
<div class="box">
<ol>
<li>
<a href="">
<i class="fa-solid fa-house-chimney">i>
home
a>
li>
<li class="movie_sub">
<a href="">
<i class="fa-solid fa-film">i>
movies
<ul class="sub_menu" style="margin: 0px">
<li><a href="">actiona>li>
<li><a href="">romantica>li>
<li><a href="">comedya>li>
<li><a href="">adventurea>li>
<li><a href="">life stylea>li>
ul>
li>
<li>
<a href=""><i class="fa-solid fa-tv">i> seriesa>
li>
<li>
<a href=""><i class="fa-solid fa-photo-film">i> gifa>
li>
<li>
<a href=""
><i class="fa-regular fa-rectangle-list">i> categorize
li>
<li>
<a href=""><i class="fa-regular fa-circle-question">i> abouta>
li>
ol>
div>
nav>
header>
body>
html>
css :
* {
margin: 0;
box-sizing: border-box;
list-style: none;
}
a {
text-decoration: none;
color: white;
}
.site {
color: white;
background-color: black;
height: 60px;
padding: 10px;
}
.box {
font-family: "Bebas Neue", cursive;
height: 100px;
background-color: #032d2b;
border: 10px solid #60632e;
padding: 25px;
}
.box ol {
display: inline;
padding: 0;
}
.box ol li {
display: inline;
margin: 60px;
font-size: 20px;
/* font-weight: bold; */
}
li.movie_sub {
position: relative;
}
.sub_menu {
position: absolute;
min-width: 10px;
right: -37px;
top: 55px;
display: block;
}
ul.sub_menu li {
margin: 10px;
display: block;
}
.box li :hover {
background-color: #60632e;
padding: 25px 25px 33px 25px;
}
.box li:hover ul.sub_menu {
display: block;
}
ul.sub_menu:hover {
color: #032d2b;
}
