Drop-down menu CSS disappears too quickly

Hello

This may sound like a picky question, but my customer asked if I could do something.  In any case, I made a menu CSS dropdown on the following site: http://www.southernprairierailway.com/

There is decline in the bottom under the tabs 'About', 'All' on board and «Ogema heritage...» ».  You should notice that if you hover over the menu and move your mouse down too fast, the menu disappears.  Is there anything I can do about it?

Thank you!

The subnav closes too quickly because you have a small space between the top-level link and the

    submenu so the mouse detects his flakes subnav and firm.

    Change the top to 38px position on the "selector css navbar ul ul (as shown below):"

    #navbar ul ul {}

    position: absolute;

    visibility: hidden;

    top: 38px;

    }

Tags: Dreamweaver

Similar Questions

  • Drop-down menu CSS will not appear on Flash video in IE8

    I have a simple CSS menu that refuses to appear on a Flash video embedded in IE8. It works perfectly in Firefox well. I tried several different fixes, but nothing seems to work. The view is www.slattenstudios.com. Any help would be greatly appreciated.

    Add one wmode as another and that should take care of it:

    Window mode (wmode) - what is it for?
    There are three modes of window.
    Window
    Opaque
    Transparent
    By default, Flash Player gets its own hWnd in Windows. This means that the Flash animation actually exist in an instance of display in Windows who lives above the basic browser display window. So if it seems to be in the window of the browser, technically, it's not. It is more efficient for Flash in this way to draw and it is faster and more efficient rendering mode. However, it is drawing regardless of the browser HTML rendering surface. This is why this default mode (which equals wmode = "window") does not good composition with DHTML layers. That is why your drop-down JavaScript menus happen behind your Flash animation.
    (As opaque) window mode, Flash Player is not an hWnd. This means that the browser tells the Flash Player, when and where to draw on the surface of the own browser rendering. The Flash animation is no longer are made at a higher level if you want to. It's right there in the page with the rest of the elements on the page. Flash buffer is simply drawn in the rectangle of the said browser, with any scene space Flash not occupied by objects with the background color of the movie no matter what.

    in the object and

    wmode = "opaque".

    in the embed

    Best wishes

    Adninjastrator

  • Using UL in IE6 drop down menu CSS

    I have a site located at http://www.jasperwinery.com/new/index4.php.

    When viewing in IE there is a purple border around my boxes for navigation that appears in Internet Explorer. I disabled all the padding around there. I don't know what is the cause, and it throws out of my position just enough to bring down to the next line. I have included the CSS in the head of this page to make it easy to examine. Of course, I would be grateful if someone could identify for me what causes these borders and how I can get rid of them. I even made a style inline to the width of the li that is identical to the image I have in it.

    TIA

    border = 0 around your images.

    'Net Image' wrote in message
    News:gef31d$lag$1@forums. Macromedia.com...
    > I have a site located at http://www.jasperwinery.com/new/index4.php.
    >
    > When viewing in IE there is a purple border around my boxes for the
    > navigation
    > which appears in Internet Explorer. I disabled all the padding around there. I don't
    > soaps
    > what is the cause and it throws out of my position just enough to
    > make
    > fall to the next line. I have included the CSS in the head of this page for
    > make
    > easy to examine. Of course, I'd appreciate it if someone could find it for me
    > what
    > causes these borders and how I can get rid of them. I have even made a online
    > style
    > make the width of the li that is identical to the image I have here.
    >
    > TIA
    >

  • When exporting my image in LR I select my brand of water in the drop-down list. Then I need to select 'Edit watermark' since the same drop-down menu in order to replace it. When I do that and click 'done' the watermark disappears in the export me

    When exporting my image in LR I select my brand of water in the drop-down list. Then I need to select 'Edit watermark' since the same drop-down menu in order to replace it. When I do that and click 'done' the watermark disappears in the box menu to export. When I click on "Export" the image exports WITHOUT my watermark. Help, please. As I did about everything that has been suggested in this forum and I still have this problem.

    I saw that too. For now, the workaround is that if you select 'Edit watermark,' when you are done editing be sure to reselect the same watermark. If you do not, the watermark menu will be empty.

    It seems to be a known bug that occurs only in the current version. If all goes well, it can be fixed in the next update. There is a page for her on the Photoshop/Lightroom Feedback site. I've added my vote to the page:

    LIGHTROOM CC - watermark on the question of export

  • using Firefox 11.0 when trying to 'bookmark this page' in the bookmarks drop-down menu at the top of the browser bookmark pop-up window, but it disappears when I move my mouse to the bookmark window

    using Firefox 11.0 on Windows 7 prof 64 bit, when trying to 'bookmark this page' in the bookmarks drop-down menu at the top of the browser bookmark pop-up window. When I move my mouse over the bookmark pop-up window to change the directory where you will store the bookmark, it disappears before I can do something? If I move my mouse near the yellow star on the right side of the window to the url, the menu bookmark can appear again, but it disappears when I move my mouse over it?

    Hello!

    We have seen similar problems in the past. Read this 2-wire and let me know if they help you:

    https://support.Mozilla.org/en-us/questions/899098
    https://support.Mozilla.org/en-us/questions/850203

    Good luck
    Ibai

  • BlackBerry Z10 menu drop-down ("Notifications", "Alarm") disappears!

    My z10 works beautifully.

    Except in the last days whenever I do the drop-down list active (the one accessible by sliding from senior management downwards) and try to click "Alarm" or "Notifications", the menu drop down menu scans back and disappears!

    In other words, it seems that * just * these two buttons (alarm and Notifications) are disabled, so the effect is the same, as if I was to click on the black background of the drop in the menu drop-down or anywhere else but an active button. By pressing the buttons or notifications in all sorts of ways has the same effect: the banner just think you want to exit the menu and disappears.

    Any ideas why this happens? Am I the only one?

    I had to return the phone and get a new one.

  • Ajatix CSS Drop Down Menu not starting on Dreamweaver CC 2015

    Hi, just installed Dreamweaver CC 2015, I downloaded CSS Drop Down Menu 4 light Dreamweaver Extension v4.1.1. When I'm in Dreamweaver and go the Insert menu->-> CSS Drop Down Menu 4 light Dreamweaver Extension v4.1.1 Ajatix nothing hapenned. Ajatix plug-in does not start...  He used to work on an earlier version of Dreamweaver, but no more. Note that I also installed Microsoft Windows 10 lately.  THX

    Always do a job in 2015 CC?

    If this isn't the case, you will need to contact the developer of plug-in to see if they have a newer version that works in 2015 from CC.

    Nancy O.

  • Drop Down Menu using CSS only

    Apex 3.2

    I created a drop down menu for my application by following this blog

    http://www.grassroots-Oracle.com/2013/05/CSS-pull-down-menu-using-Apex-list.html

    It works perfectly if my list has only one level, but I can't make it work for sub items.

    If I add a sub item to my list, then the whole menu displays incorrectly.

    Has anyone used this blog before

    I'll post on the blog, but it requires a google account, which I am not allowed to create

    Gus

    Hello Gus,

    Have you read the comment of ino?

    Thanks Scott, very useful.
    An update: it works if there are no submenus. For the same reason that you have described on the

      bug, you can edit the sublist with sublist elements to

    • #TEXT #.

        (extra

          at the end). Took me a while to understand why my submenus are not showing correctly, until I read your comment in the section 'Model sublist before lines'.

    It seems to me that that would solve your problem.

    Kind regards

    Kees Vlek

    -----

    Company: http://www.orcado.nl

    Blog: http://www.orcado.nl/blog/blogger/listings/69-kvlek

    Twitter: http://www.twitter.com/skier66

    + If the answer to question please change replied and mark the appropriate post as correct / helpful. +

  • CSS Drop down menu; How to align the edge right of the menu drop down and the parent menu?

    Hi all

    I have a drop down menu that works well.

    The only change that I need to do is to have the right edge of the drop-down menu below to align with the right edge of the parent menu. When you hover over the menu, it currently "injects" down and to the right, with the left edges aligned.

    I want the menu to 'drop' down and to the left, so the straight edges are aligned.

    I tried fiddling with floats and absolute/relative positioning. I don't know what needs to be changed.

    You can provide any assistance is greatly appreciated! I learn through 'cut and paste', please go easy on any terminology you can use.

    Thank you!

    Here is my code:

    .chromestyle{
         width: 100%;
         font-weight: bold;
         float: left;
         height: 29px;
    }

    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul{
    border: 0px solid #BBB;
    width: 100%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: right; /*set value to "left", "center", or "right"*/
    }

    .chromestyle ul li{
    display: inline;
    }

    .chromestyle ul li a{
    color: #000000;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-left: 1px solid #DADADA;
    }

    .chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
    background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
    }

    /* ######### Style for Drop Down Menu ######### */

    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    }


    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 5px;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }

    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }

    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #0000ff;
    color: #fff200;
    }

    How about this?

    http://ALT-Web.com/demos/right-aligned-CSS2-Horiz-drop-menu.shtml

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

  • Drop-down menu is hidden behind the elements

    Hello

    I have a right to 2 containers after another. Drop-down menu is in the first. When I want something to choose in the drop-down menu, he hides behind the elements in the second container.  How can I make this drop in the front, when the seecting elements?

    In my application, I also noticed that when I didn't use a drop-down list ScrollView did disappear after the elements below the drop-down list. Then when I used a ScrollView around all elements, it has been resolved.

    A drop-down list in cascades infact do not come on the top items. It expanded just himself and all the elements under the menu drop-down get pushed down. When the bottom is reached, items below, that the drop cannot be pushed more, so the drop-down list will appear behind items.

    When you use a scrollview, the items in the drop-down list may get pushed too far below is necessary because the window is not limited to the screen.

    I hope that was a little bit useful.

  • Receptive Drop Down Menu issues

    I am having some problems with my sensitive menu drop-down.  I'm doing a line with 2 separate menus that appear next to each other.  The left side is usually a menu and the right side is social media links.  I have it running with 2 big questions.  First of all, I can't seem to get my (black) go to the entire page.  It stops between 2 menus.  Secondly, when I shrink down to a size phone browser and replace the menu by a drop down menu, my images (I use images instead of text so that I can use a specific font) develop to adapt the space.  I want them to appear as the size appropriate and that the drop-down menu to be right next to the links of social media.  Here is a link to the page so you can see what I mean.  My HTML and CSS are below.  Thank you.

    HTML

    <! DOCTYPE HTML >

    < html >

    < head >

    < meta charset = "UTF-8" >

    < title > J.Rad < / title >

    < link type = "text/css" rel = "stylesheet" hand. CSS"/ >

    < meta name = "viewport" content = "width = device-width, original scale = 1.0" >

    < / head >

    < body >

    < header > < img src = ' Background-Images/sick-Fantasy - Banner.png "alt ="Image of the banner"> < / header >

    < div id = 'menu' >

    < nav id = "nav" role = "navigation" >

    < a href = "#nav" title = "Show navigation" > < img src = ' Images/Background-Menu.png' alt = 'Menu' > < / a >

    < a href = "#" title = "Hide navigation" > < img src = ' Images/Background-Menu.png' alt = 'Menu' > < / a >

    < ul >

    < li > < a href = "/" > < img src = "Images/Background-News.png" alt = "News" > < /a > < /li >

    < li > < a href = "/" > < img src = "Background-image/Bio.png" alt = "Bio" > < /a > < /li >

    < li > < a href = "/" > < img src = "Background-image/Tour.png" alt = "Tower" > < /a > < /li >

    < li > < a href = "/" > < img src = "Background-image/Store.png" alt = "Store" > < /a > < /li >

    < li >

    < a href = "/" aria-haspopup = "true" > < img src = 'Media.png-Background-Images' alt = 'Media' > < / a >

    < ul >

    < li > < a href = "/" > < img src = "Background-Images/Music.png" alt = "Music" > < /a > < /li >

    < li > < a href = "/" > < img src = "Background-image/Photos.png" alt = "Photos" > < /a > < /li >

    < li > < a href = "/" > < img src = "Background-image/Videos.png" alt = "Vidéos" > < /a > < /li >

    < /ul >

    < /li >

    < li > < a href = "/" > < img src = "Background-image/Contact.png" alt = "Contact" > < /a > < /li >

    < /ul >

    < / nav >

    < nav id = "social" role = "navigation" >

    < ul >

    < li > < a href = "/" > < img src = "Background-image/Instagram.png" alt = "Instagram" > < /a > < /li >

    < li > < a href = "/" > < img src = "Background-image/YouTube.png" alt = "YouTube" > < /a > < /li >

    < li > < a href = "/" > < img src = 'Background-Images/Twitter.png' alt = 'Twitter' > < /a > < /li >

    < li > < a href = "/" > < img src = "Background-image/Facebook.png" alt = "Facebook" > < /a > < /li >

    < /ul >

    < / nav >

    < / div >

    < div class = "clearfix" > < / div >

    < div id = "container" >

    < article id "left column" = >

    It's the session of the left for the main content column

    < / section >

    < id side = "right column" >

    < div class = "widget_iframe" style = "display: inline-block;" width: 100%; height: 185px; margin: 0; padding: 0; border: 0; "" > < iframe class = "widget_iframe" src = "http://www.reverbnation.com/widget_code/html_widget/artist_420387?widget_id=54 & amp; posted by = _ artist_420387 & pwc [design] = custom & pwc [background_color] = % 23000000 & pwc [size] = adjustment" width = "100%" height = "100%" frameborder = "0" scrolling = "no" > < / iframe > < div class = "footer_branding" style = "margin-top:-5px; font-size: 10px; do-family: Arial; "> < / div > < / div > < br / >

    < div class = "widget_iframe" style = "display: inline-block;" width: 100%; height: 185px; margin: 0; padding: 0; border: 0; "" > < iframe class = "widget_iframe" src = "http://www.reverbnation.com/widget_code/html_widget/artist_420387?widget_id=53 & amp; posted by = _ artist_420387 & pwc [design] = custom & pwc [background_color] = % 23000000 & pwc [size] = adjustment" width = "100%" height = "100%" frameborder = "0" scrolling = "no" > < / iframe > < div class = "footer_branding" style = "margin-top:-5px; font-size: 10px; do-family: Arial; "> < / div > < / div >

    < / side >

    < / div >

    <>footer

    < / footer >

    < / body >

    < / html >

    CSS

    @charset "UTF-8";

    / * CSS document * /.

    * {

    margin: 0;

    padding: 0;

    }

    {body

    height: 100%;

    background-attachment: fixed;

    background-image: url(Background-Images/Sick-Fantasy-Background.png);

    background-position: top center;

    background-size: coverage;

    }

    {to header

    overflow: auto;

    background-size: coverage;

    background-image: url(Background-Images/Rust-and-Foamy-Blood-Texture.png);

    background-position: center;

    }

    header img {}

    display: block;

    margin: auto;

    }

    IMG {}

    Max-width: 100%;

    }

    div {}

    Width: 100%;

    background-color: #000000;

    background-size: coverage;

    }

    #nav

    {

    Width: 70%; / * 1000 * /.

    position: absolute;

    background-color: #000000;

    background-size: coverage;

    }

    #nav > a

    {

    display: none;

    }

    #nav li

    {

    position: relative;

    }

    #nav li a

    {

    display: block;

    }

    #nav li a: active

    {

    background-color: #996600! important;

    }

    #nav duration: after

    {

    display: inline-block;

    position: relative;

    }

    / * top-level * /.

    #nav > ul

    {

    background-color: #000000;

    margin-left: 25px;

    }

    #nav > ul > li

    {

    float: left;

    list-style: none;

    }

    #nav > ul > li > a

    {

    height: 100%;

    }

    #nav > ul > li: hover > a.

    #nav > ul:not (: hover) > li.active > a

    {

    background-color: #996600;

    }

    / * second level * /.

    #nav ul li

    {

    background-color: #e15a1f;

    display: none;

    position: absolute;

    }

    #nav li: hover ul

    {

    display: block;

    }

    #nav li: not (: first-child): hover ul

    {

    left:-1px;

    }

    #nav li ul a

    {

    }

    #nav li ul li a: hover,

    #nav li ul:not (: hover) li.active one

    {

    background-color: #996600;

    }

    #social

    {

    float: right;

    background-color: #000000;

    background-size: coverage;

    }

    #social > a

    {

    display: none;

    }

    #social li

    {

    position: relative;

    }

    #social li a

    {

    display: block;

    }

    #social li a: active

    {

    background-color: #996600! important;

    }

    #social duration: after

    {

    display: inline-block;

    position: relative;

    }

    / * top-level * /.

    #social > ul

    {

    background-color: #000000;

    margin-right: 25px;

    }

    #social > ul > li

    {

    float: right;

    list-style: none;

    }

    #social > ul > li > a

    {

    height: 100%;

    }

    #social > ul > li: hover > a.

    #social > ul:not (: hover) > li.active > a

    {

    background-color: #996600;

    }

    {.clearfix}

    Clear: both;

    Display: block;

    }

    #container {}

    Max-width: 960px;

    Width: 960px;

    margin-top: 10px;

    margin-left: auto;

    margin-right: auto;

    low-margin: auto;

    }

    {#left-column}

    Width: 590px;

    float: left;

    Background: #0000FF;

    padding: 5px;

    margin: auto;

    }

    {#right-column}

    Width: 350px;

    float: left;

    padding: 5px;

    margin: auto;

    }

    {.clearfix}

    Clear: both;

    Display: block;

    }

    footer {}

    background-color: #000;

    background-size: coverage;

    }

    @media screen and (max-width: 959px) {}

    {#body}

    Width: 100%;

    }

    #header {}

    Width: 100%;

    }

    #container {}

    Width: 100%;

    }

    {#left-column}

    Width: 60%;

    }

    {#right-column}

    Width: 30%;

    }

    IMG {}

    Width: 100%;

    }

    }

    @media screen and (max-width: 640px) {}

    #nav

    {

    Width: 50%;

    position: relative;

    }

    #nav > a

    {

    }

    #nav:not (: target) > a: first-of-kind,.

    #nav:target > a: last-of-type

    {

    display: block;

    }

    / * top-level * /.

    #nav > ul

    {

    display: none;

    position: absolute;

    }

    #nav:target > ul

    {

    display: block;

    }

    #nav > ul > li

    {

    float: none;

    list-style: none;

    }

    / * second level * /.

    #nav ul li

    {

    position: static;

    }

    }

    {#left-column}

    Width: 100%;

    margin: 0;

    padding: 0;

    }

    {#right-column}

    Width: 100%;

    margin: 0;

    padding: 0;

    }

    }

    @media screen and (max-width: 300px) {}

    #header {}

    Width: 100%;

    background-size: coverage;

    }

    #container {}

    Width: 100%;

    }

    }

    Add

    #nav img {}

    Width: inherit;

    }

  • no drop-down menu at the top. all gray

    I use CS6 on a Windows 7 system and all recently the drop-down menu at the top has disappeared and is gray. If I right click somewhere on the screen I don't see some of the drop-down list depending on where I right click.

    I just restarted with Ctrl/shift on hoping that would bring the upper menu back, but he did not.

    How can I fix it?

    Jim... I tried, but it does not solve. I just saved, rebooted and voila!

    I've never had this happen so little panicked...

    Thank you!

  • Big drop-down menu for the Adobe Web site

    Hello world

    I work on a web redesign and trying to imitate the big menu dropdown as the adobe Web site. The reason is that I need (under a touch of 'products') 3-4 columns of links. Right now I am try this in jquery, but was curious if someone did it in just css.

    Thank you!

    Here's a beautiful megamenu.

    http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-CSS3-mega-drop-down-menu--NET-15129

  • Drop Down Menu, please help

    Hi again,

    I am facing another problem here when it comes to having three configurations (phone, Tablet and desktop). I have a menu on all three provisions that are supposed to have drop down to the bottom of the sub menus slide each menu button. Menu bar layout Office drop-down buttons work perfectly, but the menu for my Tablet and phone layouts do not display the drop-down menu when I move my mouse over it. Anyone would be able to tell me why it does not work for the phone and Tablet page layouts? I would appreciate help.

    I intend to publish the coding for the phone drop-down list below to make it easier for anyone here to help me. Is there a way I should go all this or should I just copy and paste the code into this text field? He's not at risk of be reused elsewhere, wouldn't?

    Hyde1216 wrote:

    But if I'm not supposed to use the links to my local computer,

    "" You set the root folder, i.e. ' DBwebsite ' of the site in the Site Manager, then

    When you go to the link to a file or image, DW knows how to write the link ie images/pic.jpg

    Always manually, you can correct the bad links anf in code view

    like changing

    @import url("file:///D|/Desktop/DBwebsite/templates/desktop.css")

    TO

    @import url("templates/desktop.css")

  • Drop-down menu problem

    Sorry to be a pain people but can someone tell me how to get the drop-down menu to review the slide show instead behind him please. I'm using CS5. The link below.

    http://www.sunridgegraphics.co.UK/just

    Your slideshow is a stacking higher than your menu order. Try to add to your CSS:

    {#fadeshow1}

    position: relative;

    {z - index:-1}

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    http://ALT-Web.com/
    http://Twitter.com/ALTWEB

Maybe you are looking for