مشگل اساسی در طراحی منوی سایت

سلام

یک منوی سایت طراحی کردم که به صورت آبشاری دارای زیر منوهایی هست !

مشگلی که چند روزه منو درگیر خودش کرده درست قرار نگرفتن زیر منوهاا زیر منوی مادرشون هست !

کد رو قرار میدم لطفا دوستان مشگل و خطای بنده رو اعلام کنند !

واقعا چند روزه درگیر این هستم !

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    /* Start TopMenu */
.topmenu{
	background-color: #232a34;
	box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
	height: 45px;
}
.topmenu ul{
	float: right;
	margin-right:-29px;
}
.topmenu ul li{
	list-style:none;
	float:right;
	padding:8px 30px 0 0;
	transition: all 0.5s ease;
	margin-top:-10px;
}
.topmenu ul li a{
	color:#fff;
	font-family:'BYekan';
	font-size:16px;
}
.topmenu ul li a:hover{
	color:#dbdbdb;
}
.topmenu ul ul {
	float: right;
	top:49px;
	display:none;
	width:0;
	position:absolute;
	padding:0 0;
	margin:0;
}
.topmenu ul li:hover > ul{
  display:block;
}
.topmenu li li {
}
.topmenu li li a{
	float:right;
	padding:10px;
	text-align:center;
	width:125px;
	margin: 0;
	background-color: #232a34;
}
.topmenu li li a:hover {
	background-color: #6100FF;
	color:#FFFFFF;
}
.topmenu ul ul ul {
	display:none;
	position:absolute;
	padding: 0 30px;
}
    /* End TopMenu */
	
</style>
</head>

<body>
<!-- ( Start TopMenu ) -->
<div class="topmenu">
 <div class="middle">
  <ul>
  <li><a href="">صفحه نخست</a></li>
  <li><a href="">وبلاگ</a></li>
  <li><a href="">فروشگاه</a></li>
  <li><a href="">خدمات هاستینگ</a>
     <ul>
   <li><a href="#">آیتم زیرمجموعه یک</a></li>
   <li><a href="#">آیتم زیرمجموعه دو</a>
      <ul>
      <li><a href="#">آیتم زیرمجموعه یک</a></li>
      <li><a href="#">آیتم زیرمجموعه دو</a></li>
      <li><a href="#">آیتم زیرمجموعه سه</a></li>
      <li><a href="#">آیتم زیرمجموعه چهار</a></li>
      </ul>
   </li>
   </ul>
  </li>
  <li><a href="">قوانین</a></li>
  <li><a href="">امکانات</a>
   <ul>
   <li><a href="#">آیتم زیرمجموعه یک</a></li>
   <li><a href="#">آیتم زیرمجموعه دو</a>
      <ul>
      <li><a href="#">آیتم زیرمجموعه یک</a></li>
      <li><a href="#">آیتم زیرمجموعه دو</a></li>
      <li><a href="#">آیتم زیرمجموعه سه</a></li>
      <li><a href="#">آیتم زیرمجموعه چهار</a></li>
      </ul>
   </li>
   </ul>
  </li>
  <li><a href="">درباره ما</a></li>
  <li><a href="">تماس با ما</a></li>
  </ul>
 </div>
</div>
<!-- ( End TopMenu ) -->

</body>

</html>

عیدتون مبارک !

موفق باشید

درپناه حق تعالی

پرسیده شده در 1395/01/08 توسط

کاربر توسینسو

1 پاسخ

سلام

بفرمایید

یه مقدار توی کد های css تغییرات دادم و چند خطی هم خودم اضافه کردم.دیگه خودتون تطابق بدین و تغییرات کدها رو ببینید.

شاید یه جور دیگه هم میشد که مشکل شما حل بشه(با راهی بهتر و آسان تر) ولی خب این جور هم میشه.

<!doctype html>
<html dir="rtl">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    /* Start TopMenu */
.topmenu{
    background-color: #232a34;
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.1);
    height: 45px;
}
.topmenu ul{
    float: right;

}
.topmenu ul li{
    list-style: none;
    float:right;
    padding:8px 0px 0px 0px;
    transition: all 0.5s ease;
    margin-top:-10px;
    margin-right:   20px;
    

}

.topmenu ul li ul li{
    margin-right: -10px;

}

.topmenu ul li ul li ul{
    margin-right: 125px;

}



.topmenu ul li a{
    color:#fff;
    font-family:'BYekan';
    font-size:16px;


}
.topmenu ul li a:hover{
    color:#dbdbdb;
}
.topmenu ul ul {
    float: right;
    top:49px;
    display:none;
    width:0;
    position:absolute;
    padding:0 0;
    margin:0;
}
.topmenu ul li:hover > ul{
  display:block;
}

.topmenu li li a{
    float:right;
    padding:10px;
    text-align:center;
    width:125px;
    margin: 0;
    background-color: #232a34;
}
.topmenu li li a:hover {
    background-color: #6100FF;
    color:#FFFFFF;
}
.topmenu ul ul ul {
    display:none;
    position:absolute;
    padding: 0 30px;
}
    /* End TopMenu */
     
</style>
</head>
 
<body>
<!-- ( Start TopMenu ) -->
<div class="topmenu">
 <div class="middle">
  <ul>
  <li><a href="">صفحه نخست</a></li>
  <li><a href="">وبلاگ</a></li>
  <li><a href="">فروشگاه</a></li>
  <li><a href="">خدمات هاستینگ</a>
     <ul>
   <li><a href="#">آیتم زیرمجموعه یک</a></li>
   <li><a href="#">آیتم زیرمجموعه دو</a>
      <ul>
      <li><a href="#">آیتم زیرمجموعه یک</a></li>
      <li><a href="#">آیتم زیرمجموعه دو</a></li>
      <li><a href="#">آیتم زیرمجموعه سه</a></li>
      <li><a href="#">آیتم زیرمجموعه چهار</a></li>
      </ul>
   </li>
   </ul>
  </li>
  <li><a href="">قوانین</a></li>
  <li><a href="">امکانات</a>
   <ul>
   <li><a href="#">آیتم زیرمجموعه یک</a></li>
   <li><a href="#">آیتم زیرمجموعه دو</a>
      <ul>
      <li><a href="#">آیتم زیرمجموعه یک</a></li>
      <li><a href="#">آیتم زیرمجموعه دو</a></li>
      <li><a href="#">آیتم زیرمجموعه سه</a></li>
      <li><a href="#">آیتم زیرمجموعه چهار</a></li>
      </ul>
   </li>
   </ul>
  </li>
  <li><a href="">درباره ما</a></li>
  <li><a href="">تماس با ما</a></li>
  </ul>
 </div>
</div>
<!-- ( End TopMenu ) -->
 
</body>
 
</html>

پاسخ در 1395/01/08 توسط

احسان

پاسخ شما

برای ارسال پاسخ باید وارد سایت شوید

برای مشارکت در بحث لازم است ابتدا وارد حساب کاربری خود شوید.

ورود به سایت