Chào mọi người!
Mình đang nghiên cứu để viết trang website cho cơ sở của mình.
Tuy nhiên, khi mình click vào cái menu động có cái đoạn mã css mình tải trên mạng về thì submenu nó hiện ra dưới mấy tấm hình slide của mình.
Mình muốn cái submenu hiện lên trên mấy tấm hình slide.
Mọi người vui lòng giúp mình khắc phục vấn đề trên.
Mình có hình đính kèm
Không luu được hình các bạn ạh
mediafire.com/view/t0yz1safxvpw9eg/SubMenuDuoiSlide.JPG
đây là đoạn code CSS mình copy trên mạng về và đưa vào menu của mình.
body {
background:#eee;
margin:0;
padding:0;
}
.example {
width:770px;
height:570px;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
#nav {
border-style: none;
border-color: inherit;
border-width: 10px;
display:inline-block;
width:150px;
margin:0px auto;
padding:0px;
background:#CA95FF;
/*some css3*/
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
color: #fbfbfb;
}
#nav li {
margin:1px;
float:none;
position:relative;
list-style:none;
}
#nav a {
font-weight:bold;
color:#fbfbfb;
text-decoration:none;
display:block;
padding:5px 10px 5px 10px;
border:10px; /*some css3*/
border:10px;
border:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}
/* selected menu element */
/* chinh mau chon doi tuong, mau chu menu chinh*/
#nav .current a, #nav li:hover > a {
background:#FFD8B0;
color:#fbfbfb;
border-top:1px solid #f8f8f8;
box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
box-shadow:0 2px 2px rgba(0,0,0, .7);
box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
left:100px;
}
/* sublevels */
/* chinh mau chon doi tuong, mau chu menu con*/
#nav ul li:hover a, #nav li:hover li a {
background:#FFD8B0;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#FFD8B0;
color:#fff;
border:10px; /*some css3*/
border:10px;
border:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}
#nav ul li:first-child > a {
border-topleft:10px; /*some css3*/
border-topright:10px;
border-top-left:10px;
border-top-right:10px;
}
#nav ul li:last-child > a {
border-bottomleft:10px; /*some css3*/
border-bottomright:10px;
border-bottom-left:10px;
border-bottom-right:10px;
}
/* drop down */
#nav li:hover > ul {
opacity:1;
visibility
isible;
left:120px;
top:0px;
}
/* mau nen menu con */
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#FFD8B0;
border:1px solid #7788aa;
border:10px; /*some css3*/
border:10px;
border:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
transition
pacity .25s linear, visibility .1s linear .1s;
transition
pacity .25s linear, visibility .1s linear .1s;
transition
pacity .25s linear, visibility .1s linear .1s;
transition
pacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}
Mình đang nghiên cứu để viết trang website cho cơ sở của mình.
Tuy nhiên, khi mình click vào cái menu động có cái đoạn mã css mình tải trên mạng về thì submenu nó hiện ra dưới mấy tấm hình slide của mình.
Mình muốn cái submenu hiện lên trên mấy tấm hình slide.
Mọi người vui lòng giúp mình khắc phục vấn đề trên.
Mình có hình đính kèm
Không luu được hình các bạn ạh
mediafire.com/view/t0yz1safxvpw9eg/SubMenuDuoiSlide.JPG
đây là đoạn code CSS mình copy trên mạng về và đưa vào menu của mình.
body {
background:#eee;
margin:0;
padding:0;
}
.example {
width:770px;
height:570px;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
#nav {
border-style: none;
border-color: inherit;
border-width: 10px;
display:inline-block;
width:150px;
margin:0px auto;
padding:0px;
background:#CA95FF;
/*some css3*/
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
color: #fbfbfb;
}
#nav li {
margin:1px;
float:none;
position:relative;
list-style:none;
}
#nav a {
font-weight:bold;
color:#fbfbfb;
text-decoration:none;
display:block;
padding:5px 10px 5px 10px;
border:10px; /*some css3*/
border:10px;
border:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}
/* selected menu element */
/* chinh mau chon doi tuong, mau chu menu chinh*/
#nav .current a, #nav li:hover > a {
background:#FFD8B0;
color:#fbfbfb;
border-top:1px solid #f8f8f8;
box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
box-shadow:0 2px 2px rgba(0,0,0, .7);
box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
left:100px;
}
/* sublevels */
/* chinh mau chon doi tuong, mau chu menu con*/
#nav ul li:hover a, #nav li:hover li a {
background:#FFD8B0;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#FFD8B0;
color:#fff;
border:10px; /*some css3*/
border:10px;
border:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}
#nav ul li:first-child > a {
border-topleft:10px; /*some css3*/
border-topright:10px;
border-top-left:10px;
border-top-right:10px;
}
#nav ul li:last-child > a {
border-bottomleft:10px; /*some css3*/
border-bottomright:10px;
border-bottom-left:10px;
border-bottom-right:10px;
}
/* drop down */
#nav li:hover > ul {
opacity:1;
visibility

left:120px;
top:0px;
}
/* mau nen menu con */
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#FFD8B0;
border:1px solid #7788aa;
border:10px; /*some css3*/
border:10px;
border:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
box-shadow:0 2px 2px rgba(0,0,0, .5);
transition
transition
transition
transition
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}
Sửa lần cuối: