Display Mobile navigation bar

Hi all

I noticed when I discovered my work in Mobile display and I select the symbol menu, the menu down and pushes the content below it down as well. But when I applied "navbar-fixed-top" and he fought again in Mobile display, menu runs down but covers the below content instead of push down. How can I change that. See code below.

<! DOCTYPE html >

< html lang = "" >

< head >

< meta charset = "UTF-8" >

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

< name meta = "description" content = "" >

< name meta = "author" content = "" >

< title > Show Dropdown Hover & the caret upward < /title >

" < link rel ="stylesheet"href =" https://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.CSS ">

" < link rel ="stylesheet"href =" https://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap-theme.min.CSS ">

< style >

{.caret-up

Width: 0;

height: 0;

border-left: 4px solid rgba (0, 0, 0, 0);

border-right: 4px solid rgba (0, 0, 0, 0);

border-bottom: 4px solid;

display: inline-block;

left margin: 2px;

vertical-align: middle;

}

{#black}

background-color: #000000;

height: 500px;

}

< / style >

<!-[if IE] >

" < script src =" https://cdnjs.cloudflare.com/AJAX/libs/html5shiv/3.7.3/html5shiv.min.js "> < / script > .

" < script src =" https://cdnjs.cloudflare.com/AJAX/libs/respond.js/1.4.2/respond.min.js "> < / script > .

<! [endif]-->

< / head >

< body >

< div class = "container" >

< div class = "row" >

< nav class = "navbar, navbar-default navbar-fixed-top" role = "navigation" >

< div class = "bar navigation-header" >

< button type = "button" class = 'bar of navigation-toggle' data-toggle = "collapse" data-target="#bs-example-navbar-collapse-1" >

< span class = "sr only" > toggle navigation </span >

< span class = 'bar icons' > < / span >

< span class = 'bar icons' > < / span >

< span class = 'bar icons' > < / span >

< / button >

< a class = "brand navigation bar" href = "#" > brand < /a >

< / div >

< div class = "navbar-collapse collapse" id = "bs-example-navbar-collapse-1" >

< ul class = "navbar-nav nav" >

< class li = "active" > < a href = "#" > link < /a > < /li >

< li > < a href = "#" > link < /a > < /li >

< class = "dropdown" li >

< a href = "#" class = "menu drop-down-turn" data-toggle = "dropdown" > drop < class b = "circumflex accent" > < / b > < / has >

< ul class = menu "dropdown" >

< li > < a href = "#" > Action < /a > < /li >

< li > < a href = "#" > another action < /a > < /li >

< li > < a href = "#" > else here < /a > < /li >

< class li = "divisor" > < /li >

< li > < a href = "#" > link separate < /a > < /li >

< class li = "divisor" > < /li >

< li > < a href = "#" > a more separate link < /a > < /li >

< /ul >

< /li >

< /ul >

< class form = role "navbar-shape left navigation bar" = "search" >

< div class = "form-group" >

< input type = "text" class = placeholder 'form control' = "Search" >

< / div >

< button type = 'submit' class = "btn, btn-default" > Submit < / button >

< / make >

< ul class = "navbar-nav, navbar-right nav" >

< li > < a href = "#" > link < /a > < /li >

< class = "dropdown" li >

< a href = "#" class = "menu drop-down-turn" data-toggle = "dropdown" > drop < class b = "circumflex accent" > < / b > < / has >

< ul class = menu "dropdown" >

< li > < a href = "#" > Action < /a > < /li >

< li > < a href = "#" > another action < /a > < /li >

< li > < a href = "#" > else here < /a > < /li >

< class li = "divisor" > < /li >

< li > < a href = "#" > link separate < /a > < /li >

< /ul >

< /li >

< /ul >

< / div >

< / nav >

< / div >

< / div >

< div >

< div class = "row" id = "black" > color < / div >

" < script src =" https://AJAX.googleapis.com/AJAX/libs/jQuery/1.11.3/jQuery.min.js "> < / script > .

