ایجاد زیر منو

[omidparkour]

سلام
میخوام برای منوی نمونه کار سایتم زیر منو ایجاد کنم میشه راهنمایی کنین
این رو میدونم که باید با تگ <ul> درست کنم :اشتباه:
رها دیزاینر | درباره ی ما (http://www.rahadesigner.ir)

[omidparkour]

کسی نیست کمک کنه

[Moien Tajik]

بفرمایید ، پارت های بعدیش رو خودتون بگریدید و پیدا کنید ! :چشمک:
DropDown Menu (http://www.7learn.com/tutorials/drop-down-menu-part1)

[omidparkour]

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

[omidparkour]

واقعا کسی کمکم نمیکنه
خسته شدم اینقدر اومدم نگاه کردم
روزی 20 بار میام :دی

[mehbod.rayaneh]

درود
همونطور ک خودتون گفتید باید در اون li ک قراره زیر منو داشته باشه 1 دونه ul ایجاد کنید. خوب!
ایجاد کنید!
ب منوی اصلی position:relative بدید! و ب ulی ک میشه زیر منو position:absolute ! وقتی position:absolute میگیره با مقدار top و right میتونید فاصله را تنظیم کنید ک دقیقا بره زیر منوی اصلی!
حالا نیازه ک پنهان باشه و با رفتن موس روی والدش پیدا بشه دیگه! باید بهش visibility:hidden بدید دیگه!
خوب! تا اینجا منو را داریم! ولی پیدا نیس!
حالا با دادن 1 همچین استایلی : ul li:hover ul
میگیم هر موقع موس رفت روی li منوی اصلی ul ک ایجاد کردیم باید visibility:visible بشه!
ب همین راحتی! چیز خاصی نداره!
موفق باشید

[omidparkour]

سلام
ممنون از آموزشی که دادین
من رو شرمنده کردین
من مراحلی که شما گفتین رو انجام دادم اما چون زیر منو از منو اصلی بزرگتر هست دقیقا زیرش قرار نگرفت و منو کلا به هم خورد و وقتی از hidden دراوردم داخل منو ها اومده بود
میشه خودتون زحمتش رو بکشین درست کنین
شرمنده

[omidparkour]

لطف کنه یکه برام درست کنه

[omidparkour]

کمک تو رو خدا

[mehbod.rayaneh]

سلام
ممنون از آموزشی که دادین
من رو شرمنده کردین
من مراحلی که شما گفتین رو انجام دادم اما چون زیر منو از منو اصلی بزرگتر هست دقیقا زیرش قرار نگرفت و منو کلا به هم خورد و وقتی از hidden دراوردم داخل منو ها اومده بود
میشه خودتون زحمتش رو بکشین درست کنین
شرمنده
درود
شما باید به ul مقادیر top:اندازه منوی اصلی px و right:0 را هم اضافه میکردید تا نره توی منوی بالایی قرار بگیره دیگه! اضافه کردید؟
باید فاصله از بالا نیز تنظیم باشه(top:150px) و ب سمت راست چسبیده باشه(right:0)
امیدوارم خودتون بتونید پروژه زیرمنو را ب پایان برسونید!!!

[omidparkour]

باز هم نتونستم

[mehbod.rayaneh]

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

[omidparkour]

بفرمایید:
HTML:

<div class="container" >
<!-- NAV MENU -->
<div id="header">
<div class="mobile-nav visible-phone"> </div>

<nav class="hidden-phone">
<font face="b yekan">
<ul>
<li><a href='index.html' class="current-menu-item"><span>درباره ما</span></a></li>
<li><a href='nemone.html'><span>نمونه‌کار</span></a></li>
<li><a href='tarefe.html'><span>تعرفه طراحی</span></a></li>
<li><a href='mail.html'><span>تماس‌با‌ ما</span></a></li>
</ul> </font>
</nav>
</div>
</div>


CSS:
#header nav { position:relative; z-index:1100; font-family: BYekan; margin: 20px auto; width: 620px;}
#header nav ul { display:inline-block; position:relative; padding:0; margin:0; font-size: 20px; }
#header nav ul li { float:right; list-style: none; }
#header nav ul:after, #header nav ul:before { margin-top:0.5em; content: ""; float:right; border-width:1.5em; border-style:solid; }
#header nav ul:after { border-left-color:transparent !important; }
#header nav ul:before { border-right-color:transparent !important; }
#header nav ul a:link, #header nav ul a:visited { text-decoration:none; float:left; height:3.5em; overflow:hidden; }
#header nav ul span { display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
#header nav ul a:hover span, #header nav ul a.waiting span { margin-top:4px; }
#header nav ul .current-menu-item span, #header nav ul .current-menu-item a:hover span { margin-top:0; }
#header nav ul span:before, #header nav ul span:after { content: ""; position:absolute; top:3em; border-bottom-width:0.5em; border-bottom-style:solid;}
#header nav ul span:before { left:0; border-right-width:0.5em; border-right-style:solid; }
#header nav ul span:after { right:0; border-left-width:0.5em; border-left-style:solid; }



/* LIGHT NAV MENU */
/* Background Color */
#header nav ul:after, #header nav ul:before { border-color:#eee; }
#header nav ul span { background:#eee; color: #333;}
#header nav ul span:before, #header nav ul span:after { border-bottom-color:#f3f3f3; color: #ccc;}
/* Hover State */
#header nav ul a:hover span, #header nav ul a.waiting span { background:#ddd;}
#header nav ul .current-menu-item span{
background: #ff3300;
color: #fff;
box-shadow: 0 0 8px 0 rgba( 0, 0, 0, 0.3) inset;
}

#header nav ul .current-menu-item span:hover{
background: #c00;
color: #fff;
}

