28-04-2012, 10:05
|
|
|
|
חבר מתאריך: 29.04.04
הודעות: 638
|
|
|
CSS אינני מצליח לבצע בחירה מתפריט נגלל
שלום,
הקוד שכתבתי מורכב מ 2 פריטי תפריט: menu1 ו menu2. מתחת לפריט השני menu2 מופיע תפריט נגלל בנגיעת עכבר.
הבעיה עם התפריט הנגלל היא שאי אפשר לבצע בחירה ממנו כי הוא מוצב "הרחק" מפריט האב שלו: menu2. אני צריך את התפריט הנגלל במקום בו הוצב
ולא נותר לי אלא לשאול: האם קיימת ב CSS דרך לבחירת פריט מתפריט נגלל "מרוחק"?
להלן הקוד:
קוד:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>to_sitepoint</title>
<style type="text/css">
html, body, div, ul
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#main
{
position:absolute;
width:950px;
height:30px;
left:50%;
margin-top:0px;
margin-left:-470px;
margin-right:auto;
border:2px solid #8c8b4b;
top:6%;
}
#main li
{
width:92px;
height:30px;
/*padding-top:-34%;*/
float:left;
list-style-type:none;
border:2px solid red;
}
#main li a{text-decoration:none;}
#main li ul li{width:400px;border:2px solid #8c8b4b; height:30px;}
li.menu1{background-image:url('images/men1.png');}
li.menu2{background-image:url('images/men1.png');}
.menu2 li a{color:white; font-weight:bold;}
li.menu2 ul
{
display:none;
}
li.menu2:hover ul
{
list-style:none;
display:block;
font-size:110%;
}
li.menu2:hover ul li {clear:left; }
ul li ul.rounded-corner
{
border:2px solid red;
height: 200px; width:776px;
background-image:url(../banner/bg_to_sitepoint.gif);
background-repeat:no-repeat;
margin-top:170%;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;
border-top-left-radius:50px;
border-top-right-radius:50px;
-moz-border-radius-bottomright:50px;
-moz-border-radius-bottomleft:50px;
-moz-border-radius-topleft:50px;
-moz-border-radius-topright:50px;
}
</style>
</head>
<body>
<ul id="main">
<li class="menu1"><a href="#">menu item1</a></li>
<li class="menu2">menu item2
<ul class="rounded-corner">
<li><a href="#">submenu2 item1</a></li>
<li><a href="#">submenu2 item2</a></li>
<li><a href="#">submenu2 item3</a></li>
</ul>
</li>
</ul>
</body>
</html>
כמו כן אני מצרף תמונת מסך של הדף.
אם למישהו תושיה במצב הזה, אודה לו מאוד !
|
ראשי
צ'אט
מצב כלאיים
