The drop-down menu is getting covered by the flash video

I'm currently facing an issue with a flash video and a dropdown menu on my website. The menu keeps appearing behind the video, and I'm unsure of how to prevent this overlap.

I have attempted using wmode="transparent" but it hasn't solved the problem.

You can view the site here.

flash code@
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','283','height','200','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=img/AStarlogointernet&autoPlay=false&autoRewind=false','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' ); //end AC code
          </script>
            <noscript>
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="283" height="200" id="FLVPlayer">
                <param name="movie" value="FLVPlayer_Progressive.swf" />
                <param name="salign" value="lt" />
                <param name="wmode" value="transparent">   
                <param name="quality" value="high" />
                <param name="scale" value="noscale" />
                <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=img/AStarlogointernet&autoPlay=false&autoRewind=false" />
                <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=img/AStarlogointernet&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="283" height="200" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" />                        
            </object>
            </noscript>
htmlcssflash

Answer №1

Remember to always include the z-index property for "ul.subnav", and also make sure to add "wmode=transparent" as well.

    ul.topnav li ul.subnav {
    background: none repeat scroll 0 0 #333333;
    border: 1px solid #111111;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none;
    float: left;
    left: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 35px;
    width: 170px;
    z-index: 1000;
}

Answer №2

For proper functionality, ensure that the CSS selector <ul.topnav li ul.subnav
has a z-index: 1; property set.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the functionality of multiple index pages in angularjs

I am trying to access the localhost:3000/admin which is located in my views. The index.html and admin.html are two separate base files, one for users and the other for the admin dashboard respectively. Here is a snippet from my app.routes.js file: angul ...

javascripthtmlangularjsangular-routing

Retrieve the username from one table and insert it into a different table

Learning PHP has been quite a challenge for me today. I've been trying to pull information from a user's database into a file and then use it in a form to insert into another table. My issue is with getting the user's ID and username. I suc ...

phphtmlmysql

Personalizing the share button by changing the icon font to an image

I've been working on incorporating this share button into my website.... Although it functions properly as is, I want to switch out the icon font for an image. I attempted to modify certain CSS properties, but encountered some issues. http://jsfidd ...

jqueryhtmlcss

Tips on customizing the appearance of React rendering components

<div> <h3>{this.props.product.name}</h3> <h3>{this.props.product.code}</h3> {this.renderColors()} <article> <div da ...

javascripthtmlcssreactjs

The appearance of the page varies between Ubuntu and Windows 7 when viewed on Firefox 31

This situation is completely new to me: The page I designed appears differently on Firefox 31 in Ubuntu (correct): compared to Windows 7 (wrong): I was able to replicate this issue on another Windows 7 machine using FF 31. My HTML and CSS both validate w ...

htmlcss

Personalizing the arrow positioning of the Angular8 date picker (both top and bottom arrow)

I am interested in enhancing the design of the Angular 8 date picker by adding top and bottom arrows instead of the default left and right arrows. Can someone guide me on how to customize it? Check out the Angular 8 date picker here ...

javascripthtmlcssangular

Implementing checkboxes before the label text using jQuery

Below is the code for a function I am working on: addCheckbox: function (name, parent, value, text) { var div = jQuery("#" + parent); var input = jQuery(document.createElement('input')).attr({ id: "cbid_" + value, name: n ...

jqueryhtmlcheckbox

Looping through PHP code that generates the same ID twice in a random order

I am currently working on developing a memory game and have encountered an issue. I need to loop through all the images with unique ids (2x id1, 2x id2, 2x id3, etc.) and assign random ids to each image. Here is the PHP code snippet: class Kaart { pu ...

phphtml

Issue with Bootstrap 4 Navbar collapsing and not expanding again

Help needed! My navigation bar collapses when the window is resized, but clicking on the hamburger icon does not open it back up. I have included my code below. Can someone please provide guidance on how to expand the collapsed navbar? <html lang=&quo ...

javascripthtmlcssbootstrap-4

What's the reasoning behind incorporating a superscript esf in the Zap Chance typeface?

I'm working with a sample HTML file that includes the Zap Chance font. <!DOCTYPE html> <html> <head> <style> @font-face { font-family: myFirstFont; src: ...

htmlcssfontsfont-facetruetype

The Bootstrap columns are outside the container and are positioned closely together with no gaps between them

Why are my columns overriding the container-fluid padding? And why is there no space between these columns? .. I have attached an image showing the issue. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="styl ...

htmlbootstrap-4

If an input type="file" is empty, then $this->form_validation->run() will return false

Whenever I make changes to my settings and leave the input type="file" empty, $this->form_validation->run() consistently returns false. Surprisingly, I haven't utilized setrules or required it. Below is the snippet of my code: public function ...

phpjquerycsshtmlcodeigniter

What is the best way to arrange elements and create a cohesive layout?

I am currently working on a website and facing challenges in grasping the concept of alignment using CSS. I am struggling to align both text and image horizontally, ensuring they fit properly within the screen dimensions. Despite my attempts to modify diff ...

javascripthtmlcss

Collapsing borders in JavaFX 8

Hey there! I'm having a little issue with JavaFX 8 components. I'm trying to make them sit next to each other with borders, but it's not quite working out. Is there a way to make them blend together and share one border? import javafx.geome ...

javacssuser-interfacejavafx

Is it possible to create a unit test for a JavaScript function that manipulates an HTML element?

I'm struggling with testing a function that includes a modal displayer like this: function modaldisplayer(){ $('.mymodal').modal('show'); return 'success'; } In my code, there is another function called 'foo&a ...

javascripthtmlunit-testingjestjsmocha.js

What measures can be taken to restrict users from inputting decimal values?

My website includes an order page where users can input quantities for various items. While some items allow for decimal quantities, others do not. What is the most effective method to restrict users from entering decimal quantities? (Besides using an ale ...

javascripthtmldecimal

Transferring Data from Python Script to Browser (with an xserver running on a Linux system)

Looking for suggestions on how to efficiently transfer data from a Python script to a web browser. The Python script, as well as the browser, are operating under an xServer environment in Linux (specifically Raspbian on Raspberry Pi). The script is respon ...

javascriptpythonlinuxhtmlxserver

Ways to access a field value in SAPUI5

As I delve into OPENUI5/SAPUI5, I'm faced with the task of accessing data for the controls I've implemented. For instance: <Label text="Amount" /> <Input id="inputAmount" value="{Amount}" /> <Text id="lblCurrency" text="USD" > ...

javascripthtmlmodelsapui5

Difficulty with navigation on Chrome for Android (also impacting Bootstrap's website and all other sites utilizing Bootstrap design)

While working on creating a responsive website using Bootstrap, I encountered an unusual issue with navigation specifically in Chrome on Android. After some investigation, I found that the same problem exists on Bootstrap's own website. To see the i ...

jqueryhtmlcssgoogle-chrometwitter-bootstrap

Tips for saving an image file using the source I've generated from my drawing on an HTML 5 canvas

Recently, I utilized HTML 5 canvas to draw an image using JavaScript. After completing the drawing, I needed to save the canvas on my hard disk. To accomplish this, I followed a method to obtain the image source: var img = canvas.toDataURL(); Subsequentl ...

phpjavascriptimagehtmlhtml5-canvas