Help needed with CSS menu dropdown

Hi guys,.

I'm currently building a drop-down list for my site, but, despite seeing some tutorials and examples, I have had no luck yet!

I'm sure that my HTML is correct...

Code:

    <ul id="nav">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Drop Down 1</a></li>
                <li><a href="#">Drop Down 2</a></li>
                <li><a href="#">Drop Down 3</a></li>
                <li><a href="#">Drop Down 4</a></li>
            </ul>
        </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    </ul>

My CSS looks like this right now...

Code:

ul#nav {width:920px; height:35px; list-style:none; padding:0; margin:0; background:url(navBg.jpg) repeat-x; font-family:'OpenSansRegular'; font-size:11px; font-weight:700; text-transform:uppercase; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c; z-index:999;}
ul#nav li a:hover, #nav li a:active {background:url(navOn.jpg) repeat-x; text-decoration:none;}
ul#nav li a {border-right:1px solid #000; color:#E0E2E7; display:inline-block; float:left; margin:0; padding:10px 19px; width:auto; text-decoration:none;}

* html #nav li {display:inline; float:left; }  /* for IE 6 */
* + html #nav li {display:inline; float:left; }  /* for IE 7 */


ul#nav li ul {left:-9999px; position:absolute; list-style:none;}
ul#nav li:hover ul {left:0; position:absolute;}

ul#nav li ul li {}
ul#nav li ul li a {width:230px; background-color:#efefef; color:#2e2e2e; font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; border-bottom:solid 1px #FFF; padding:7px; margin:0;}
ul#nav li ul li a:hover {background-color:#028efd; background-image:none; color:#FFF;}

I am really struggling with this. Anyone know how I can get 3 Menu to display the drop-down list four items below - not the same width as the button Menu 3 but just online with it.

Thank you very much and I hope to hear from you.

SM

Try this. It's been adapted from a menu that I've done on another site.

#menu {width:920px; height:35px; padding:0; margin:0; background:url(navBg.jpg) repeat-x; -moz-box-shadow:0px 0px 10px #1c1c1c; -webkit-box-shadow:0px 0px 10px #1c1c1c; box-shadow:0px 0px 10px #1c1c1c;}
ul#nav a {font: 700 11px 'OpenSansRegular', arial, helvetica, sans-serif; text-transform:uppercase; margin:0; padding:5px 15px; line-height:25px; color: #666; text-decoration: none; display:block; list-style: none;}
ul#nav a:hover, ul#nav a.active {color: #999; background:url(navOn.jpg) repeat-x; text-decoration:none;}
ul#nav {position: relative; margin: 0; padding: 0;}
ul#nav ul {display: none;}
* html #nav li {display:block; float:left; }  /* for IE 6 */
* + html #nav li {display:block; float:left; }  /* for IE 7 */
ul#nav li, ul#nav li li {position: relative; float: left; list-style: none; border-right:1px solid #000;}
ul#nav li:hover ul {position: absolute; top: 35px; left: -1px; display:block; padding: 0; margin: 0;}
ul#nav li li {width:230px; background-color:#efefef; color:#000;  font: normal 10px 'OpenSansRegular', arial, helvetica, sans-serif; border-bottom:solid 1px #FFF; border-right:none; border-left:1px solid #000; padding:0 5px;}
ul#nav li li:hover, ul#nav li li a:hover {background-color:#028efd; color:#FFF;}



Tags: Dreamweaver

