Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ช่วยหน่อยครับ มีปัญหา menu dropdown เมนูเลื่อนลงมาแต่ไปอยู่หลังสไลรูป

ช่วยหน่อยครับ มีปัญหา menu dropdown เมนูเลื่อนลงมาแต่ไปอยู่หลังสไลรูป

เริ่มหัวข้อใหม่

akasaki

โพสกระทู้ ( 93 )
บทความ ( 0 )

นี่โค๊ด css ครับ

/**
*********************************************
* Prototype of styles for horizontal CSS-menu
* @data 30.06.2009
*********************************************
* (X)HTML-scheme:
* <div id="menu">
* <ul class="menu">
* <li><a href="#" class="parent"><span>level 1</span></a>
* <div><ul>
* <li><a href="#" class="parent"><span>level 2</span></a>
* <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
* </li>
* </ul></div>
* </li>
* <li class="last"><a href="#"><span>level 1</span></a></li>
* </ul>
* </div>
*********************************************
*/

/* menu::base */
div#menu {
height: 52px;
padding-left: 6px;
background: url(images/left.png) no-repeat;
_background: url(images/left.gif) no-repeat;
width:auto;
}

div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
div#menu ul.menu {
padding-right: 6px;
background: url(images/right.png) no-repeat right 0;
_background: url(images/right.gif) no-repeat right 0;
}

div#menu li {
position: relative;
margin: 0;
padding: 0 0px 0 0;
display: block;
float: left;
z-index: 9;
width: auto;
}
div#menu ul ul li {
z-index: 9;
}
div#menu li div {
list-style: none;
float: left;
position: absolute;
z-index: 11;
top: 52px;
left: 0;
visibility: hidden;
width: 180px;
margin: 0px 0 0 -4px;
padding: 0;
background: url(images/subsubmenu-top.png) no-repeat 0px 0;
_background: url(images/subsubmenu-top.gif) no-repeat 0px 0;
}
div#menu ul ul {
z-index: 12;
padding: 0px 4px 10px 4px;
background: url(images/submenu-bottom.png) no-repeat 0px bottom;
_background: url(images/submenu-bottom.gif) no-repeat 0px bottom;
margin: 10px 0 0 0;
}
div#menu li:hover>div {
visibility: visible;
}

div#menu a {
position: relative;
z-index: 10;
height: 50px;
display: block;
float: left;
line-height: 50px;
text-decoration: none;
margin-top: 1px;
white-space: nowrap;
width: auto;
padding-right:5px;
text-align:center;
}
div#menu span {
margin-top: 2px;
padding-left: 15px;
color: #fff;
font: normal 13px Helvetica,Arial,FreeSans,sans-serif;
background: none;
line-height: 50px;
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
text-align: center;
}

/* menu::level1 */
div#menu a {
padding: 0 10px 0 0;
line-height: 50px;
height: 52px;
margin-right: 5px;
_margin-right: 1px;
background: none;
text-transform: uppercase;
}
div#menu a:hover {
background: url(images/selected-right-sub.png) no-repeat right -1px;
}
div#menu a:hover span {
background: url(images/selected-left-sub.png) no-repeat 0 -3px;
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
background: url(images/selected-right-sub.png) no-repeat right -1px;
}
div#menu li.current a span,
div#menu ul.menu>li:hover>a span {
background: url(images/selected-left-sub.png) no-repeat 0 -3px;
}

div#menu ul.menu>li:hover>a span {
color: #07b3e1;
}
div#menu li { }
div#menu li.last { background: none; }

/* menu::level2 */
div#menu ul ul li {
background: none;
padding: 0;
}
div#menu ul ul a {
padding: 0px;
height: auto;
float: none;
display: block;
line-height: 25px;
font-size: 13px;
color: #fff;
z-index: -1;
padding-left: 5px;
white-space: normal;
width: 157px;
margin: 0 8px;
text-transform: none;
}

div#menu ul ul a span {
padding: 0 5px;
line-height: 25px;
font-size: 13px;
}
div#menu li.current ul a,
div#menu li.current ul a span {
background:none;
}
div#menu ul ul a:hover {
background:none;
background-color: #3c3c3c;
}
div#menu ul ul a:hover span {
background:none;
color: #07b3e1;
}
div#menu ul ul a.parent {
background: url(images/submenu-pointer.png) no-repeat right bottom;
_background-image: url(images/submenu-pointer-hover.gif);
}
div#menu ul ul a.parent span {
background:none;
}
div#menu ul ul a.parent:hover {
background: url(images/submenu-pointer.png) no-repeat right bottom;
_background: url(images/submenu-pointer-hover.gif) no-repeat right bottom;
background-color: #3c3c3c;
}
div#menu ul ul a.parent:hover span {
background:none;
}
div#menu ul ul span {

margin-top: 0;
text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
width: 100%;
}

/* menu::level3 */
div#menu ul ul div {
width: 180px;
padding: 0;
margin: -62px 0 0 165px !important;
}
div#menu ul ul ul {
padding: 10px 4px 0 4px;
}
div#menu ul ul div li {
position:relative;
top:-10px;
}

/* lava lamp */
div#menu li.back {
background: url(images/selected-left-sub.png) no-repeat 0 0;
width: 5px;
height: 52px;
z-index: 8;
position: absolute;
padding: 0;
margin: 0px 0 0 0;
}

div#menu li.back .left {
padding:0;
width:auto;
background: url(images/selected-right-sub.png) no-repeat right 0;
height: 52px;
margin: 0 0 0 5px;
float: none;
position: relative;
top: 0;
left: 0;
visibility: visible;
}

ช้วยดูให้ที่ครับ ถ้าต้องการดูตรงไหนเพิ่มเติม บอกได้เลยครับ

Tag : PHP, HTML/CSS, CakePHP

Date : 2011-02-15 20:20:39

By : fujisawa10

View : 1408

Reply : 1

No. 1

akasaki

โพสกระทู้ ( 93 )
บทความ ( 0 )

ลืมบอกครับ ถ้าเปลี่ยนเป็น ie7 จะใช้ได้ครับ แต่ตัวหนังสือจะใหญ่ขึ้น ทำให้ล้นกรอบ และmotion smooth ขึ้น

เปลี่ยนแล้วใช้ได้

Date : 2011-02-15 20:27:08

By : fujisawa10

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ช่วยหน่อยครับ มีปัญหา menu dropdown เมนูเลื่อนลงมาแต่ไปอยู่หลังสไลรูป

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00

Registered : 109,037

document.write("<font color=996600>[PHP]</font>"); ช่วยหน่อยครับ มีปัญหา menu dropdown เมนูเลื่อนลงมาแต่ไปอยู่หลังสไลรูป

No. 1

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice

ช่วยหน่อยครับ มีปัญหา menu dropdown เมนูเลื่อนลงมาแต่ไปอยู่หลังสไลรูป