Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,374

HOME > PHP > PHP Forum > สอบถามเรื่อง dropdown css ผมพึ่งหัดเขียนเว็ปไม่เข้าใจว่าเกิดปัญหาจากตรงไหน



 

สอบถามเรื่อง dropdown css ผมพึ่งหัดเขียนเว็ปไม่เข้าใจว่าเกิดปัญหาจากตรงไหน

 



Topic : 135410



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



สถานะออฟไลน์




Code (PHP)
<div class="navbar">

        <ul>
            <li><a class="Z" href="#home">Home</a></li>

            <div class="drop" style="float: left;">
                <li><a href="">news</a></li>
                <div class="dropdown">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div>

            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>




            <li style="float: right;"><a href="">Log in</a></li>
        </ul>

    </div>


ไฟล์cssCode (PHP)
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width: 100%;
}

.navbar li {
    float: left;
}

.navbar li a,
.drop {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover:not(.Z) {
    background-color: #111;
}

.Z {
    background-color: #4CAF50;
}

.drop {
    position: relative;
    display: inline-block;
}

.dropdown {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.btn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown a:hover {
    background-color: #f1f1f1;
}

.drop:hover .dropdown {
    display: block;
}

.drop:hover .btn {
    background-color: #3e8e41;
}


มันแสดงแบบนี้เกิดจากตรงส่วนไหนครับ
้ะ้ะ้ะ้้



Tag : PHP, CSS







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2020-07-23 02:03:34 By : Crown12345 View : 45 Reply : 3
 

 

No. 1



โพสกระทู้ ( 8,583 )
บทความ ( 2 )



สถานะออฟไลน์


มันต้องมี javascript มาควบคุมด้วย ใช้งานร่วมกับ event mouse เพื่อซ่อน/แสดง object ตามเหตุการณ์
ถ้าเขียนเอง ต้องคำนึงถีงว่า อะไรแสดงก่อน อะไรยังไม่แสดง
อะไรยังไม่แสดง ก็ซ่อนมันไปก่อน แล้วใช้ javascript ในการแสดงผลเมื่อมี mouse มา over หรือ click

ถ้าใช้ boostrap javascript framework เขามี css + javascript ให้แล้ว แค่ว่าง class ใน object ให้ถุกต้อง

ส่วนการวาง tag ต้องเข้าใจ ไวยกรณ์ของมันด้วย

tag ul li มันต้องมี รุปแบบยังไง มันควรจะมี tag อะไรเข้ามาแทรกระหว่างมันไหม
Code (XML)
<ul>
	<li><a class="Z" href="#home">Home</a>
		<div class="drop" style="float: left;">
			<ul>
			<li><a href="">news</a>
				<div class="dropdown">
					<a href="#">Link 1</a>
					<a href="#">Link 2</a>
					<a href="#">Link 3</a>
				</div>
			</li>
			</ul>
		</div>
	</li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
	<li style="float: right;"><a href="">Log in</a></li>
</ul>









ประวัติการแก้ไข
2020-07-23 03:52:55
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-07-23 03:46:46 By : Chaidhanan
 


 

No. 2



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



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2020-07-23 03:46:46
รายละเอียดของการตอบ ::
Bootstrap ใช้แล้วทำเสร็จไป1 งาน แต่ผมอย่างลองทำงานใหม่โดยเริ่มจากสิ่งที่ไม่ถนัดเลย อยากศึกษาการทำงานหลายๆภาษา

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-07-23 11:46:13 By : Crown12345
 

 

No. 3



โพสกระทู้ ( 8,583 )
บทความ ( 2 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 2 เขียนโดย : Crown12345 เมื่อวันที่ 2020-07-23 11:46:13
รายละเอียดของการตอบ ::
เก่งมากเลย ทำเสร็จไปหนึ่งงาน แต่ยังไม่เข้าใจ tag html อีกหนอ
555555 เรียกว่าตัดแปะ เก่งมากเลย ขนาดไม่เข้าใจโครงสร้างไวยกรณ์ของ html นะเนีย ยังทำเสร็จไปแล้ว 1 งาน

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-07-23 12:13:18 By : Chaidhanan
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามเรื่อง dropdown css ผมพึ่งหัดเขียนเว็ปไม่เข้าใจว่าเกิดปัญหาจากตรงไหน
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , รับทำบัญชี , โรงงานผลิตครีม , สำนักงานบัญชี , รับจดทะเบียนบริษัท , Pangpond , รถมือสอง

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2020 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่