PDA

View Full Version : ساخت زیر منوبا استفاده ازcss


salmah
پنج شنبه 04 اردیبهشت 1393, 00:45 صبح
سلام میشه با استفاده از cssزیر منو درست کرد
منو به صورت عمودی هست حالا اگه بخوام با استفاده از css زیر منو بسارم باید چه کار کنم مثلا این کد


<ul>
<li class="icon mymenu" ><a href="Default.aspx" > صفحه اصلی</a></li>
<li class="icon mymenu"><a href="course.aspx">دوره های در حال برگزاری</a></li>
<li class="icon mymenu" ><a href="register.aspx">ثبت نام</a></li>

</ul>
ab.ali
پنج شنبه 04 اردیبهشت 1393, 12:09 عصر
تا اون جایی که من یادمه باید اول شما یک زیر منو با تگ ul و li برای هر کدوم از از li های اصلی درست کنی بعد با استایل دهی به اون ها می تونی زیر منو رو درست کنی!اگر هم می خوای یک نمونه برات بزارم و برات توضیح بدم!
البته کار های دیگه اش باید با css کنی مثلا موقعی که روی li اصلی رفت زیر منو چطور نمایان بشه و .... .:لبخندساده:
salmah
پنج شنبه 04 اردیبهشت 1393, 17:38 عصر
تشکر اگه میشه بزارید
ab.ali
پنج شنبه 04 اردیبهشت 1393, 22:11 عصر
تشکر اگه میشه بزارید

خواش می کنم وظیفه است. این هم کد ها:




<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta charset="utf-8" />
<title>Test</title>

<style>

*{
padding:0px;
margin:0px}

.Menu{
width:100px;
height:auto;
background-color:#0099ff}

li{
width:auto;
height:auto;
list-style:none;
padding:13px 10px 13px 0px}

li:hover{
background-color:#CCC}

a{
font:13px 'B Yekan';
color:#FFF;
text-decoration:none}

.Sub{
background-color:#0099ff;
width:100px;
height:auto;
position:absolute;
top:50px;
right:100px;
display:none}

.Menu li:hover>.Sub{
display:block;}

</style>

</head>
<body dir="rtl">

<ul class="Menu">

<li><a href="#">خانه</a></li>
<li><a href="#">موضوعات</a>

<ul class="Sub">

<li><a href="#">گرافیک</a></li>
<li><a href="#">فتوشاپ</a></li>
<li><a href="#">طراحی وب</a></li>

</ul>

</li>

<li><a href="#">ارتباط با ما</a></li>
<li><a href="#">درباره ما</a></li>

</ul>

</body>
</html>



و نتیجه این می شه:
118309

اگر از کد ها چیزی رو متوجه نشدین بگین تا براتون توضیح بدم!:لبخندساده: