by tsukasaz » 18/09/2013 11:00 am
CSS
Code: Select all
#sgmenu ul.menu:after {
clear: both;
content: "";
display: block;
}
#sgmenu ul.menu {
float: right;
}
#sgmenu ul li {
float: left;
margin: 0 10px 0 0;
position: relative;
}
#sgmenu ul.menu > li > a {
background-image: -moz-linear-gradient(center bottom , #D4D3D6 27%, #DFDDDF 64%, #ECEBEB 82%) no-repeat;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 1px #696969;
}
#sgmenu ul li ul {
position: absolute;
visibility: hidden;
}
#sgmenu ul li:hover ul {
position:absolute;
visibility: visible;
}
#sgmenu ul li ul li {
float: none;
}
#sgmenu ul li ul li a {
width: auto;
}
#sgmenu ul li ul {
background:#ffffff repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
position:absolute;
top:30px;
width:150px;
z-index:10;
}
#sgmenu ul.menu li ul li a,
#sgmenu ul.menu li ul li a:link,
#sgmenu ul.menu li ul li a:visited {
background: #fff;
}
#sgmenu ul.menu li ul li a span {
padding: 0 10px;
}
#sgmenu ul.menu li ul li a:hover span {
color: #000;
}
#sgmenu ul.menu li a,
#sgmenu ul.menu li a:link,
#sgmenu ul.menu li a:visited {
color: #343333;
cursor: pointer;
display: block;
float: left;
font-family:tahoma,TimesNew Roman;
font-size: 14px;
font-weight: 650;
height: 28px;
line-height: 28px;
margin: 0;
padding: 0 10px;
}
#sgmenu ul.menu > li > a:hover,
#sgmenu ul.menu > li.active > a {
background: none repeat scroll 0 0 #ecebeb;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 1px #696969;
}
.newshold {
height: 150px;
overflow: hidden;
position: absolute;
right: 4px;
top: 170px;
width: 670px;
}
.newshold h3 {
color: #FF7800;
font-family: Tahoma,Arial,sans-serif;
font-size: 11px;
margin: 0 0 10px 0;
}
.newshold p {
margin: 0 2px;
}
#sgmenu ul li ul {
left: 0;
margin: 0 !important;
position: absolute;
top: 30px;
}
#sgmenu ul li ul li {
clear: both;float: none;
}
.jicons-icons img {
float: left;
margin: 0 10px 0 0;
}
.contact-contactinfo p {
margin: 10px 0 0 0;
}
input.inputbox,
textarea.inputbox,
.input-small {
background: #ebebeb;
border: 1px solid #a3a3a3;
color: #000;
margin: 0 0 10px 0;
}
.cpathway {
background: url(../images/bread_bg.png) top left no-repeat;
color: #FBFBFB;
font-size: 11px;
height: 30px;
line-height: 30px;
margin: 0 auto 2px;
text-indent: 25px;
width: 980px;
}
.cpathway a {
color: #96C4E1;
}
.cpathway a:hover {
text-decoration: underline;
}
.item h2,
.item h3,
.item h4,
.items-leading h2 {
margin: 0;
}
.wrapcont {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
}
HTML
Code: Select all
<ul class="menu">
<li id="item-102" class="current active"><a href="/joomla/" ><span>หน้าหลัก</span></a></li>
<li id="item-103"><a href="/joomla/index.php/2013-09-05-09-19-10" ><span>โรงแรม</span></a></li>
<li id="item-106"><a href="/joomla/index.php/air-ticket" ><span>ตั๋วเครื่องบิน</span></a></li>
<li id="item-104" class="parent"><a href="/joomla/index.php/2013-09-05-09-21-44" ><span>ทัวร์ในประเทศ</span></a>
<ul><li id="item-120"><a href="/joomla/index.php/2013-09-05-09-21-44/north" ><span>ภาคเหนือ</span></a></li>
<li id="item-121"><a href="/joomla/index.php/2013-09-05-09-21-44/middle" ><span>ภาคกลาง</span></a></li>
<li id="item-122"><a href="/joomla/index.php/2013-09-05-09-21-44/east" ><span>ภาคตะวันออก</span></a></li>
<li id="item-123"><a href="/joomla/index.php/2013-09-05-09-21-44/south" ><span>ภาคใต้</span></a></li>
</ul>
</li>
<li id="item-105"><a href="/joomla/index.php/2013-09-05-09-22-46" ><span>ทัวร์ต่างประเทศ</span></a></li>
<li id="item-107"><a href="/joomla/index.php/private-tour" ><span>ทัวร์ส่วนตัว</span></a></li>
<li id="item-109"><a href="/joomla/index.php/summer-school" ><span>คอร์สเรียนภาษา</span></a></li>
<li id="item-108"><a href="/joomla/index.php/contact-us" ><span>ติดต่อเรา</span></a></li>
</ul>
- Attachments
-