Similar Questions

  • Is it possible with CSS menu that appears when you click the menu button on a menu bar of style?

    I'm trying the menu that appears when a menu button is enabled in the style menu bar. I am able to style the menu bar and menu button in the action bar very well.

    However, I was completely unable to style from the Menu that appears.

    I asked the same question over to StackOverflow.com, but have not yet received a reply.

    Basically I have a menu that is set up as a bar:

    <MenuBar VBox.vgrow="NEVER">
      
    <menus>
      
    <Menu mnemonicParsing="true" text="_File">
      
    <items>
      
    <MenuItem mnemonicParsing="true" text="_New Project"/>
      
    <MenuItem mnemonicParsing="true" text="_Open…"/>
      
    <MenuItem mnemonicParsing="false" text="Quit"/>
      
    </items>
      
    </Menu>
      
    </menus>
    </MenuBar>

    I was completely unable to style the MenuItem or container here when they are indicated. I have dug through CSS of the skin of the Caspian Sea, but was unable to find out what anyone who specifically the. I tried to substitute the values of the ContextMenu, Menu, menu button and MenuItem that is located in the Caspian Sea, but nothing seemed to affect this menu.

    The menu is clearly inconsistent with the menu system, so why am I unable to style it?

    Isn't this possible? It will be possible in the future?

    Thank you for answer two. Unfortunately, what was proposed was not enough to solve the problem by itself. I didn't know that .menu - the point has had a child of .label who could bear the title, but that alone was not enough to correct the problem.

    Fortunately, Uluk Biy on StackOverflow.com was able to answer the question. He stressed that wanted me the property - fx-skin. I realize that I did not provide enough information here for users to come to this conclusion, so I wanted to thank you for helping with the little information you had.

    It seems that, once I've added the property - fx-skin .context-menu, I am able to style menus.

    Thanks again guys.

  • Once more, help needed with DW5

    Can someone help me with how to change the size of the font on a page using DW5 without first having to learn CSS? I asked this once before, and nobody would just show me what to put the required fields, so I can get with my Web page creation. Clarification, what I do is post pictures to a photo album online - I'm not a Web Designer or graphic designer, so I don't mean to be a great webmaster or anything like that. And I simply don't have the time to study the CSS - I'm already late in my studies unrelated to school and I spend time with my wife and my children. I-don't-have-the-time-to-learn-CSS.

    -Whenever I go to change the font size in the menu properties at the bottom of the page, place appears a window CSS asking me to enter all kinds of information - none that I am familiar with. Is there something I can fill in these areas so that I can change the font size and go with my photo album? I appreciate it.

    Not to worry. On the right side, in your CSS panel, you should see the class. Click it, and then click the pencil at the bottom of the Panel icon to change the rules. Define how you want, and then follow the last step to apply it.

  • Please help beginner with CSS positioning fix

    Am can't get the items of paragraph to behave the way I want to that they in the header section of the page on the link below. I paragraph address remaining in the position. Paragraph h, however, does not seem to be contained by the header div. He moves to the left as the browser window is resized to be larger. I tried to add a right margin of the paragraph address but paragraph hours does not seem to recognize that. I know I'm doing something wrong, but I can't seem to find out what. The little weather widget has a similar, but not quite the same problem. He moves to the right.

    http://www.openrangeimaging.com/test/gravity-test/index-Test01.html

    I hope someone knowing good css can help me to get this set up correctly.

    Thanks in advance for any help.

    Please forgive my newbieness. I have read and studied the html/css a bit, but this is my first attempt at real world if... I am determined to produce a website standards efficiently coded.

    We all started exactly where you are right now.  Learn how to work with the code is an excellent first step. Learn how to effectively use code is part skill and part art.  More you do, the easier it gets.

    When you have time, look at this article.

    How to develop with CSS?
    http://phrogz.NET/CSS/HowToDevelopWithCSS.html

    I had heard that the styles in the HTML are to be avoided. I guess it's a guideline that can be sometimes broken?

    True enough. Do not overdo with inline styles. But to change an element on a page, it won't hurt.

    Last question, is there a site you can recommend that I could keep posting my progress to for criticism on how I'm coding? It is appropriate to use this forum for this?

    You can ask your comments here.  There are many knowledgeable DW users here to help you.

    Good luck with your project,

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

  • Can someone help me with my menu?

    Dear friends,

    I'm new to Flash and I bought a model I could change pretty well to what I want.

    The only problem I encounter is with my menu (see 2 pictures attached).

    In Flash, I see "who we are" 5 times, but in the Flash movie and my Web site, you can see the categories.

    services, customers, projects, and contact.

    I would like to change these categories, but I can't find these words in Flash.

    If tried days fo to solve this, but I ran out of ideas.

    Please can someone point me in the right direction?

    Thanks in advance and amicably.

    Wilfred

    flash movie.PNG

    flash.PNG

    Hey Wilfred,

    I worked with these models, and the button names are usually stored in a movieclip several layers down.  You can get for it initially simply by clicking on the menu and then click again and again until you find the clip now names.  It will usually only one layer with 5 or 6 key frames.  Each keyfram is a button that is used.

    Best regards

    Chris

  • Help needed with camera loading LUT

    Hi all

    I'm trying to load a LUT created in Sony RAW Viewer in the F65 camera.

    I tried to use a memory stick and SD card but when I go to the file - LUT - menu import I don't see not all the files to select and when I click Import I get the error "Failed to load" - which is logical because it cannot see all of the files to import.

    I formatted the two cards in camera and put the files in which, according to me, are in the right places:

    The SD card:

    Private/Sony/Pro/Camera/F65/test1. Ltd

    For the Memory Stick:

    MSSONY/Pro/Camera/F65/test1. Ltd

    The version of camera system is on V2.2 and I use the Sony RAW Viewer software V1.1.0.06070

    When I export the RAW Viewer software Ltd. file I use the option "save under" in the control panel settings section and I save the file as type "Caméra LUT" with the model being F65, Type = READ and the media value correctly either MS or SD.

    Really appreciate any help to get this course as the camera that Luts are necessary for a meeting Monday.

    See you soon

    Hugh

    Hello

    Are you sure, is it possible in the 2.20 version?

    Kriss

  • More help needed with generic - or is - this reflection?

    This is a thread of follow-up to Re: need help with generics, I think... in which I ask for help a table abstract data model which itself contains an abstract objects row vector. (This book that happens because I have several table models, which are all very similar, and so I'm abstraction of common characteristics). Answering the question of this thread has been plenty in there, but now I have another.

    One such characteristic is a method that I called createMinRows. Many of my tables use blank lines to "fill in" any space which is not taken by rows with real data, so that the area of the scrolling pane is filled with the table grid. It is purely aesthetic. I have a field of AbstractModel, MIN_ROWS, whose value is set by the constructors of subclasses of AbstractModel. Manufacturers then call createMinRows() to get the necessary number of 'dummy lines' created in the model. This method, of course, must be in AbstractModel. And there is the problem: inside the AbstractModel, we do not know what AbstractRow subclass should be instantiated.

    Here's the code in SSCNE (...) Not compilable...) format:
    import java.util.Vector;
    import javax.swing.*;
    
    abstract class AbstractRow
    {
      protected String field1;
      protected String field2;
    }
    class MyRow extends AbstractRow
    {
      private String field3;
    }
    abstract class AbstractModel<T extends AbstractRow>
    {
      protected Vector<T> rows = new Vector<T>();
      protected int MIN_ROWS;
      protected void createMinRows()
      {
        for (int i = 0; i < MIN_ROWS; i++)
        {
          rows.add(new MyRow());  // this line doesn't compile
        }
      }
    }
    class MyModel extends AbstractModel<MyRow>
    {
      MyModel()
      {
        MIN_ROWS = 10;
        createMinRows();
      }
    }
    public class MakeAbstractRowWork extends JPanel
    {
      public static void main(String[] args)
      {
        javax.swing.SwingUtilities.invokeLater(new Runnable()
        {
          public void run()
          {
            JFrame frame = new JFrame("MakeAbstractRowWork");
            MakeAbstractRowWork pane = new MakeAbstractRowWork();
            pane.setOpaque(true);
            frame.setContentPane(pane);
            frame.setVisible(true);
          }
        });
      }
    }
    I guess I have to pass the class with createMinRows()? This would reflect, right? Is it possible to achieve what I need without thinking - I love Java verification type and everything seems to go when thinking puts his head in the door.

    I'd go with an abstract method that you call in your loop:

    abstract class AbstractModel {
      protected abstract T createEmptyRow();
    }
    
  • Gallery of images with CSS menu

    I have a gallery of images (slideshow) created with Flash and XML. My site uses a drop down css/javasript for navigation. The drop-down menu behind the slide show little matter what I set the z-index for. Y at - it something in flash that allows me to set its z-index? I could drop the menu on the page and give a link back, but it is a workaround and I would rather stay consistent with my site. Any assistance that could be given would be appreciated.

    Mark V.

    Just to inform anyone interested, I found the answer on another forum. Here is what has been given to me:
    If you paste your swf nto normal web with HTML, add the following setting

    and also the attribute wmode to the embed tag

    Otherwise, if you use the SWFOBJECT method to add this line after the "var so ="line ".
    so.addParam ("wmode", "opaque");

    I added the settings listed above and then added the attribute wmode = opaque in the embed command and it works fine.

    Mark V.

  • Help needed with two new HHD to RAID 1 PERC 6 / i integrated controller

    We have a client that has an out of warranty PowerEdge T610. On the Dell OpenManage Server Admin, I can see that he can see my 1 RAID PERC 6 / i integrated controller. On one of the controllers, we have a RAID 5 that has 4 discs dedicated to a data store (drive D), we two discs devoted to the Windows SBS 2008 (drive C) operating system on RAID 1.

    When we look at the server, I have physical disks located in:

    Our drive D data store:

    • 0:0:0
    • 0:0:1
    • 0:0:2
    • 0:0:3

    Our reader C found in:

    • 1:0:4
    • 1:0:5

    We just added two new hard drives for RAID 1 based on the conversation we had with Dell, they recommended that we can try from C data to the new larger disks. When to Dell Open Manage looking at the physical disks on the PERC 6 controller / i integrated, I can see that it has detected two new 500 GB SATA drives that the client installed. However the tasks available do not allow me nor their format to use as they appear in the management of the computer as a disk that is available for use. Is there something that we are completely absent here?

    Regarding the new disks located here:

    • 1:0:6
    • 1:0:7

    My options for available tasks are the following:

    • Blink
    • Unblink
    • Assign Global relief
    • Claire...

    I already have them deleted once as I didn't know if they should be formatted to be recognized, but in the computer management disk management they don't even appear at all. I thought that I had a task of 'on-line' that I could assign to the readers so maybe they appear to start to use the new storage HHD.

    With regard to the current firmware for the controller.

    • Firmware version: 6.2.0 - 0013
    • Driver version: 2.24.00.64
    • The Storport driver version: 6.0.6002.18005

    I have attached a PDF file to this post to view details on the disks. Sorry for the fine print, but it's a PDF so you should be able to zoom. Any assistance about why readers as not detected in disk management would be absolutely awesome. :)

    -Digity

    PERC does not support non RAID... you can just throw the discs and use them. You'll need to set up and initialize a new RAID array with the readers. It is not a task of "physical disk", therefore in OMSA, go to the page of the virtual disks and click the new link Wizard of VD at the top of the page to create a new VD of the BONE.

  • Please help beginner with CSS background-image

    I use Dreamweaver CS4. I created a site on my computer. D:Data\Local_sites\Gravity_Works. In this directory using Dreamweaver, I created 3 files - css, images and models. In the pictures folder, I have an image - bg_body_winter.jpg. In the Templates folder, I have Gravity-works - Home01.dwt. I have created a new form of the page the template file and named index - test01.html and saved directly in the folder Gravity_Works

    I have this css code in a css in the css folder file:

    {body
    background: url(/images/bg_body_winter.jpg) top of Center no-repeat scroll #C1CAD6;
    }
    {body
    Police: 100% Verdana, Arial, Helvetica, without serif.
    margin: 0;
    }

    I downloaded the site in a test folder on my server at fatcow.com. You can see the page using the link below.

    http://www.openrangeimaging.com/test/gravity-test/index-Test01.html

    The image appears as it should be in Dreamweaver Live View. It does not appear in Design view. It does not appear in the preview of the local file in a browser. The image does not appear when you look at the index file - test01.html that is located on the server by using the link above. The specified background color appears but not the image.

    I'm confused about how I should name the path to the image. I think it must be relative root of the site so that anywhere, I have download the website, the image can be found. Can someone tell me how I should name the path to the image properly.

    I feel that I should know how doing this and looked around for help online and tutorial books I have, but I just don't get it.

    TIA for any help.

    In your linked css file the path to the background image must be as shown below (note points both in front of the bar oblique leader)

    {body
    Background: url (.. / images/bg_body_winter.jpg) no-repeat scroll top centre #C1CAD6;
    }

    If you have this image, the browser is trying to find a 'pictures' folder in your "css" folder and it appears no one.

    If you include the colon before the first slash the browser search the folder 'images' outside your "css" folder and in the folder root site.

  • CSS Menu - drop down list help.

    Hi guys,.

    I am re - create a website for a friend and am currently finding the difficult Menu CSS coding.

    Here is MY version of the Web site:

    http://abacusmortgages.co.uk/index.html

    Here is the current version, which I am trying to copy:

    http://sdhmarketing.co.UK/

    Pages: Our types of customers and what you need to have special css menu dropdown lists that come when you hover over the button.

    Here is the CSS code that I have so far:

    #holding ul {}

    margin: 0px;

    padding-left: 0px;

    list-style-type: none;

    do-family: Arial;

    do-size: 14px;

    make-weight: bolder;

    color: #506F1A;

    background-image: url(images/navbg.jpg);

    position: absolute;

    left: 0px;

    Top:-3px;

    }

    #holding ul li {}

    float: left;

    Width: 200px;

    margin: 0px;

    make-weight: bold;

    }

    #holding ul li a {}

    do-family: Arial;

    do-size: 11pt;

    color: #506F1A;

    text-decoration: none;

    background-color: Transparent;

    text-align: center;

    display: block;

    padding: 5px;

    }

    #navigation {}

    }

    #holding ul li a: hover {}

    color: #FFF;

    background-color: #333;

    make-weight: bolder;

    do-size: 14px;

    }

    .menu {}

    }

    Here is the HTML code I use:

    < ul >

    < li > < a href = "index.html" > HOME < /a > < /li >

    < li > < a href = "ourclienttypes.html" > OUR CUSTOMER TYPES < /a > < /li > ""

    < li > < a href = "whatdoyouneed.html" > of WHAT do you NEED? " < /a > < /li >

    < li > < a href = "casestudies.html" > CASE STUDIES < /a > < /li > ""

    < li > < a href = "managementteam.html" > MANAGEMENT TEAM < /a > < /li > ""

    < /ul >

    If someone could help it would be much appreciated.

    Thank you all!

    . Selected a: hover {}

    background-color: #444;

    color: #fff;

    }

    }< remove="" that="">

  • Need help on the layout with CSS

    Hello

    Go easy on me I'm new to the Web design...

    I'm working with CSS, learning about various tutorials and have a basic understanding.  Where I am getting lost is I do a page template (dwt), I've done this before but this time I want to be more than a simple text in my pages editable region

    Thus, for example

    index

    loads with a text and a video

    Page1

    some of the texts, images, ads etc.

    Page2

    some of the texts, images, ads etc.

    fundamentally something different on each page, but I only see the option to leave an ' editable ' for each page... the logic in my brain is I create a DWT with my site header and navigation and footer and have content in the average change for each page depending on what I want to have this page?

    What confuses me, that of if I had to do more than 1 dwt, then how could manage navigation in one place?

    Thank you

    I think you mean I should use relative not absolute positioning?

    No, I mean that you must use no positioning at all. Read this - http://www.apptools.com/examples/pagelayout101.php

    with CSS, if I hear you correctly the style sheets should be used for the control of aspects throughout the site, page specific CSS should be put on the page itself... seems logical because it could keep things tidy.

    Yes.  You have a right, even if you can put also specific to the CSS in the stylesheet global page if the selectors so that the rules are specific for tags and attributes on specific pages.

    Good luck!

  • Help me with Encore CS6 Menu and buttons

    Hi, I need help with CS6 menu again.  I have a video first CSs 6 which is 3 hours and 21 chapters long.  It looks like I can get 18 buttons to work.  I also want to put in place an exit button.  Is there a limit of 18 a menu button?  Must I watch using the index menu or playlists?

    Thanks in advance for your help.

    Ed

    Yes, for a 16:9 (widescreen) DVD menu, there's a buttons 18 maximum.

    I assume by "index menu", you are referring to the use of the callback function to create multiple menus for reading the chapter. It is a simple as long as you want to keep the film from the chapter selected towards the end of the film (hollywood style).

    If you want the chapter to return to a menu after the game, you cannot use the function index and chapter playlists are a good method for unique reading of the chapters.

  • Please HELP: need help with a page after coding button.

    Okay, in detail, I'm trying to code a next page button and can't really understand how and tried to look on the net but could not find the kind of that I'm looking. So ok, the kind of the page button depending on whether I'm looking for is the kind where you as < < 1 2 3 4 5... (Next page button) > > not only a button when I need to hyperlink to the next page url because I like 35 pages to put... so I'm trying to understand it and yet no cigar then someone can please help me with this? Thank you!

    I have seen a lot (on the forums with over 1000 pages on some discussions) is to add a block 'paging' of the code that made:

    1. two or three pages before the current page
    2. two or three pages after the current page
    3. a dropdown menu with all THE listed pages

    The button or the 'next' link is just a copy of the last link in the online list.

    Something like this:

    GoTo page  1, 2, 3 ... 51, 52, 53  Next

  • T42 hide menu with CSS media query

    In an application of theme univeral if you attempt to print a page with the display left menu, it takes too much space.

    These can be removed with CSS, and I found the room to be cut after the hidden menu.

      #t_Body_nav 
        { display : none; }
      
      #t_Body_content 
        { margin-left : 0px !important; }
    

    Yet, when they are wrapped in a media query, during print preview or emulation (image) the margin on the left is in the spotlight, but the body remains behind

    @media print {
      #t_Body_nav 
        { display : none; }
      
      #t_Body_content 
        { margin-left : 0px !important; }
    }
    

    978-1-4842-0962-2_figure_20-emulation.png

    I don't see what else I might need to include?

    Basic sample

    workspace: swesley

    user: otn

    PWD:Forum

    App: 88776

    Note that I'm only interested in the media query, not printer_friendly solution. Although I have not there is no friendly t42 model, printer only honour which is described in the documentation.

    Scott

    Hi Scott

    I think it's the transform that you are missing:

    @media print {
      form .t-Body #t_Body_nav {
        display: none;
      }
      form .t-Body .t-Body-main {
        margin-left: 0;
        -webkit-transform: none;
        transform: none;
      }
      form .t-Body .t-Body-main>div {
        margin-left: 0 !important;
      }
    }
    

    A bit of fiddling with the specificity of the selector is necessary to avoid !important directives on everything.

Maybe you are looking for