sahel65
شنبه 07 شهریور 1394, 07:54 صبح
سلام دوستان گلم؛
یه منوی دو سطحی ایجاد کردم (البته برای اینکه راه بیفتم و همینجوری درستش کردم)؛ میخواستم نظرتون رو بدین که آیا درست کار کردم یا خیر؟؟
فقط یه سوال هم داشتم:
موردی که یه خورده اذیتم میکنه و باعث شد که به دلم نشینه اینه که؛ زمانی که شما میری روی گزینه آخر (یعنی نرم افزار) خط افقی بالای همین آیتم، یه خورده میاد بالا، که بخاطر margin-top منفیی هست که مجبور شدم بذارم تا خود متن در آیتم آخرم جابجا نشه.
امکانش هست این مورد رو بگید چجوری درستش کنم؟؟
کدهای css:
*{
margin:0;
padding:0;
}
body{
color:black;
padding:20px;
}
#wrapper{
width:960px;
padding:50px;
margin:0 auto;
height:100px;
}
ul#menu{
float:right;
list-style:none;
display:block;
}
ul#menu li{
width:90px;
float:right;
position:relative;
}
ul#menu li ul{
visibility:hidden;
position:absolute;
}
ul#menu li:hover>ul{
visibility:visible;
top:100%;
right:0;
}
ul#menu li ul li:first-child a{
border-top:none;
}
ul#menu li ul li:last-child a{
border-top:none;
}
ul#menu li ul li:last-child a:hover{
border-top:1px solid black;
margin-top:-1px;
}
ul#menu li a{
text-decoration:none;
line-height:50px;
display:block;
text-align:center;
padding-right:5px;
border:1px solid black;
}
ul#menu>li>a{
border-left:none;
}
ul#menu li:last-child a{
border-left:1px solid black;
}
ul#menu li a:hover{
background-color:#CCCCCC;
}
/***************** for sub menu for items **********************/
#first_level li{
height:50px;
list-style:none;
text-align:center;
}
#first_level li a{
text-decoration:none;
}
ul#second_level li{
right:200px;
top:-50px;
right:89px;
}
ul#second_level li:first-child{
border-top:1px solid black;
}
</style>
کدهای Html :
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#">علوم انسانی</a></li>
<li><a href="#">کامپیوتر</a>
<ul id="first_level">
<li><a href="#">سخت افزار </a></li>
<li><a href="#">هوش مصنوعی</a></li>
<li><a href="#">نرم افزار</a>
<ul id="second_level">
<li><a href="#">مهندسی IT </a></li>
<li><a href="#">طراحی وب</a></li>
<li><a href="#">امنیت داده</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">ریاضیات</a></li>
</ul>
</div>
</body>
نتیجه اجرای کدها بصورت live (http://jsfiddle.net/ewp6370s/1/)و برای راحتی شما.
یه منوی دو سطحی ایجاد کردم (البته برای اینکه راه بیفتم و همینجوری درستش کردم)؛ میخواستم نظرتون رو بدین که آیا درست کار کردم یا خیر؟؟
فقط یه سوال هم داشتم:
موردی که یه خورده اذیتم میکنه و باعث شد که به دلم نشینه اینه که؛ زمانی که شما میری روی گزینه آخر (یعنی نرم افزار) خط افقی بالای همین آیتم، یه خورده میاد بالا، که بخاطر margin-top منفیی هست که مجبور شدم بذارم تا خود متن در آیتم آخرم جابجا نشه.
امکانش هست این مورد رو بگید چجوری درستش کنم؟؟
کدهای css:
*{
margin:0;
padding:0;
}
body{
color:black;
padding:20px;
}
#wrapper{
width:960px;
padding:50px;
margin:0 auto;
height:100px;
}
ul#menu{
float:right;
list-style:none;
display:block;
}
ul#menu li{
width:90px;
float:right;
position:relative;
}
ul#menu li ul{
visibility:hidden;
position:absolute;
}
ul#menu li:hover>ul{
visibility:visible;
top:100%;
right:0;
}
ul#menu li ul li:first-child a{
border-top:none;
}
ul#menu li ul li:last-child a{
border-top:none;
}
ul#menu li ul li:last-child a:hover{
border-top:1px solid black;
margin-top:-1px;
}
ul#menu li a{
text-decoration:none;
line-height:50px;
display:block;
text-align:center;
padding-right:5px;
border:1px solid black;
}
ul#menu>li>a{
border-left:none;
}
ul#menu li:last-child a{
border-left:1px solid black;
}
ul#menu li a:hover{
background-color:#CCCCCC;
}
/***************** for sub menu for items **********************/
#first_level li{
height:50px;
list-style:none;
text-align:center;
}
#first_level li a{
text-decoration:none;
}
ul#second_level li{
right:200px;
top:-50px;
right:89px;
}
ul#second_level li:first-child{
border-top:1px solid black;
}
</style>
کدهای Html :
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#">علوم انسانی</a></li>
<li><a href="#">کامپیوتر</a>
<ul id="first_level">
<li><a href="#">سخت افزار </a></li>
<li><a href="#">هوش مصنوعی</a></li>
<li><a href="#">نرم افزار</a>
<ul id="second_level">
<li><a href="#">مهندسی IT </a></li>
<li><a href="#">طراحی وب</a></li>
<li><a href="#">امنیت داده</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">ریاضیات</a></li>
</ul>
</div>
</body>
نتیجه اجرای کدها بصورت live (http://jsfiddle.net/ewp6370s/1/)و برای راحتی شما.