" < script src =" https://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js "> < / script > .

< script >

{$(function()}

() $(".dropdown").hover

function() {}

$('.dropdown-menu',_this).stop (true, true) .fadeIn ("fast");

$(this) .toggleClass ('open');

$('b',_this).toggleClass ("caret caret-up");

},

function() {}

$('.dropdown-menu',_this).stop (true, true) .fadeOut ("fast");

$(this) .toggleClass ('open');

$('b',_this).toggleClass ("caret caret-up");

});

});

< /script >

< / body >

< / html >

It works for me with this set - up.

Tags: Dreamweaver

Similar Questions

  • "Bootstrap" in display Mobile navigation bar

    Hi all

    I use jQuery to load my browsing in all my pages. It works great except for one thing... when I set my browser to see the mobile display, I select menu toggle to let fall the menu down which works fine but when I try pressing again for the menu back up... it does not work. No idea why? I tried the menu, which is located in my navigation.html file and it works perfectly, it's only when I place it in another page where the toggle function stops working.

    Any help would be appreciated.

    Thank you

    Ian.

    CODE


    <! DOCTYPE html >

    < html >

    < head >

    < title > < /title > Bootstrap example

    < meta charset = "utf-8" >

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

    " < link rel ="stylesheet"href =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.CSS ">

    < link href = "css/main.css' rel ="stylesheet"type =" text/css">"

    " < script src =" https://AJAX.googleapis.com/AJAX/libs/jQuery/1.11.3/jQuery.min.js "> < / script > .

    " < script src =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js "> < / script > .

    < script >

    {$(document) .ready (function ()}

    $('.navigation').load ('navigation.html');

    });

    < /script >

    < style >

    {body

    position: relative;

    }

    {#home}

    color: #fff;

    background-color: #D9DDDF;

    }

    {#mobile}

    color: #fff;

    background-color: #ECEFF1;

    }

    {#multimedia}

    color: #fff;

    background-color: #E5E3DF;

    }

    #sirius {padding-top: 50px; height: 500px; color: #fff; background-color: #00bcd4 ;}}

    #section42 {padding-top: 50px; height: 500px; color: #fff; background-color: #009688 ;}}

    {.section1}

    }

    < / style >

    < / head >

    < body spy-data = "scroll" data-target = ".navbar' data-offset ="145"> <!-do submenu strong btn->

    < div class = "navigation" > < / div >

    < / body >

    < / html >

    navigation.html CODE


    <! DOCTYPE html >

    < html >

    < head >

    < title > < /title > Bootstrap example

    < meta charset = "utf-8" >

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

    " < link rel ="stylesheet"href =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/CSS/bootstrap.min.CSS ">

    < link href = "css/main.css' rel ="stylesheet"type =" text/css">"

    " < script src =" https://AJAX.googleapis.com/AJAX/libs/jQuery/1.11.3/jQuery.min.js "> < / script > .

    " < script src =" http://MaxCDN.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js "> < / script > .

    < script >

    {$(function()}

    $(' a [href * = #]: {not([href=#])'}) ravishing (function ()})

    If (location.pathname.replace (/ ^ \ / /, ") == this.pathname.replace(/^\//,") & & location.hostname == this.hostname) {}

    var target = $(this.hash);

    target = target.length? target: $("[name =' + this.hash.slice (1) +'] '");

    If {(target.length)

    $('html,body').animate ({}

    scrollTop: target.offset () .top-140

    (}, 1000);

    Returns false;

    }

    }

    });

    });

    < /script >

    < / head >

    < body >

    < nav class = "navbar, navbar-default navbar-reverse navbar-fixed-top" >

    < div class = "container" >

    <!-brand and toggle get grouped together for better mobile display->

    < div class = "bar navigation-header" >

    "< button type ="button"class ="toggle navigation bar has collapsed"data-toggle ="collapse"data-target="#bs-example-navbar-collapse-1 "aria-expanded ="false">

    < span class = "sr only" > toggle navigation </span >

    < span class = 'bar icons' > < / span >

    < span class = 'bar icons' > < / span >

    < span class = 'bar icons' > < / span >

    < / button >

    "< div > < a href =" index.html"" > < img src="img/all_pages/header/ec_logo.png" alt = "" width = "137" height = "56" class = "img-reagent" / > < /a > < / div >

    < / div >

    <!-collect the nav links, forms, and other content to alternate->

    < div class = "navbar-collapse collapse" id = "bs-example-navbar-collapse-1" >

    < ul class = "navbar-nav nav" >

    < class li = "active" > < a href = "index.html" > < span class = "glyphicon glyphicon-home" aria-hidden = "true" > < / span > < span class = 'sr-only' > (ongoing) </span > < /a > < /li >

    < li > < a href = "divisions.html" > Divisions < /a > < /li > ""

    < li > < a href = "brands.html" > brands < /a > < /li > ""

    < class = "dropdown" li >

    < a href = "divisions.html" class = "list drop-down-turn" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false" > About Us < span class = "circumflex accent" > < / span > < /a > "

    < ul class = menu "dropdown" >

    < li > < a href = "#" > topic 1 < /a > < /li >

    < li > < a href = "#" > About 2 < /a > < /li >

    < li > < a href = "#" > News & comments < /a > < /li >

    < /ul >

    < /li >

    < li > < a href = "brands.html" > Famous < /a > < /li > ""

    < /ul >

    < ul class = "navbar-nav, navbar-right nav" >

    < class = "dropdown" li >

    < a href = "#" class = "menu drop-down-turn" data-toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false" > contact us < span class = "circumflex accent" > < / span > < /a >

    < ul class = menu "dropdown" >

    < li > < a href = "#" > Support < /a > < /li >

    < li > < a href = "#" > where to buy < /a > < /li >

    < li > < a href = "#" > contact us < /a > < /li >

    < /ul >

    < /li >

    < /ul >

    < / div > <!-/ .navbar-collapse->

    < / div > <!-/ .container-fluid->

    < / nav >

    < / body >

    < / html >

    I thought about her question. I had the following both my navigation.html & all additional pages.

    Once I removed the script above since the navigation.html page and was only on the other pages, it worked.

  • How to display the navigation bar in firefox 30

    I downloaded the version 30 this AM there is no navigation bar or the option for one. On the view menu, the navigation bar is not identified. If you go to customize the toolbars to hide has no option to toolbar navigation. I turned on all the display options, but do not get the navigation pane. The only way you can see is by placing the cursor on the lower part of the tab bar. It is truncated with about 2/3 of the width of the page. I want the width of the entire page and I want it to be displayed permanently. All I can find is for people who want to hide navigation bar, and I searched through those thinking maybe I could debone it, but no luck.

    Another problem is that if you use colorful tabs only the tab you are on is colorful - the rest are grayed out. What the hell happened?

    Hello

    Safe mode starts now shift and launching of FF. Using the alt key did nothing.

    I start in safe mode and the problem was not there. I uninstalled and reinstalled Firefox and it was back again.

    I was unable to follow the instructions for localstore.rdf. I was unable to open the current folder (AKA Firefox profile) settings Firefox by these instructions. The first two were not present and about: support simply takes you to a bunch of links to troubleshooting.

    Then I launched Firefox as a reset and now it looks like and acts properly. I had hoped to avoid a lot of time and a trial / error issues, but it wasn't only doesn't have to be. Thanks for trying to help!

  • Need help with the navigation bar reactive

    Hi all

    So im trying to make this web page (see link below) to evolve and adapt to fit different devices using queries of media in the style sheet, but I'm having some trouble trying to find the best way to display the navigation bar. Ideally, I would like the bar to run horizontally at the top of the page, but I don't know how to make the transition to happen from vertical to horizontal.

    Someone at - it ideas?

    http://www.milesfunerals.com/template.php

    Incorrect HTML code will do it.

    • index.html page "> Home"
    • #"> Our services."

      • whychooseMD.html"> why choose us?
      • Our - staff.html "> our team"
      • our - premises.html "> our premises"
      • Vintage.html"> vehicle Vintage
      • Memorials.html"> memorials
      • "funeral - planning.html" > pre-paid funeral
      • funeral - services.html"> funeral services.
      • our - vehicles.html "> our vehicles"
      • traditional - funeral.html"> traditional funeral.
      • others - services.html "> other services"
      • Enviro-f - funerals.html' > 'Green' funeral.
      • DIY.html ">funeral HOME "

    • #"> Useful tools.

      • Estimator.html"> funeral fees estimator".
      • donations_2.php"> make a donation in memory
      • Florist.html "> Floristry"

    • #"> Support news»

      • "useful - addresses.html" > useful addresses
      • inspiration.html "> inspiration for your service"
      • NAFD.html"> DAFN
      • Registries - death.html "> registering the death"
      • "hadil - coroner.html" > H.M. Coroner
      • funeral - costs.html "> funeral expenses"

  • ' b'support.html "> bereavement support
  • #"> Contact.

    • contact.html "> contact us"
  • directions.html "> How to find us"
  • #"> Feedback.

    • miles-and-girls diary.html"> Diary of undertaker
    • Testimonial.html "> testimonials"
    • FAQ.html "> Frequently questions"

  • Nancy O.

  • Button in the navigation bar for mobile view is empty

    For mobile display nav bar button contains no content. Target data may be wrong... it is automatically generated so I think that it is a component "bootstrap". I don't have a clear idea as to how this key captures the nav info.

    I made one of these before and Dreamweaver generated auto button with all nav links

    Ok. Here's the code.

    < head >

    < link rel = "stylesheet" type = "text/css" href = "mystyle.css" >

    < / head >

    < body >

    < nav class = "navigation bar default navbar, navbar-reverse" >

    < div class = "container-fluid" >

    <!-brand and toggle get grouped together for better mobile display->

    < div class = "bar navigation-header" >

    < button type = "button" class = "toggle navigation bar has collapsed" data-toggle = 'collapse' data-target="#bs-example-navbar-collapse-1" > < span class = "sr only" > toggle navigation </span > < span class = 'bar icons' > < / span > < span class = 'bar icons' > < / span > < span class = 'bar icons' > < / span > < / button >

    < has class = "brand navigation bar" href = "#" > welcome to the store online Selva Studios < /a > < / div >

    <!-collect the nav links, forms, and other content to alternate->

    < div class = "navbar-collapse collapse" >

    < ul class = "navbar-nav nav" >

    < li > < a href = "#" > about the artist < /a > < /li >

    < li > < a href = "#" > South flowers < /a > < /li >

    < li > < a href = "#" > sunflowers < /a > < /li >

    < li > < a href = "#" > Original Art < /a > < /li >

    < li > < a href = "#" > sea & shells < /a > < /li >

    < li > < a href = "#" > coastal birds < /a > < /li >

    < /ul >

    < / div >

    <!-/ .navbar-collapse->

    < / div >

    <!-/ .container-fluid->

    < / nav >

    <!-/ .navbar-collapse->

    < / div >

    <!-/ .container-fluid->

    < / div >

    < / div >

    <!-/ .container-fluid -.

    navigation-default bar is dark text on a light background.

    reverse navigation bar is a light text on dark background.

    Choose one or the other.

    Your ID target data does not match anything.

    Try this:

    Nancy O.

  • The navigation bar icon not display on iphone

    Hi all

    jdev version 11.1.2.4.0

    In my case I have app with three options display in the navigation bar.

    navigation bar icon show correctly on the android device.

    android.png

    but it is not show on iphone device.

    iphone.png

    See also in the doc: 4 definition of a Mobile Application (version 2.0.1.0.0)

    If a component of the application uses images customized for the navigation bar and springboard rather than the default ones provided by the MAF, you must create these images to the specifications described by Android developers website ( http://developer.android.com/design/style/iconography.html ) and in the chapter "Custom Icon and Image creation Guidelines" in iOS Human Interface Guidelines, which is available since the iOS Developer Library ( http://developer.apple.com/library/ios/navigation/ ).

  • navigation bar contains buttons of social site that are supposed to show the icons, but display only text

    I have been using firefox as my main development for a new Web page. I use WordPress 3.4.2 and custom theme called thesis 1.8.5.

    The main navigation bar contains 8 buttons; 1 on my blog which is the home page and the other 7 to static pages. These buttons all justify left. The right end of the bar contains buttons for Twitter, Google, Facebook, and Feedburner. Are (or were) related to images; These buttons are justified to the right.

    Here's the code that does this work:

    http://DIYthemes.com/thesis/RTFM/replace-WP-menu-text-links-image-sprites/

    They worked fine until yesterday when I made some design changes to the space between the left button. Now, rather than display icons, the underlying text shows on the buttons right justified.

    Now, here's what's interesting. I also have Safari and Chrome on my system. The icons show both of theirs.

    I can't find any explanation or patches for this problem.

    I'll give you the URL of the site, but it is in Maintenance mode so will not show the problem.

    Thanks for your help.

    These screenshots of the nav firefox, chrome and safari bars could help.

  • Since the update of FF 16.0.1 FF your Page is empty, my bookmarks bar is not displayed automatically + navigation toolbars remains on the first url.

    Since the update of FF 16.0.1 FF your Page is empty, my bookmarks bar is not displayed automatically + navigation toolbars remains on the first url.

    I uninstalled 16.0.1 and reinstalled 15.0.1 and everything worked fine, then I reinstalled 16.0.1 and have questions again.

    Thanks for responding but I already uninstalled and re-installed, have now no problem.

  • type in the navigation bar does not display the web page

    Type the URL in the navigation bar does not appear the page. But when you click on the same URL in bookmarks, page displays OK.

    Hi sidonius,.

    I'll try from Firefox Firefox to solve the issues in Safe Mode. If you do not have the issue so that all your modules, extensions, and themes are disabled, you can try adding them in one by one until you find the culprit. You should look at the guide to troubleshooting Extensions and themes and article troubleshooting issues with plugins like Flash or Java to solve common Firefox problems as well.

    Hope this helps!

  • display the text in the navigation bar when the user connects

    Hi all

    I'm (still ) on Apex 4.2.6.

    Currently, I have in my page templates, the following code snippet:

          <div class="logoBar">

              <img src="#IMAGE_PREFIX#themes/theme_125/images/logo_.png" />

              <h1><a href="#HOME_LINK#" id="uLogo">#LOGO#</a></h1>

            <div class="userBlock">

              <span>Username: &APP_USER.</span>

              #NAVIGATION_BAR#

            </div>

          </div>

    I have an obligation to display the user name (APP_USER) and of the company the user works for point Application AI_COMPANY, only when the user is connected. When the user is not connected; instead of these elements, I must show a connection link. Well, I know how to display a link to the login page, only when the user is not authenticated, using the navigation bar. Currently, when a user is not authenticated; the page shows: username: person. It's because he's in my page template. How can I show only the user name when the user connects? And then only display the name of the company?

    My first thought was to add an item in the navigation bar. But these elements comes in the form of links. Is it possible to add a navigation bar element and let it display as text? Of course, I could write a dynamic action on page 0 to remove the link, but I'm looking for a nicer sollution or better.

    I have apreciate your help!

    I take it, you use the same model of your home page and login page.

    You could use 2 different models or get out your elements in your model and put them in page 0.

    You can then make them conditional based on the number of page

    Gus

  • Text of the mark in the navigation bar is not displayed correctly

    Hello, I created my navigation bar, and I encountered a strange problem.  The text of mark in the navigation bar, which retains the link to my home page does not always display correctly.  When I visit my test page in Google Chrome (signed in my personal account) the brand text only display the basic text style.  It displays like this

    brand image 1.png

    But when I load the test in Google Chrome page, well signed to my business account - it displays like this

    brand text 2.png

    The second image is the way it should appear, this is the way I style navigation bar in my CSS (see below), but I'm puzzled as to why it loads differently in the same browser but connected to different accounts.

    CSS I used to create the navigation bar in the image above

    @charset "UTF-8";
    .container-fluid {
      background-color: #CA0E0E;
      width: auto;
    }
    .navbar.navbar-default   {
      background-color: #A7AB22;
      top: 9px;
      border-style: none;
    }
    #navbrand {
      background-color: #CA0E0E;
      color: #FFFFFF;
      font-family: eater;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      word-spacing: normal;
      font-size: 19px;
    }
    .nav.navbar-nav.navbar-right li a {
      color: #FFFFFF;
    }
    .navbar.navbar-default a:hover {
      background-color: #A7AB22;;
    }
    .dropdown-menu    {
      background-color: #CA0E0E;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      border: 0 none;
      top: 60px;
      border-radius: 0px;
    }
    .dropdown   {
      background-color: #A7AB22;
    }
    

    Does anyone have any ideas as to what could happen?

    Post edited by: Jason Telford to correct formatting

    You don't have not learned us your complete code, so a bit of guess work.

    1 have you included the "Eater" fonts to your website as in

    2. in the style rules that you have shown us, the police is spelled with a small "e" is - this should be a capital 'E' as in

    do-family: "Eater."

    To stop this guessing game, it is best if you specify the URL of your web site.

  • Drop-down menu does not when the navigation bar collapses for mobile devices

    My menu drop-down does not work correctly when the navigation bar collapses on mobile devices. The menu, but it's completely to the left, not right where I like it and hidden under a picture so that none of the links are accessible. The site is http://www.medicinedancecounseling.com.

    Index-Z = stacking order.  So even if you make menu items at the top, they mask your portrait in a most flattering way.

    Nancy O.

  • Hi, my navigation bar does not work and only the white pages are displayed

    Hi, my navigation bar does not work and that white pages are displayed - I watched the debate and made sure that each page is checked on "Export Page"; I checked that all pages are included with hyperlink. I deleted everything and started a new navigation bar; I have created a new site and started from scratch... nothing seems to work!

    It does not appear in the preview IE. I created 4 pages and when you perform a navigation bar, the title of the pages appears but when I saw and click one of the links, I get a full blank page with no navigation bar. What I am doing wrong? He worked for a time perfectly, but no more.

    Also, is it possible to manually check the links to see where I am redirected to?

    Thanks for sharing the file with me. Everything looks fine when I checked your file on my machine.

    Clear the browser cookies could solve the problem as default browser preview Muse use to render the pages.

    Kind regards

    Vivek

  • Displays logged in username on top in navigation bar entries

    Hi guys,.

    I use authentication scheme custom where I kept my user name and their password in the db table. Authentication works very well. Now I need to display registered user name at the top right in the navigation bar entries.

    How can I do? Please explain step by step because I am new to oracle apex.

    For example, here is a url to an apex application made by someone. You can see the name of user logged on top. If no user is logged on, "person" is displayed.

    RememberMe home

    Concerning

    Waqas

    Hello Waqas,

    This is usually done at the level of page template. You can put right after the HTML in the page template to display the user name.

    &APP_USER.
    

    If you change the "page template", you will see the #NAVIGATION_BAR substitution string #. You can just put above HTML before #NAVIGATION_BAR #.

    BTW, what is your Version of APEX? What theme are you using?

    Kind regards

    Hari

  • submenu hover but submenu displays navigation bar disappears when the cursor is moved to select the item

    Help, please!  My navigation bar includes the submenus which show on hover.  The submenu disappears when I move my cursor to select one of the items, so I can't click on any one of the submenu items.  Can anyone help?  Please?  Here is my code:

    < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

    " < html xmlns =" http://www.w3.org/1999/xhtml "> < head > .

    < meta http-equiv = "Content-Type" content = text/html"; Charset = UTF-8 "/ >"

    < title > Untitled Document < /title >

    < style type = "text/css" >

    < / style >

    "" < link href = "... / navbar.css" rel = "stylesheet" type = "text/css" / >

    < script type = "text/javascript" >

    function MM_swapImgRestore() //v3.0 {}

    var i, x = offline. MM_sr; for (i = 0; a & & I <.) Length & & (x = a [i]) & & x.oSrc; i ++) x.src = x.oSrc;

    }

    function MM_preloadImages() {//v3.0

    var d = document; If (d.images) {if(!d.MM_p) d.MM_p = new Array();

    var i, j is d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i <.) Length; i ++)

    If (a [i].indexOf("#")! = 0) {d.MM_p [j] = new Image; d.MM_p [j ++] .src = a [i] ;}}

    }

    function MM_findObj (n, d) {//v4.01

    var p, i, x;  if(!d) d = document; If ((p = n.IndexOf ("?")) > 0 & & parent.frames.length) {}

    d = parent.frames [n.Substring(p+1)] .document; n = n.Substring (0, p) ;}

    If (!) () x = d [n]) & & copyrights) x = d.all [n]; for (i = 0;! x & & i < d.forms.length; i ++) x = d.forms [i] [n];

    for (i = 0;! x & & d.layers & & I < d.layers.length; i ++) x = MM_findObj (n, d.layers [i] .document);

    If (! x & & d.getElementById) x = d.getElementById (n); Return x;

    }

    function MM_swapImage() {//v3.0

    var i, j = 0, x, a = MM_swapImage.arguments; document. MM_sr = new Array; for (i = 0; i <(a.length-2); I += 3).

    If ((x = MM_findObj (a [i]))! = null) {document. MM_sr [j ++] = x; if(!x.oSrc) x.oSrc = x.src; x.SRC = a [i + 2] ;}

    }

    ->

    < /script >

    "" < link href = "... / large - quilt.css" rel = "stylesheet" type = "text/css" / >

    < style type = "text/css" >

    a: link {}

    color: #071f75;

    }

    a: visited {}

    color: #0099ff;

    }

    a: hover {}

    color: #00cc;

    }

    a: active {}

    color: #cc3300;

    }

    < / style >

    <!-[if IE 6] >

    <! [endif]-->

    < / head >

    < onload of the body = MM_preloadImages('..) «/images/nav_bar_guild_ro_home.gif ','... / images/Calendar_rollov er_01.gif ',' /images/nav_bar_guild_ro_general.gif ','... f/images/nav_bar_guild_ro_members.» GI ','... /images/nav_bar_guild_ro_community.gif ','... /images/nav_bar_guild_ro_contacts.gif «,» . (/ images/events_rollover_01.gif ') ">"

    < div id = 'wrapper' >

    < div id = "top" >

    "< div id ="logo"> < a href ="... / index.html "" > < img src = ""... / pictures/thanks "width ="280"height ="172"alt ="logo"/ > < /a > < / div > <! - logo - >"

    < div id = "quilt_top" >

    "" < img src = "... / images/quilt_top.png" width = "550" height = "209" alt = "Duvet" / > < / div > <! - quilt_top - >

    < / div > <! - top - > <! - top - >

    < div id = "bar1" > < / div > <! - bar1 - >

    < div id = "bottom" >

    < div id = "nav" >

    < ul >

    "" "< li > < a href ="... / index.html "MM_swapImgRestore" onmouseover = "MM_swapImage ('home button',",'... / images/nav_bar_guild_ro_home.gif ', 1) "> < img src =" "... / images/nav_bar_guild_home.gif" alt = "home button" name = "home button" width = "148" height = "129" border = "0" id = "home button" / > < /a > < /li > "

    "" "< class ="subNav"li > < a href ="... / general.html "MM_swapImgRestore" onmouseover = "MM_swapImage ('general',",'... / images/nav_bar_guild_ro_general.gif ', 1) "> < img src =" "... / images/nav_bar_guild_general.gif" alt = "rollover nav buttons" name = 'general' width = "205" height = "129" border = "0" id = "general" / > < /a > "

    < ul >

    "< li > < a href ="... / meetings.html "> dating < /a > < /li >"

    "< li > < a href ="... / showandtell.html "> view the & amp;" Say < /a > < /li >

    "< li > < a href ="... / library.html "> library < /a > < /li >"

    "< li > < a href ="... / retreat.html "> pension < /a > < /li >"

    "< li > < a href ="... / blogs.html "> items < /a > < /li >"

    "< li > < a href ="... / fundraising.html "> fundraising < /a > < /li >"

    < li > < /li >

    < /ul >

    < /li >

    "" "< li > < a href ="... / members.html "MM_swapImgRestore" onmouseover = "MM_swapImage ('members',",'... / images/nav_bar_guild_ro_members.gif ', 1) "> < img src =" "... / images/nav_bar_guild_members.gif" alt = button 'members' name = 'members' width = "198" height = "129" border = "0" id = "members" / > < /a > < /li > "

    "" "< class ="subNav"li > < a href ="... / community.html "MM_swapImgRestore" onmouseover = "MM_swapImage ('Community',",'... / images/nav_bar_guild_ro_community.gif ', 1) "> < img src =" "... / images/nav_bar_guild_community.gif ' alt = 'button community' name = 'Community' width ="215"height ="129"border ="0"id = 'Community' / > < /a >"

    < ul >

    "< li > < a href ="... / kids_kwilts.html "> < /a > < /li > children Kwilts"

    "< li > < a href ="... / storybook_quilts.html "> stories < /a > < /li >"

    < li > < /li >

    < /ul >

    < /li >

    "" "< class ="subNav"li > < a href ="... / adresses.html "MM_swapImgRestore" onmouseover = "MM_swapImage ('contacts',",'... / images/nav_bar_guild_ro_contacts.gif ', 1) "> < im g src =" "... / images/nav_bar_guild_contacts.gif ' alt = 'the button contacts' name = 'contacts' width ="185"height ="129"border ="0"id ="contacts"/ > < /a >"

    < ul >

    "< li > < a href ="... / board.html "> Council < /a > < /li >"

    "< li > < a href ="... / bees.html "> bees < /a > < /li >"

    "< li > < a href ="... / carriere/portfolio/index.html "> resources < /a > < /li >"

    "< li > < a href ="... / quiltshops.html "> Quilt Shops < /a > < /li >"

    "< li > < a href ="... / otherguild.html "> other guilds < /a > < /li >"

    < li > < /li >

    < /ul >

    < /li >

    < /ul >

    < / div > <! - nav - >

    < div id = "main_content" > <!-TemplateBeginEditable name = 'main'-> main <! - TemplateEndEditable - >

    < / div > <! - main_content - >

    < / div > <! - low - >

    < / div > <! - wrapper - >

    < / body >

    < / html >

    I stayed until the end, and here is the HTML and CSS code, you must

    HTML


  • Patchwork shops
  • Other guilds
  • main

    CHANGE THE NAVIGATION BAR OF THE CSS SELECTOR TO THIS


    #nav li.subNav:hover ul {}

    display: block;

    position: absolute;

    top: 370px;

    border: none;

    background-color: transparent;

    do-family: "Times New Roman", Times, serif;

    do-size: 16px;

    color: #CA0F20;

    text-decoration: none;

    margin-top: 0px;

    right margin: 0;

    margin-bottom: 0;

    left margin: 0px;

    padding-top: 0px;

    padding-bottom: 10px;

    z index: 95;

    text-align: center;

    }

Maybe you are looking for