Help: Drop Down Menu

Hello I have a problem can someone pls. help me fix this.. My dropdown is always in the back of my embedded video.

here's the picture:




how will I able tofix this anyone? Thanks!

 

anyone? I really need to fix this..

 

Have you got a link to the page in question?

It might be that you can set that drop down's <a> element to have a large z-index, thus forcing it to the top, or conversely, setting a low zindex on the flash movie's containing div..

http://www.google.co.uk/search?q=z-index

 

Hello I'm not programmer can you help me where to put that code here..

<object id="BLOG_video-1a9986ea0a3afc69" class="BLOG_video_class" contentid="1a9986ea0a3afc69" width="583" height="229" ></object></div>

Thanks...

 

It's not programming, it's coding ;o)

Do you use dreamweaver? You need to figure out what CSS is used to create the drop down.

Can you post the link to that web page here?

 

hey thanks here's the css code...

#NavbarMenu {
background: #555 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);
width: 960px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/s1600/navhov.png);
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;


if I'm not mistaken it's the left navbar menu...


Thanks

 

Try this (not tested)

#nav li a {z-index:999; }

put that at the end of all the above.

 

Hello.. I tried it but it didn't work...

Thanks...

 

use the z-index:999 on the dropdown div and in the <embed stuff you want to change or add the wmode property

do a google search for wmode=transparency
You will fins the exact layout of how this is to be done, but i always run into this

Example:
<div style="z-index:999;">dropdown in here</div>
<object>
<param name="wmode" value="transparent">
<embed width="425" height="350" wmode="transparent">

 

Thanks the cookiemonn..

I tried this..

<object id="BLOG_video-1a9986ea0a3afc69" class="BLOG_video_class" contentid="1a9986ea0a3afc69" width="583" height="229">
<param name="wmode" value="transparent">
<embed width="425" height="350" wmode="transparent">
</embed>
</object></div>


but after I put that code and see if it's working I cant see the video anymore.. actually it's not an embedded code... I upload the video using blogger I wonder it it's the same way to put the code... Did I put it in the right position??

 

When we had problems with submenus, our submenu company told us to go to the style sheet and to add in the appropriate section: overflow: visible;

For example, our submenus are running from our masthead and so our style sheet has the following code:

In our case the overflow was hiding behind the content section.

Hope this helps.

 

jj1 thanks! mm I'm not a coder and I'm really confuse where to put that code.. I'm just using a template.. can you please tell me where exactly will I put that code?


here's my css code...