- 18-9-2556 10-39-37.png (9.75 KiB) Viewed 1239 times
[b]CSS[/b]
[code]#sgmenu ul.menu:after {
clear: both;
content: "";
display: block;
}
#sgmenu ul.menu {
float: right;
}
#sgmenu ul li {
float: left;
margin: 0 10px 0 0;
position: relative;
}
#sgmenu ul.menu > li > a {
background-image: -moz-linear-gradient(center bottom , #D4D3D6 27%, #DFDDDF 64%, #ECEBEB 82%) no-repeat;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 1px #696969;
}
#sgmenu ul li ul {
position: absolute;
visibility: hidden;
}
#sgmenu ul li:hover ul {
position:absolute;
visibility: visible;
}
#sgmenu ul li ul li {
float: none;
}
#sgmenu ul li ul li a {
width: auto;
}
#sgmenu ul li ul {
background:#ffffff repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
position:absolute;
top:30px;
width:150px;
z-index:10;
}
#sgmenu ul.menu li ul li a,
#sgmenu ul.menu li ul li a:link,
#sgmenu ul.menu li ul li a:visited {
background: #fff;
}
#sgmenu ul.menu li ul li a span {
padding: 0 10px;
}
#sgmenu ul.menu li ul li a:hover span {
color: #000;
}
#sgmenu ul.menu li a,
#sgmenu ul.menu li a:link,
#sgmenu ul.menu li a:visited {
color: #343333;
cursor: pointer;
display: block;
float: left;
font-family:tahoma,TimesNew Roman;
font-size: 14px;
font-weight: 650;
height: 28px;
line-height: 28px;
margin: 0;
padding: 0 10px;
}
#sgmenu ul.menu > li > a:hover,
#sgmenu ul.menu > li.active > a {
background: none repeat scroll 0 0 #ecebeb;
border-radius: 5px 5px 5px 5px;
box-shadow: 3px 3px 1px #696969;
}
.newshold {
height: 150px;
overflow: hidden;
position: absolute;
right: 4px;
top: 170px;
width: 670px;
}
.newshold h3 {
color: #FF7800;
font-family: Tahoma,Arial,sans-serif;
font-size: 11px;
margin: 0 0 10px 0;
}
.newshold p {
margin: 0 2px;
}
#sgmenu ul li ul {
left: 0;
margin: 0 !important;
position: absolute;
top: 30px;
}
#sgmenu ul li ul li {
clear: both;float: none;
}
.jicons-icons img {
float: left;
margin: 0 10px 0 0;
}
.contact-contactinfo p {
margin: 10px 0 0 0;
}
input.inputbox,
textarea.inputbox,
.input-small {
background: #ebebeb;
border: 1px solid #a3a3a3;
color: #000;
margin: 0 0 10px 0;
}
.cpathway {
background: url(../images/bread_bg.png) top left no-repeat;
color: #FBFBFB;
font-size: 11px;
height: 30px;
line-height: 30px;
margin: 0 auto 2px;
text-indent: 25px;
width: 980px;
}
.cpathway a {
color: #96C4E1;
}
.cpathway a:hover {
text-decoration: underline;
}
.item h2,
.item h3,
.item h4,
.items-leading h2 {
margin: 0;
}
.wrapcont {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
}[/code]
[b]HTML[/b]
[code]<ul class="menu">
<li id="item-102" class="current active"><a href="/joomla/" ><span>หน้าหลัก</span></a></li>
<li id="item-103"><a href="/joomla/index.php/2013-09-05-09-19-10" ><span>โรงแรม</span></a></li>
<li id="item-106"><a href="/joomla/index.php/air-ticket" ><span>ตั๋วเครื่องบิน</span></a></li>
<li id="item-104" class="parent"><a href="/joomla/index.php/2013-09-05-09-21-44" ><span>ทัวร์ในประเทศ</span></a>
<ul><li id="item-120"><a href="/joomla/index.php/2013-09-05-09-21-44/north" ><span>ภาคเหนือ</span></a></li>
<li id="item-121"><a href="/joomla/index.php/2013-09-05-09-21-44/middle" ><span>ภาคกลาง</span></a></li>
<li id="item-122"><a href="/joomla/index.php/2013-09-05-09-21-44/east" ><span>ภาคตะวันออก</span></a></li>
<li id="item-123"><a href="/joomla/index.php/2013-09-05-09-21-44/south" ><span>ภาคใต้</span></a></li>
</ul>
</li>
<li id="item-105"><a href="/joomla/index.php/2013-09-05-09-22-46" ><span>ทัวร์ต่างประเทศ</span></a></li>
<li id="item-107"><a href="/joomla/index.php/private-tour" ><span>ทัวร์ส่วนตัว</span></a></li>
<li id="item-109"><a href="/joomla/index.php/summer-school" ><span>คอร์สเรียนภาษา</span></a></li>
<li id="item-108"><a href="/joomla/index.php/contact-us" ><span>ติดต่อเรา</span></a></li>
</ul>[/code]