How do I fix my floating drop down navigational menu?

Hello, I am currently reworking my website to make it responsive, but I have hit a roadblock with my navigation menu:
My goal for the menu is to have a floating navigational menu in which as the user hovers over the link the image changes. One of the tabs is intended to be a submenu that drops down horizontally. I also am trying to get the menu centered on the page using fluid positioning.
As of now, I have a functional drop down menu with the rollover effects. It wasn't until I began work on floating the menu that I ran into a problem. At first, the menu was not scaling proportioally with the rest of the page, but upon looking around, I found: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browse r-support.
Using the code on the link, I recoding the menu. In the end, the drop down menu is causing the problem. When I have the drop down menu still included in the code, the menu is broken up in three lines. The submenu is grouped with its parent, but they are grouped boxy (at least in the browsers I have checked) and only two are visible.
I decided to humor myself and removed the code for the drop down menu to find that the menu works perfectly--it does everything I was aiming for for the time being--rollover, center, floating.
Is there something that I am overlooking that will fix the drop down menu?
I was thinking that I would have to center the styles for the sub menu, but I didn't see any results.
What am I missing that I am not seeing?
The links to the two pages:
http://ryanolsenstudios.com/WithDropDown.html
http://ryanolsenstudios.com/WithoutDropDown.html
If anyone can point me in the right direction it would be appreciated, I have been looking around trying to figure this out, but to no avail. Thank you.