#navbar-iframe {
display: none !important;
}
body {
background: #111 url(http://4.bp.blogspot.com/_kMUpUqMmduA/SVU80wCpSdI/AAAAAAAAA5c/YvJiRzAcUOg/s1600/bg.png);
width: 980px;
color: #333;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0 auto 0;
padding: 0;
}
#wrap {
background: #EEE;
width: 960px;
margin: 10px auto 10px;
padding: 0;
position: relative;
border: 10px solid #333;
}
a, a:visited {
color: #A91B33;
text-decoration: none;
}
a:hover {
color: #A91B33;
text-decoration: underline;
}
a img {
border-width: 0;
}
#topnavbar {
background: #111 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU83AJh2SI/AAAAAAAAA60/cBmw4fQjzF8/s1600/topnav.png);
width: 960px;
height: 30px;
color: #FFF;
margin: 0;
padding: 0;
}
#topnavbar a, #topnavbar a:visited {
font-size: 11px;
font-weight: bold;
color: #FFF;
text-decoration: none;
}
#topnavbar a:hover {
text-decoration: underline;
}
#topnavbar p {
font-size: 11px;
font-weight: bold;
padding: 0;
margin: 0;
}
.topnavbarleft {
width: 230px;
float: left;
margin: 0;
padding: 8px 0 0 10px;
}
.topnavbarright {
width: 600px;
float: right;
margin: 0;
padding: 7px 10px 0 0;
text-transform: uppercase;
text-align: right;
}
.topnavbarright a img {
border: none;
margin: 0 3px 3px 0;
padding: 0;
}
#header {
background: #111 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU809IyVNI/AAAAAAAAA5k/7_DXEKzUD40/s1600/header.png);
width: 960px;
height: 100px;
color: #FFF;
font-size: 11px;
margin: 0;
padding: 0;
overflow: hidden;
}
#header-inner {
background-position: left;
background-repeat: no;
}
#header h1 {
color: #FFF;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 15px 0 0 20px;
text-decoration: none;
}
#header h1 a, #header h1 a:visited {
color: #FFF;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
#header h1 a:hover {
color: #FFF;
text-decoration: none;
}
#header h3 {
color: #A91B33;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0;
padding: 0;
}
#header p {
color: #FFF;
padding: 0 0 5px 20px;
margin: 0;
line-height: 20px;
}
.headerleft {
width: 460px;
float: left;
font-size: 14px;
margin: 0;
padding: 0;
}
.headerleft a img {
border: none;
margin: 0;
padding: 0;
}
.headerright {
width: 486px;
float: right;
margin: 0;
padding: 18px 0 0;
font-weight: bold;
}
.headerright a img {
border: 1px solid #FFF;
margin: 0 0 3px;
padding: 0;
}
#header .description {
color: #A91B33;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin-left: 25px;
padding: 0;
}
#NavbarMenu {
background: #555 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);
width: 960px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/s1600/navhov.png);
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;


}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE !important;
width: 220px;
color: #202020;
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 0;
padding: 4px 0 3px 5px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
}
#searchbutton {
background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU83AJh2SI/AAAAAAAAA60/cBmw4fQjzF8/s1600/topnav.png);
color: #FFF;
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#subscribe {
margin: 0;
padding: 5px 0 0;
overflow: hidden;
}
#subbox {
background: #EEE !important;
width: 200px;
color: #202020;
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#subbutton {
background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU83AJh2SI/AAAAAAAAA60/cBmw4fQjzF8/s1600/topnav.png);
color: #FFF;
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 0 0 7px;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#name, #email, #url {
background: #EEE !important;
width: 250px;
color: #202020;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#submit {
background: #7B7B7B;
color: #FFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#words {
background: #EEE;
width: 460px;
color: #202020;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#subnavbar {
background: #504A4B;
width: 960px;
height: 24px;
color: #FFF;
margin: 0;
padding: 0;
}
#subnav {
margin: 0;
padding: 0;
}
#subnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#subnav li {
list-style: none;
margin: 0;
padding: 0;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFF;
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li a:hover, #subnav li a:active {
background: #888;
color: #FFF;
display: block;
text-decoration: none;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #666;
width: 140px;
float: none;
margin: 0;
padding: 6px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #888;
margin: 0;
padding: 6px 10px;
}
#subnav li {
float: left;
padding: 0;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#subnav li ul a {
width: 140px;
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
#outer-wrapper {
width: 940px;
margin: 0 auto 0;
padding: 10px 0 0;
line-height: 18px;
}
#main-wrapper {
float: left;
width: 600px;
margin: 0;
padding: 0 0 20px;
}
#sidebar-wrapper {
float: right;
width: 320px;
margin: 0;
padding: 0 0 10px;
display: inline;
}
#midsidebar-wrapper {
width: 320px;
float: right;
overflow: hidden;
}
#lsidebar {
background: #FFF url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU816iWxaI/AAAAAAAAA6U/M4QXEEvacuM/s1600/leftsidebartop.gif) top no-repeat;
float: left;
width: 150px;
margin: 0;
padding: 10px 10px 0;
border: 1px solid #DDD;
display: inline;
}
#rsidebar {
background: #FFF url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82YM12GI/AAAAAAAAA6k/-mtGMiUJ6pE/s1600/rightsidebartop.gif) top no-repeat;
float: right;
width: 120px;
margin: 0;
padding: 10px 10px 0;
border: 1px solid #DDD;
display: inline;
}
h2.date-header {
margin: 1.5em 0 .5em;
display: none;
}
.post {
background: #FFF url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU81N7CTKI/AAAAAAAAA50/VjuFzYPFIzA/s1600/homepagetop.gif) top no-repeat;
float: left;
width: 590px;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #DDD;
}
.post h3 {
color: #444;
font-size: 22px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0 0 5px;
padding: 10px 0 0;
}
.post h3 a, #content h1 a:visited {
color: #444;
font-size: 22px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0 0 5px;
padding: 10px 0 0;
}
.post h3 a:hover {
color: #A91B33;
text-decoration: none;
}
.post-body {
margin: 0 0 .75em;
line-height: 1.6em;
}
.post-body blockquote {
line-height: 1.3em;
}
.comment-link {
margin-left: .6em;
}
.post img {
padding: 10px;
}
.post blockquote {
background: #E8E8E8;
margin: 0 25px 15px;
padding: 10px 20px 0 15px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.gapad {
background: #FFF url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU81N7CTKI/AAAAAAAAA50/VjuFzYPFIzA/s1600/homepagetop.gif) top no-repeat;
float: left;
width: 590px;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #DDD;
}
.comments {
background: #FFF url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU81N7CTKI/AAAAAAAAA50/VjuFzYPFIzA/s1600/homepagetop.gif) top no-repeat;
float: left;
width: 590px;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #DDD;
}
#comments h4 {
color: #A91B33;
font-size: 22px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0 0 20px;
padding: 10px 0 0;
}
#comments-block {
width: 580px;
float: left;
padding: 0;
margin: 0;
}
#comments-block .comment-author {
margin: .5em 0;
font-weight: bold;
}
#comments-block .comment-body {
margin: .25em 0 10px;
padding-left: 20px;
}
#comments-block .comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
text-transform: uppercase;
letter-spacing: .1em;
border: 1px solid #DDD;
}
#comments-block .comment-body p {
margin: 0 0 .75em;
}
.deleted-comment {
font-style: italic;
color: gray;
}
#blog-pager-newer-link {
float: left;
display:none;
}
#blog-pager-older-link {
float: right;
display:none;
}
#blog-pager {
text-align: center;
display:none;
}
.feed-links {
clear: both;
line-height: 2.5em;
display:none;
}
.sidebar {
color: #666;
line-height: 1.5em;
}
.sidebar h2, .rsidebar h2, .lsidebar h2 {
background: #333 url(http://4.bp.blogspot.com/_kMUpUqMmduA/SVU81KcgGkI/AAAAAAAAA5s/F42frbPwJ00/s1600/headline.png);
color: #FFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
text-transform: uppercase;
margin: 0 0 10px;
padding: 3px 0 3px 7px;
}
#sidebar p {
margin: 0;
padding: 0 0 0 45px;
}
#sidebar a img {
border: none;
margin: 0;
padding: 0;
}
.sidebar ul, .rsidebar ul, .lsidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidebar ul li, .rsidebar ul li, .lsidebar ul li {
background: #FFF url(http://4.bp.blogspot.com/_kMUpUqMmduA/SVU81WBL-vI/AAAAAAAAA58/8Bw6OazI-mc/s1600/icon.gif) no-repeat;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;
}
.sidebar .widget {
background: #FFF url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU_vsmsTCI/AAAAAAAAA7E/_GZxN8lX-mM/s1600/sidebartop.gif) top no-repeat;
float: left;
width: 300px;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #DDD;
}
.sidebar .widget, .main .widget {
margin: 0 0 1.5em;
padding: 0 0 1.5em;
}
.sidebar .widget {
background: #FFF url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU_vsmsTCI/AAAAAAAAA7E/_GZxN8lX-mM/s1600/sidebartop.gif) top no-repeat;
float: left;
width: 300px;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #DDD;
}
.main .Blog {
border-bottom-width: 0;
}
#footer {
width: 660px;
clear: both;
margin: 0 auto;
padding-top: 15px;
line-height: 1.6em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
}
#credits {
background: #93BBBC url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU83AJh2SI/AAAAAAAAA60/cBmw4fQjzF8/s1600/topnav.png);
width: 960px;
height: 30px;
margin: 0;
padding: 0;
text-align: center;
}
#credits p {
color: #FFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 9px 0 0;
}
#credits a, #footer a:visited {
color: #FFF;
text-decoration: none;
}
#credits a:hover {
color: #FFF;
text-decoration: underline;
}




Thanks very much!

 

I use Microsoft Expression which also produces templates for me. Expression gives me two style sheets - one called style.css in which I set the content, body , h tags and all the little style stuff and the other called layout which I don't normally change except for adding the overflow:visible for submenus. The layout.css I have is as follows

Hope this helps you.

 

I tried to put that code but it didn't work... =(