0
مشگل اساسی در طراحی منوی سایت
سلام
یک منوی سایت طراحی کردم که به صورت آبشاری دارای زیر منوهایی هست !
مشگلی که چند روزه منو درگیر خودش کرده درست قرار نگرفتن زیر منوهاا زیر منوی مادرشون هست !
کد رو قرار میدم لطفا دوستان مشگل و خطای بنده رو اعلام کنند !
واقعا چند روزه درگیر این هستم !
<!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>
عیدتون مبارک !
موفق باشید
درپناه حق تعالی
1 پاسخ
0
سلام
بفرمایید
یه مقدار توی کد های 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>