تغییر در منو وبسایت

hossien535

New Member
سلام .

دوستان من یک منو دارم به این شکل (تصویر شماره 1)
1.jpg

میخواهم به این شکل در بیاد (تصویر شماره 2)
2.jpg

کد html منو به صورت زیر است :
[LTR]
HTML:
<div class="menu"> <!-- menu -->			<ul class="sf-menu">				<li><a href="./index.html">Home<span>Homepage</span></a></li>				<li><a href="./about.html">About<span>Who we are</span></a>					<ul>						<li><a href="./full-width.html">Full width page</a></li>						<li><a href="./typography.html">Typography</a></li>						<li><a href="./sidebar-typography.html">Sidebar typography</a></li>					</ul>				</li>						</ul>		</div> <!-- end menu -->
[/LTR]

کد استایل هم به این صورت است :
کد:
/* Portfolio menu styles */
ul.portfolio-menu { position: relative; display: block; height: 35px; width: 978px; margin: 29px 0 0 0; background-image: url(../files/portfolio-menu-main.jpg); background-repeat: repeat-x; }
ul.portfolio-menu li { display: block; float: left; position: relative; }
ul.portfolio-menu li.last { float: right; width: 5px; height: 35px; background-image: url(../files/portfolio-menu-right.jpg); background-repeat: no-repeat; margin: 0 0 0 15px; }
ul.portfolio-menu li a { display: block; float: left; height: 22px; padding: 9px 26px 0 26px; text-decoration: none; color: #404040; text-transform: uppercase; font-size: 11px; }
ul.portfolio-menu li a:hover, ul.portfolio-menu li a.active  { border-bottom: 2px solid #bd2727; color: #bd2727; } 
ul.portfolio-menu li.first a { background-image: url(../files/portfolio-menu-home.jpg); background-repeat: no-repeat; width: 42px; height: 35px; padding: 0; border: none; margin: 0 15px 0 0; }
/* End Portfolio menu styles */

لطفا راهنمایی کنید .
 
آخرین ویرایش:

sheisebaboo

Active Member
سلام.
اگر دموی منو رو داشتید بصورت آنلاین بهتر بود.
ولی خب شما گزینه float رو در css از left به right تغییر بدید.
و گزینه های text-align:right و direction:rtl رو هم در cssتون اضافه کنید
 

sheisebaboo

Active Member
در کدهای cssتون، کد ul.sf-menu ul رو پیدا کنید و مقدارهای زیر رو بهش بدید:

کد:
direction:rtl;
margin-left: -43px;
 

جدیدترین ارسال ها

بالا