[omidparkour]

هلپ می پلیز

[qartalonline]

کدتون رو بصورت زیر اصلاح کردم:

<!DOCTYPE html>
<html>
<head>
<title>sub menu sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
direction: rtl;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}

nav ul {
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after, nav ul:before {
content: "";
display: block;
margin-top: 0.5em;
border-width: 1.5em;
border-style: solid;
border-color: #eee;
}
nav ul:after {
float: left;
border-left-color: transparent !important;
}
nav ul:before {
float: right;
border-right-color: transparent !important;
}
nav ul li {
float: right;
display: block;
height: 56px;
overflow: hidden;
}
nav ul li a {
position: relative;
background: #eee;
color: #333;
text-decoration: none;
display: block;
line-height: 3em;
padding: 0 1em;
margin-top: 0.5em;
-webkit-transition: background-color 0.2s, margin-top 0.2s;
-moz-transition: background-color 0.2s, margin-top 0.2s;
-ms-transition: background-color 0.2s, margin-top 0.2s;
-o-transition: background-color 0.2s, margin-top 0.2s;
transition: background-color 0.2s, margin-top 0.2s;
}
nav ul li a:before, nav ul li a:after {
z-index: -1;
content: "";
position: absolute;
top: 3em;
line-height: 3em;
border-bottom-width: 0.5em;
border-bottom-style: solid;
border-bottom-color: #fff;
color: #ccc;
}
nav ul li a:before {
left: 0;
border-right-width: 0.5em;
border-right-style: solid;
}
nav ul li a:after {
right: 0;
border-left-width: 0.5em;
border-left-style: solid
}
nav ul li a:hover, nav ul li a.waiting {
background: #ddd;
}
nav ul li a:hover{
margin-top: 0;
}
nav ul li:hover > a{
margin-top: 0;
}
nav ul a.current-menu-item {
background: #ff3300;
color: #fff;
box-shadow: 0 0 8px 0 rgba( 0, 0, 0, 0.3) inset;
margin-top: 0;
}
nav ul a.current-menu-item:hover {
background: #c00;
color: #fff;
margin-top: 2px;
}

nav ul ul {
position: absolute;
padding: 0;
}
nav ul ul:after, nav ul ul:before {
border: 0;
}
nav ul ul li {
float: none;
position: relative;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a class="current-menu-item" href='index.html'>درباره ما</a></li>
<li>
<a href='nemone.html'>نمونه‌کار</a>
<ul>
<li><a href="#1">لینک 1</a></li>
<li><a href="#2">لینک 2</a></li>
<li><a href="#3">لینک 3</a></li>
</ul>
</li>
<li>
<a href='tarefe.html'>تعرفه طراحی</a>
<ul>
<li><a href="#1">لینک 1</a></li>
<li><a href="#2">لینک 2</a></li>
<li><a href="#3">لینک 3</a></li>
</ul>
</li>
<li><a href='mail.html'>تماس‌با‌ ما</a></li>
</ul>
</nav>
</body>
</html>

[omidparkour]

ممنون
اما به نظرم زیاد جالب به نظر نمیرسه
میشه یه کم جالب ترش کنید
مثلا چسبیده باشن به هم و یا.....

[qartalonline]

خودتون میتونید کد رو تغییر بدید.
اینم یه اصلاح دیگه:

<!DOCTYPE html>
<html>
<head>
<title>sub menu sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
direction: rtl;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}

nav ul {
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after, nav ul:before {
content: "";
display: block;
margin-top: 0.5em;
border-width: 1.5em;
border-style: solid;
border-color: #eee;
}
nav ul:after {
float: left;
border-left-color: transparent !important;
}
nav ul:before {
float: right;
border-right-color: transparent !important;
}
nav ul li {
float: right;
display: block;
height: 56px;
overflow: hidden;
}
nav ul li a {
width: 100px;
text-align: center;
position: relative;
background: #eee;
color: #333;
text-decoration: none;
display: block;
line-height: 3em;
padding: 0 1em;
margin-top: 0.5em;
-webkit-transition: background-color 0.2s, margin-top 0.2s;
-moz-transition: background-color 0.2s, margin-top 0.2s;
-ms-transition: background-color 0.2s, margin-top 0.2s;
-o-transition: background-color 0.2s, margin-top 0.2s;
transition: background-color 0.2s, margin-top 0.2s;
}
nav ul li ul li a {
margin-top: 0;
width: 100px;
background: #e5e5e5;
}
nav ul li ul li{
height: 48px;
}
nav ul li ul li:last-child{
height: 56px;
}
nav ul li a:before, nav ul li a:after {
z-index: -1;
content: "";
position: absolute;
top: 3em;
line-height: 3em;
border-bottom-width: 0.5em;
border-bottom-style: solid;
border-bottom-color: #eee;
color: #ccc;
}
nav ul li ul li a:before, nav ul li ul li a:after {
border-bottom-color: #fff;
}
nav ul li a:before {
left: 0;
border-right-width: 0.5em;
border-right-style: solid;
}
nav ul li a:after {
right: 0;
border-left-width: 0.5em;
border-left-style: solid
}
nav ul li a:hover, nav ul li a.waiting {
background: #ddd;
}
nav ul li:hover > a{
margin-top: 0;
background: #e5e5e5;
}
nav ul li a:hover{
margin-top: 0;
background: #d7d7d7;
}
nav ul a.current-menu-item {
background: #ff3300;
color: #fff;
box-shadow: 0 0 8px 0 rgba( 0, 0, 0, 0.3) inset;
margin-top: 0;
}
nav ul a.current-menu-item:hover {
background: #c00;
color: #fff;
margin-top: 2px;
}

nav ul ul {
position: absolute;
padding: 0;
}
nav ul ul:after, nav ul ul:before {
border: 0;
}
nav ul ul li {
float: none;
position: relative;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a class="current-menu-item" href='index.html'>درباره ما</a></li>
<li>
<a href='nemone.html'>نمونه‌کار</a>
<ul>
<li><a href="#1">لینک 1</a></li>
<li><a href="#2">لینک 2</a></li>
<li><a href="#3">لینک 3</a></li>
</ul>
</li>
<li>
<a href='tarefe.html'>تعرفه طراحی</a>
<ul>
<li><a href="#1">لینک 1</a></li>
<li><a href="#2">لینک 2</a></li>
<li><a href="#3">لینک 3</a></li>
</ul>
</li>
<li><a href='mail.html'>تماس‌با‌ ما</a></li>
</ul>
</nav>
</body>
</html>