مشکل در چینش لیست ها در css

goldmember · Jul 20, 2012

با سلام خدمت دوستان
من یه کد css واسه یه تگ نوشتم که اگه هرجا نام کلاسul برابر با hor بود اونوقت لیستهای طبقه زیریش رو بصورت افقی نشون بده و هرجا نام کلاس ul برابر با ver بود لسیت های زیرش رو عمودی نشون بده. و این کارو تا لیست های بی نهایت انجام بده. این کارو واسه ایجاد منو تا بی نهایت (افقی در عمودی یا عمودی در افقی و ... ) می خوام استفاده کنم.
کدی که خودم نوشتم در مرحله اول و دوم کار میکنه ولی تو مرحله سوم تو (لیست )قسمت M1.S2-H.ss2v که ul زیرش رو که نام کلاسش رو hor گذاشتم درست عمل نمیکنه و بصورت عمودی نشون میده.

در کل یکمی نامیزون کار میکنه.

لطفا ایرادشو بگین و بدجور توش گیر کردم. اگه ساختارش اشکال داره لطفا راهنماییم کنین. با تشکر

کد CSSی که خودم نوشتم :

.nav,.nav li,.nav ul{ margin:0; padding:0; list-style-type:none;}
.nav{position:relative;}

.nav li{float:left; background:#234;}

.nav li.hover,.nav li:hover{position:relative;}

.nav ul{visibility:hidden; position:absolute; background:#234;}

.ver {width:8em;}
.ver li{ float:none; display:block;}

.hor {width:auto;}
.hor li{ float:left; display:inline;}

.nav li:hover > ul{visibility:visible;}

.nav li.hover,.nav li:hover{position:static;}

.icon {width:20px; height:20px; }

----------------------------------------------------------------------------
تگ HTML :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link href="testcss.css" rel="stylesheet" />
</head>
<style>
body {
font-family: Calibri, "Trebuchet MS", sans-serif;
font-size: 100%;
}
.nav a{text-decoration:none; color:#eee; }
</style>
<body>
<ul class="nav">
<li><img class="icon" src="ico1.gif" /> <a href="#"> Main item 1</a>
<ul class="hor">
<li><a href="#">M_item1.Sub1-H</a></li>
<li><a href="#">M_item1.Sub2-H</a>
<ul class="ver">
<li><a href="#">M1.S2-H.ss1v</a></li>
<li><a href="#">M1.S2-H.ss2v</a>
<ul class="hor">
<li><a href="#">xxxxxxx-H1</a></li>
<li><a href="#">xxxxxxx-H2</a></li>
<li><a href="#">xxxxxxx-H3</a></li>
<li><a href="#">xxxxxxx-H4</a></li>
</ul>
</li>
<li><a href="#">M1.S2-H.ss3v</a></li>
<li><a href="#">M1.S2-H.ss4v</a></li>
</ul>
</li>
<li><a href="#">M_item1.Sub3-H</a></li>
<li><a href="#">M_item1.Sub4-H</a></li>
</ul>
</li>
<li><img class="icon" src="ico3.gif" /> <a href="#"> Main item 2</a>
<ul class="ver">
<li><a href="#">M_item2.Sub1-V</a></li>
<li><a href="#">M_item2.Sub2-V</a></li>
<li><a href="#">M_item2.Sub3-V</a></li>
<li><a href="#">M_item2.Sub4-V</a></li>
</ul>
</li>
<li><img class="icon" src="ico3.gif" /> <a href="#"> Main item 3</a>
<ul class="hor">
<li><a href="#">M_item3.Sub1-H</a></li>
<li><a href="#">M_item3.Sub2-H</a></li>
<li><a href="#">M_item3.Sub3-H</a></li>
<li><a href="#">M_item3.Sub4-H</a></li>
</ul>
</li>
<li><img class="icon" src="ico2.gif" /> <a href="#"> Main item 4</a>
<ul class="ver">
<li><a href="#">M_item4.Sub1-H</a></li>
<li><a href="#">M_item4.Sub2-H</a></li>
<li><a href="#">M_item4.Sub3-H</a></li>
<li><a href="#">M_item4.Sub4-H</a></li>
</ul>
</li>
</ul>
</body>
</html>