تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

0

منو بازشونده

Admin آسان 916/ دانلود 163 بازدید

با HTML و CSS منویی بسازید وقتی موس روی آن قرار گرفت زیر منو باز شود و کاربر بتواند از گزینه های زیر منو، هرکدام را انتخاب کرده و وارد لینک مربوطه شود

2 جواب

نمیتونم این تمرین رو حل کنم!
0
<nav>
  <ul>
    <li>
      <a href="#">منوی اصلی</a>
      <ul>
        <li><a href="#">گزینه 1</a></li>
        <li><a href="#">گزینه 2</a></li>
        <li><a href="#">گزینه 3</a></li>
      </ul>
    </li>
  </ul>
</nav>
<style>
    nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  background: #efefef;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
  content: ""; clear: both; display: block;
}
nav ul li {
  float: left;
}
nav ul li:hover {
  background: #f3f3f3;
}
nav ul li a {
  display: block; padding: 15px;
  color: #757575; text-decoration: none;
}
nav ul ul {
  background: #f3f3f3; border-radius: 0px; padding: 0;
  position: absolute; top: 100%;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
nav ul ul li a {
  padding: 10px 15px;
  color: #757575;
}
nav ul ul li a:hover {
  color: #fff;
}
</style>
کاربر 1713 دانلود HTML CSS
0
<!DOCTYPE html>
<head>
<style>
        ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: none;
        }
        ul:hover{
            display: block;
        }
        li a{
            display: inline-block;
            text-decoration: none;
            background-color: rgb(194, 194, 194);
            width: 200%;
            text-decoration: none;
            color: black;
        }
        li:hover a{
            background-color: rgb(114, 114, 114);
            color: white;
        }
        #box{
            width: 0px;
            height: 60px;
           }
        #box:hover+ul{
            display: block;
            background-color: rgb(126, 126, 126);
        }
    </style>
</head>
<html dir="rtl">
<body>
<div id="box">
    <p style=" font-size: 40pt;" class="box">Menu</p>
</div>
<ul>
    <li ><a href="#" style="font-size: 40pt;">ثبت نام</a></li>
    <li><a href="#" href="#" style="font-size: 40pt;">درباره ما</a></li>
    <li><a href="#" href="#" style="font-size: 40pt;">محصولات</a></li>
<li><a href="#" href="#" style="font-size: 40pt;">......</a></li>
</ul>
</body>
</html>
Mahan دانلود HTML CSS Front-End

ارسال جواب

# کداتو توی این بخش بنویس
# فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
# البته قبلش این سه خط رو پاک کن

  • تو جوابت میتونی از تصویر، کد، لینک به سایر صفحات و... استفاده کنی
  • لطفا جواب های تکراری ارسال نکن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×
×
بستن