I don't advise you use images for navigation as they are NOT scalable to any good effect.
Below is a simplified version of your image buttons with dropdowns in place.
The jQuery used to create the rollover swaps is going to get very long and unmanagable (it's just as an example) I suspect there will be more streamlined solutions using jQuery if you Google, like just adding _static.jpg and_over.jpg to the end of the image src, which will keep the code to a minimum of lines.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"><title>Ryan Olsen's Studio</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("#home img").hover(function() {
$(this).attr("src","http://ryanolsenstudios.com/images/hometabroll.jpg");
}, function() {
    $(this).attr("src","http://ryanolsenstudios.com/images/home.jpg");
$("#about img").hover(function() {
$(this).attr("src","http://ryanolsenstudios.com/images/bioroll.jpg");
}, function() {
    $(this).attr("src","http://ryanolsenstudios.com/images/bio.jpg");
$("#shows img").hover(function() {
$(this).attr("src","http://ryanolsenstudios.com/images/showsroll.jpg");
}, function() {
    $(this).attr("src","http://ryanolsenstudios.com/images/shows.jpg");
</script>
<style>
body {
    background-color: #000;
.myMenu {
margin:0;
padding:0;
display: block;
text-align: center;
.myMenu li {
margin: 0;
padding: 0;
list-style:none;
display: inline-block;
position: relative;
.myMenu ul {
position: absolute;
display: none;
margin: 0;
padding: 0;
left: 0;
top: 5em;
z-index: 100;
.myMenu li:hover ul {
display: block;
</style>
</head>
<body>

<ul class="myMenu">
<li><a href="#" id="home"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a>
<ul>
<li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
<li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
</ul>
</li>
<li><a href="#" id="about"><img src="http://ryanolsenstudios.com/images/bio.jpg" alt="AboutMeTab" /></a>
<ul>
<li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
<li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
</ul>
</li>
<li><a href="#" id="shows"><img src="http://ryanolsenstudios.com/images/shows.jpg" alt="ShowsTab" /></a>
<ul>
<li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
<li><a href="#"><img src="http://ryanolsenstudios.com/images/home.jpg" alt="HomeTab"></a></li>
</ul>
</li>
</ul>
</body>
</html>

Similar Messages

How to modify the list item drop down context menu in SharePoint 2010

Hi All,
I have a requirement to add my name in the list item drop down context menu, already "Assigned ticket" option is available in the context menu and some names are available in the assigned ticket option. but i can't able to add my name in this options.
Attached screenshot for reference. Thanks in advance for your assistance!
Thanks
Arun Prakash

Do you know how the currently listed values got there in the first place? Some sort of custom code or action? Some background information would help. There is obviously a source feeding it from somewhere, but it's impossible for us to tell you exactly
what just by looking at your scribbled-over screenshot
Check WSPs that are deployed to the farm. Check for any non-OOTB site features that are turned on...

HELP need info about drop-down navigation menu

Hi everyone,
I was wondering if I could get some input. I have just
re-designed our magazine's site, www.easternsurf.com
I used Pop-Up menu function in Fireworks 8 to generate our
Navigator bar. For the most part everything has been working well,
BUT we've had a couple of complaints that the navigator bar's
pull-down menus get stuck behind the photos/banner ads/etc. instead
of in front of them when viewing in Internet Explorer. I'm on the
Mac platform (OSX Tiger/Macromedia Studio 8) and have seen no
problems viewing in Safari, Firefox and Netscape. The only
complaints have come from Internet Explorer users. A couple of
people updated their browser to the newest version and the problem
disappeared, however we've still had a couple of people that have
written in that the newest version of IE is still not displaying
properly.
Also we've got a strip of button ads running down the left
hand side of each page and I've also seen another issue that's
common on sites of this type...when the pulldown menu overlaps with
a Flash element, there is a problem with the screen re-draw. I've
seen this on several other sites and know it's a common problem,
but does anyone know of a workaround where this won't happen? I
just noticed that signing on to Adobe's site, there almost seems to
be a command where the menu keeps re-drawing at a very rapid rate
so this won't happen.
Any input would be greatly appreciated, although I'm Mac all
the way, we are a business and have to get this site visible for
everyone!
Thanks!

Read my response to your previous post.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"webmasterinflorida" <[email protected]>
wrote in message
news:[email protected]...
> Hi everyone,
>
> I was wondering if I could get some input. I have just
re-designed our
> magazine's site, www.easternsurf.com
>
> I used Pop-Up menu function in Fireworks 8 to generate
our Navigator bar.
> For
> the most part everything has been working well, BUT
we've had a couple of
> complaints that the navigator bar's pull-down menus get
stuck behind the
> photos/banner ads/etc. instead of in front of them when
viewing in
> Internet
> Explorer. I'm on the Mac platform (OSX Tiger/Macromedia
Studio 8) and
> have
> seen no problems viewing in Safari, Firefox and
Netscape. The only
> complaints
> have come from Internet Explorer users. A couple of
people updated their
> browser to the newest version and the problem
disappeared, however we've
> still
> had a couple of people that have written in that the
newest version of IE
> is
> still not displaying properly.
>
> Also we've got a strip of button ads running down the
left hand side of
> each
> page and I've also seen another issue that's common on
sites of this
> type...when the pulldown menu overlaps with a Flash
element, there is a
> problem
> with the screen re-draw. I've seen this on several other
sites and know
> it's a
> common problem, but does anyone know of a workaround
where this won't
> happen?
> I just noticed that signing on to Adobe's site, there
almost seems to be a
> command where the menu keeps re-drawing at a very rapid
rate so this won't
> happen.
>
> Any input would be greatly appreciated, although I'm Mac
all the way, we
> are a
> business and have to get this site visible for everyone!
>
> Thanks!
>

Drop down navigation menu

I like the automatic navigation menu feature but I have some lower level pages that I want to include with a rollover. For example, when people rollover the About Me link in the navigation menu I would like 3 "lower lever" pages to show so that people can either choose the About Me page or one of the other 3 pages. Is this possible using iWeb?

iWeb uses the textbox in the Header layer of an iWeb page as the title in the browserwindow.
Sometime you may want a different text in the titlebar and not display it on the page itself. Or not display it at all.
So use that textbox in the Header layer. Type your text. Then select the textbox. In the Inspector choose T, click a color to open the color palette and drag the opacity slider to 0 (zero).
Do Command-T to open the font palette and make the font smaller. (Or do Command--(minus)) Also use a font that doesn't change to an images. Arial is a good font. Perhaps do it first before make it invisble.
Resize the textbox.
Do Command-Shift-B to move the textbox to the back, possibly behind other objects.
Next add a optional second textbox to the Header layer and use that one to display text on the page.
Do not remove the original textbox, as you cannot replace it other than by selecting another theme and then change it back to the original theme again. Ruining the layout in the process.
Why use a timewasting 3rd party application to add a title when it is already possible in iWeb itself.

How can change background color of drop down menu navigation?

Hi,
I am using multi level drop-down-navigation menu in my website.
I am get good drop-down menu from htmldrive.net, but problem is how can change menu background color black to other colors.
please help me
Link & code is given below
http://www.htmldrive.net/items/demo/913/Multi-Level-Drop-Down-Menu-Navigation-with-CSS3
HTML Code
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
        <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Level 2.3</a></li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
        </ul>
</li>
<li><a href="#">Three Levels</a>
        <ul>
        <li><a href="#">Level 2.1</a></li>
        <li><a href="#">Level 2.2</a></li>
        <li><a href="#">Level 2.3</a>
                <ul>
                <li><a href="#">Level 2.3.1</a></li>
                <li><a href="#">Level 2.3.2</a></li>
                <li><a href="#">Level 2.3.3</a></li>
                <li><a href="#">Level 2.3.4</a></li>
                <li><a href="#">Level 2.3.5</a></li>
                <li><a href="#">Level 2.3.6</a></li>
                <li><a href="#">Level 2.3.7</a></li>
                </ul>
        </li>
        <li><a href="#">Level 2.4</a></li>
        <li><a href="#">Level 2.5</a></li>
        </ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
CSS CODE
#nav {
        float: left;
        font: bold 12px Arial, Helvetica, Sans-serif;
        border: 1px solid #121314;
        border-top: 1px solid #2b2e30;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
#nav ul {
        margin:0;
        padding:0;
        list-style:none;
#nav ul li {
        float:left;
#nav ul li a {
        float: left;
        color:#d4d4d4;
        padding: 10px 20px;
        text-decoration:none;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
        background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
#nav li ul {
        background:#3C4042;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        -webkit-border-radius: 0 0 10px 10px;
        left: -999em;
        margin: 35px 0 0;
        position: absolute;
        width: 160px;
        z-index: 9999;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        border: 1px solid rgba(0, 0, 0, 0.5);
#nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 120px;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;

Change this:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
to this:
.ddsmoothmenu{
font: bold 12px Verdana;
background: #new color code;
width: 100%;
And repeat this on other selectors.
Nancy O.

How can I display images in drop down.

Hi All,
How can I display images in drop down.
<select><option>image here</option></select>
please reply soon.
anser please
Thanks

I have not found html forum..That's just incredible.
where can i find it ?Sorry, I'm still recovering from that remark.
please reply soonEvery time you end a post with this, or "urgent" or other such keywords, the forum automatically introduces a 5 minute delay so that will actually make the whole process slower (not faster).

How to get "tones" tab in drop down menu

how to get "tones" tab in drop down menu

I assume that you are referring to the categories on your iTunes library (?), if you are then go into Edit > Preferences and on the General tab make sure that Tones is ticked
You can also enable the left-hand sidebar on iTunes 11 on a PC via control-S, which then allows you to view the sections of your library (those enabled in Preferences) via that sidebar, and if you have iOS devices they will also show on that sidebar when connected.

How to create a multi select drop down filed in crm 7.0

Hi All,
I need to create a multi select drop down field in crm web ui where one field have 7 value and we can select more than one value at a time.I have no idea how to create a multi select drop down field in web ui.
Please help.....

Hi vishwas
Please follow the thread where a similar requirement was posted.
Re: Drop-down list box / pick-list with multiple selections at a time
Here the suggestions say that a workaround could be to associate a table view to the field.
Regards,
Nisha

How do I pass a username form variable from a drop down list/menu to another page?

Hi,
I have a login_success.php page that has a drop down list/menu (which lists usernames). I want the user to click on their user name, and when they click the submit button the username information to be passed over to the username.php page which will contain a recordset, sorted by username.
How do I pass the username info from the drop down list/menu to the username.php page?
The drop down menu is connected to a recordset listUsername, I have filtered the recordset with the Form Variable = username, and I have used the POST method to send the username to the page username.php. I'm not sure how to structure the php or which page to place it on.
<form id="form1" name="form1 method="post" action="username.php">
     <label for="username_id">choose username:</label>
     <select name="username_id" id-"username_id">
          <option value="1">username1</option>
          <option value="2">username2</option>
          <option value="3">username3</option>
          <option value="4">username4</option>
     </select>
     <input type="submit" name="send" id="send" value="Submit" />
     <input type="username" type="hidden" id="username" value="<?php echo $row_listUsername['username']; ?>" />
</form>
Could somebody help me please?
Thanks.

I would not post the variable over, In this case I personally would send it through the URL and use the $_GET method to retreve it. For Example.
<html>
     <head>
          <title>Test Page</title>
          <script type="text/javascript">
               function userID(){
                    //var ID = form1.userIDs.selectedIndex;
                    var user = form1.userIDs.options[form1.userIDs.selectedIndex].value;
                    window.location = "test.html?userID=" + user;
          </script>
     </head>
     <body>
          <form id="form1">
               <select name="userIDs" id="userIDs" onchange="userID();">
                    <option>Select a User</option>
                    <option value="1">User 1</option>
                    <option value="2">User 2</option>
                    <option value="3">User 3</option>
                    <option value="4">User 4</option>
               </select>
          </form>
     </body>
</html>
//PAGE TO RETRIEVE THE USERNAME
<?php
if(isset($_GET['userID'])
     $userID = $_GET['userID'];
     echo $userID;
     die;

How to I remove the Bing Drop Down Banner on MSN Homepage

How do we remove the Bing drop down banner search bar from MSN. We are running Windows Vista and Firefox 4.

Install Firefox and the Add on called Ad Block Plus, subscribe to the "Easy List" (almost automatic)
When the image appears again, right click on it and there will be a Ad Block Plus menu option which you then can block the image server.
Ad Block Plus is wonderful at blocking all sorts of image servers

How do I find the formatting drop-down menu?

In writing messages, I have always enjoyed using the drop-down formatting menu, that provides choices of font, font size, color, etc. It has disappeared. All I have now on my menu bar is
Attach Security Save
How can I get this wonderful feature back?

Do you use one of the popular webmail sites, like Yahoo, Gmail, or Hotmail/Outlook? Could you check to make sure the site didn't switch to a "basic" view or "plain text" instead of the usual advanced view with "html" format?

How do I get the complete drop down Menu?

How do I get the complete drop down menu when I CTRL-Mouse click a folder. I am getting MORE in the bottom, and I need it to be removed.
Thanks

The "More" area in the contextual menu's are bothering quite a few people. It's a feature of Leopard and can't be removed. There may be a hack available, but I'm waiting for some help from Apple...
It reminds me of the Personalized menu's that Microsoft enables by default in some versions of MS Office for Windows. And it's a feature that I turn off immediately after installing Office for a client.
Two steps forward, One Back.

How can I enable the automated drop down for the subject line on the email page

How can I enable the automated drop down for the subject line on the email page as I send more than 300 emails everyday with the same subject line. Before it use to happen in my gmail account but now its not. Please help me as its increasing my work time because I have to type the subject line again and again on each email I send. Please help me guys.

This is usually caused by one or more bookmarks having a long title.
You can check that folder in the Library and shorten long names.
* Bookmarks > Show Al Bookmarks
*Bug 626066 - History, Bookmarks menus too wide because of pages with long titles on 64bits
<i>Please do not comment in bug reports: https://bugzilla.mozilla.org/page.cgi?id=etiquette.html</i>

How can I get my Bookmark drop down list back?

I had to clear and restore my Macbook Pro and when I installed Firefox the drop down Bookmark menu is gone. I have the same version of Firefox on two computers and one has the drop down menu and this one doesn't. How do I get it back?

Do you mean the star on the location/address bar to bookmark the current page?
You can try to click the Restore Defaults button in the Customize palette.
Make sure that toolbars like the "Bookmarks Toolbar" are visible.
*"3-bar" Firefox menu button > Customize > Show/Hide Toolbars
*View > Toolbars<br>Tap the Alt key or press F10 to show the Menu Bar
*Right-click empty toolbar area
Open the Customize window and set which toolbar items to display.
*"3-bar" Firefox menu button > Customize
*check that "Bookmarks Toolbar items" is on the Bookmarks Toolbar
*if "Bookmarks Toolbar items" is not on the Bookmarks Toolbar then drag it back from the Customize palette into the Customize window to the Bookmarks Toolbar
*if missing items are in the Customize palette then drag them back from the Customize window on the toolbar
*if you do not see an item on a toolbar and in the Customize palette then click the Restore Defaults button to restore the default toolbar setup
*https://support.mozilla.org/kb/customize-firefox-controls-buttons-and-toolbars

How to Make a Non-Spry Drop Down Menu Bar?

In Dreamweaver CS6, I'm building a Fluid Grid website. I'm trying to make a simple menu bar with 2 submenu items and 2 subsubmenu items. I was using Spry but found out that Spry is dead. So what do I use instead?

First of all, if you are in a hurry, Project VII's Pop Menu Magic 3 is a great choice. Since it's a Dreamweaver plugin, making navigation is a snap. Just click on the PMM icon and start making.
One does not need CSS3 for a drop-down menu structure—the necessary requirement to talk to a web browser is in CSS2. Also you do not need to load your website with jQuery—though I don't want to come across as "anti-jQuery."
Here is a link to a complete tutorial on pure CSS drop-down navigation. There are dozens of others.
The real secret is using position:relative, then position:absolute for the drop-down and hiding it by positioning it off-screen when not in use. This tutorial also uses some CSS3 for tablets and cell phones, though it is not required for desktops.
You can take this a step further by hiding the entire navigation structure (and then revealing it) for cell phones with this tutorial. This will allow you to construct navigation for your website so that it will work for all devices.
Please note, no jQuery is necessary in either of these tutorials.
-Mark

How do I fix my floating drop down navigational menu?

Similar Messages

Maybe you are looking for