CSS/HTML issue with nav bar

I'm trying to create a drop down navigation menu and under my 'Contact' button I want it to drop down and show my social media pages. I'm new to CSS so I am trying to understand where I went wrong...when I hover over 'Contact' it doesn't show anything. Here is my HTML and CSS code:
HTML-
<div class="nav">
    <ul id="nav">
        <li><a href="#">Home</a></li>
            <li><a href="#">Search Homes</a></li>
            <li><a href="#">Buy</a></li>
            <li><a href="#">Sell</a></li>
            <li><a href="#">Blog</a></li>
<li><a href="#">Meet My Team</a></li>
            <li><a href="#">Contact</a>
            <ul>
                <li><a href="#">Facebook</a></li>
                </ul>
            </li>
        </ul>
</div>
CSS-
.nav {
padding-top: 20px;
padding-bottom: 20px;
#nav {
list-style-type: none;
margin: 0;
padding: 0;
#nav li {
display: inline-block;
#nav li a {
padding: 10px;
background-color: #fff;
text-decoration: none;
color: #333;
transition: background .35s ease-in-out;
-webkit-transition: background .35s ease-in-out;
-o-transition: background .35s ease-in-out;
-moz-transition: background .35s ease-in-out;
#nav ul ul {
display: none;
position: absolute;
#nav li a:hover {
color: #333;
background-color: #ccc;
text-decoration: none;
#nav li ul li {
display: none;
position: absolute;
Thanks in advance!

You don't actually have the CSS code for the dropdown action. Here is a very simple example you can work from:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
font-family: 'Lucida Grande', 'Helvetica Neue',
Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
ul li:hover {
background: #555;
color: #fff;
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
</style>
</head>
<body>
<ul><li>Home</li>
<li>About</li>
<li>
    Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</body>
</html>

Similar Messages

How to use CSS to create horizontal nav bar in Dreamweaver CS6

How to use CSS to create horizontal nav bar in Dreamweaver CS6

One of the ways to do it is this: Tryit Editor v1.9
You can also use floats to get something to the same effect.

Help with Nav Bar insert

When I try to insert a Nav Bar, clicking OK in the Modify Nav
Bar window gives the following message:
"while executing onClick in Modify Nav Bar.htm, a JavaScript
error occurred"
Amateur user with no clue what this means,
Jon

Troubleshooting JavaScript errors in Dreamweaver
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_19105#dat
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
==================
"zaphron" <[email protected]> wrote in
message
news:f4phcu$rj3$[email protected]..
> When I try to insert a Nav Bar, clicking OK in the
Modify Nav Bar window
> gives
> the following message:
>
> "while executing onClick in Modify Nav Bar.htm, a
JavaScript error
> occurred"
>
> Amateur user with no clue what this means,
>
> Jon
>

Help with Nav Bar using Action Script 3

I am a flash NOOB to say the least. Trying to teach myself. Thank God for YouTube! LOL! Anyway, I have build a Nav Bar for a site that has a sliding bar on the bottom of it that follows the mouse. The problem with this nav bar is that when you change pages inside the site, the slider resets back to position X/Y = 0 and you really don't know what page you are on for sure without me having to identify each page in the page body itself.
Does anyone know of a way using action script to have the URL of the page sent to flash and in turn use that URL to set the X and Y position of the slider to the appropriate X and Y of the button on the Nav Bar for the page the user is on?
I have heard of using flash.external.ExternalInterface but now for sure how this really works nor if I can assign it to a variable for reference inside the action script.
Any help would be appreciated greatly!!

The Flash Nav Bar is at the top of each page. But yes, when you click a button inside the flash nav bar it takes you away from your current page and loads a new one. I am trying to tell the swf file which page it is on so I can set the X and Y position of the slider.
You will have to excuse me if I am so noob that I loose any of your replies to this as just as Flash is new to me, so is the lingo.
Thank you for your help. I will research FlashVar but if you have any other ideas then I am open to them.

HTML+CSS conversion issue with nth-child() selector

Why doesn't Adobe Acrobat XI Pro convert the below HTML code correctly when I try to create a PDF from it?
I've simplified the actual code significanly in order to present the problem in its simplest possible form. The code below uses the CSS "counter" feature to modify <li> elements according to a specific pattern. This code enumerates and indents every third line in the progression 1,4,7,10,13, ...
In Firefox and Internet Explorer, this code is displayed correctly, but Acrobat XI Pro ignores the lines with the "nth-child(3n+1)" selector which contain directives to hide line enumeration on non-matching lines and to indent text on matching lines. Acrobat XI Pro instead displays line enumeration for all lines and doesn't indent text on any line, as if the two directives containing the "nth-child(3n+1)" selector were not present at all.
Is this a bug or is it an unsupported feature in Adobe Acrobat XI Pro?
Whichever the case, any suggestions on a not too labourious alternative method to achieve the same result?
As things are, I've been forced to resort to using the so called "poor man's nth-child selector" workaround (abouthalf.com/development/poor-mans-nth-child-selector-for-ie-7-and-8/), which requires manual specification of each line's content with ever-increasing code extension/repetition. It gets the job done, but in a very messy and time-consuming way, and it only works with pre-defined static content. In terms of size, the difference is that of less than 1kb CSS file size when using the nth-child() selector vs more than 75kb CSS file size when using the above mentioned workaround, for a 250 line predefined stylesheet.
Surely there has to be a better way to deal with this issue? Support for a core HTML/CSS feature that generates ordered layout patterns for line enumeration, indentation, etc, would seem like a top priority feature to support in a product such as Adobe Acrobat Pro, given its focus on page layout...
<html>
<head>
<style type="text/css">
body { margin: 75px 90px; }
li { list-style-type: none; counter-increment: listing; }
li:after { content: counter(listing); float: right; margin-right: -2em; visibility: visible; }
li:not(:nth-child(3n+1)):after { visibility: hidden; }
li:nth-child(3n+1) { text-indent: 25px; }
</style>
</head>
<body>
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
<li>Line Four</li>
<li>Line Five</li>
<li>Line Six</li>
<li>Line Seven</li>
<li>Line Eight</li>
<li>Line Nine</li>
<li>Line Ten</li>
</body>
</html>

Any suggestion what the issue and/or solution might be?

DROID RAZR issues with status bar - Winamp

When i pull the status bar all the way down it is really hard to get it to stay locked. It just keeps flying back up to its normal position. Winamp is also borked

If your Having Issue Linking too Winamp an other Stuff with it you might Give this A Look an see if can Help Ya:
You need to install both the Winamp for Android and the latest Winamp Media Player for your PC.
Step 1::
On your Android device, download Winamp for Android.
Step 2:
When you initially launch the application you'll see a "Winamp Help" screen. Click on the "Wi-Fi Sync" button and following the onscreen instructions. If you don't see the Winamp Help screen, simply launch Winamp and from the Home screen press the Menu button (hard button), go to "Settings" and "Enable wireless sync".
Step 3:
Make sure your PC and Android phone are on the same Wi-Fi network.
Step 4:
From your PC, download & install Winamp Standard (free) or Winamp Pro (premium). Version 5.6 or later is required. Please note that Wi-Fi sync with Winamp for Android will not work with "Winamp Lite". After launching Winamp you will be prompted to "Add Media to Library" or "Import from iTunes".
Step 5:
From the Media Library tab, select "Devices" in the navigation panel (left-hand side of screen).
Step 6:
Your Android device should now be visible in the "Discovered" area of the "Devices" view. If not, click the "Discover" button. You'll also want to be sure that your device is not in sleep mode.
The "Discovered" view only indicates available devices. To sync with your device, you will first have to attach it.
Step 7:
To attach a device, double click on your device icon (or single click on the attach overlay button). This will send a pairing notification to your device.
Step 8:
After clicking "Attach", a notification will be sent from the Winamp Media Player to your Android device asking you if you would like to allow Wi-Fi pairing. Click allow.
Step 9:
Once you have selected "Allow", you should now see your device in the "Attached" area of the "Devices" view. Additionally, you will see your device name appear under the "Devices" node in navigation panel.
(Note: You only have to pair your phone once. After initial pairing, your device should automatically appear in the attached state. You may be prompted to pair again after upgrading to a newer version of Winamp for Android).
At this point your Wi-Fi set-up is complete and you are ready for wireless syncing.
Step 10:
Once your device is "Attached", mouse over the device icon and click on the "Sync" overlay button. Alternatively, you can manually drag and drop files in your "Audio" library to your device (pictured below).
You also have the option of setting up your Preferences by right-clicking on your device or by going to Options >> Preferences >> Portables >> [Device Name]. Learn more about sync preferences and settings.

Issue with nav buttons in an image gallery

Hello,
I'm very new to flash and am using CS4/AS3. I have three image galleries of three images each. The images load dynamically from files on my computer. I've set it up so that when you click on a tab, you see a different set of three images.
The images load properly and it works to click forward to view them (that is, clicking on the image itself or the forward nav arrow). The issue I'm having is with the backward nav arrow. I keep geting an error message "Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found" when I click it.
The backward nav arrow works on the first gallery (egypt gallery) if I click that one first. But it doesn't work on the other two, and if I click back to the Egypt gallery after having been in the other two galleries, the back navigation no longer works in their either.
Basically, I want the user to be able to click on a tab to load the images, and then be able to click back and forth between the images. If they reach the last image in a gallery, I just want it to stop advancing and stay put on the final image, but for the user to be able to click backwards through them if desired. My code is pasted below (I'm sure it's more complicated than it needs to be... just a result of me being a complete novice!)
Any help or suggestions would be very much appreciated. Thanks so much.
stop();
//egypt gallery//
var myloader:Loader = new Loader();
var myrequest:URLRequest = new URLRequest("images1/egypt1.jpg")
var counter:Number=1
var total:int=3;
egypt_mc.addEventListener(MouseEvent.CLICK, cover);
function cover (e:MouseEvent):void{
object1_mc.x=414.15;
object1_mc.y=101.35;
object2_mc.x=520;
object2_mc.y=60;
object3_mc.x=630;
object3_mc.y=60;
left_mc.x=15;
left_mc.y=340;
right_mc.x=680;
right_mc.y=340;
stage.addChild(myloader);
myloader.x = 28;
myloader.y = 175;
myloader.load(myrequest);
myloader2.unload();
myloader3.unload();
myloader.addEventListener(MouseEvent.CLICK, shownextpicture)
function shownextpicture(e:MouseEvent):void{
counter = counter + 1;
if(counter<=total){
myrequest.url="images1/egypt"+counter+".jpg"
myloader.load(myrequest)
right_mc.addEventListener(MouseEvent.CLICK, forward)
function forward(e:MouseEvent):void{
counter = counter + 1;
if(counter<=total){
myrequest.url="images1/egypt"+counter+".jpg"
myloader.load(myrequest)
left_mc.addEventListener(MouseEvent.CLICK, back)
function back(e:MouseEvent):void{
counter = counter - 1;
if(counter>0){
myrequest.url="images1/egypt"+counter+".jpg"
myloader.load(myrequest)
//wikileaks gallery//
var myloader2:Loader = new Loader();
var myrequest2:URLRequest = new URLRequest("images2/wikileaks4.jpg")
var counter2:Number=4
var total2:int=6;
wiki_mc.addEventListener(MouseEvent.CLICK, cover2);
function cover2 (e:MouseEvent):void{
object1_mc.x=410;
object1_mc.y=60;
object2_mc.x=521.35;
object2_mc.y=102;
object3_mc.x=630;
object3_mc.y=60;
left2_mc.x=15;
left2_mc.y=340;
right2_mc.x=680;
right2_mc.y=340;
stage.addChild(myloader2);
myloader2.x = 28;
myloader2.y = 175;
myloader2.load(myrequest2);
myloader.unload();
myloader2.unload();
myloader2.addEventListener(MouseEvent.CLICK, shownextpicture2)
function shownextpicture2(e:MouseEvent):void{
counter2 = counter2 + 1;
if(counter2<=total2){
myrequest2.url="images2/wikileaks"+counter2+".jpg"
myloader2.load(myrequest2)
right2_mc.addEventListener(MouseEvent.CLICK, forward2)
function forward2(e:MouseEvent):void{
counter2 = counter2 + 1;
if(counter2<=total2){
myrequest2.url="images2/wikileaks"+counter2+".jpg"
myloader2.load(myrequest2)
left2_mc.addEventListener(MouseEvent.CLICK, back2)
function back2(e:MouseEvent):void{
counter2 = counter2 - 1;
if(counter2>4){
myrequest.url="images2/wikileaks"+counter2+".jpg"
myloader2.load(myrequest2)
//scientology gallery//
var myloader3:Loader = new Loader();
var myrequest3:URLRequest = new URLRequest("images3/scientology7.jpg")
var counter3:Number=7
var total3:int=9;
scien_mc.addEventListener(MouseEvent.CLICK, cover3);
function cover3 (e:MouseEvent):void{
object1_mc.x=410;
object1_mc.y=60;
object2_mc.x=520;
object2_mc.y=60;
object3_mc.x=629.95;
object3_mc.y=100.8;
left3_mc.x=15;
left3_mc.y=340;
right3_mc.x=680;
right3_mc.y=340;
stage.addChild(myloader3);
myloader3.x = 28;
myloader3.y = 175;
myloader3.load(myrequest3);
myloader.unload();
myloader2.unload();
myloader3.addEventListener(MouseEvent.CLICK, shownextpicture3)
function shownextpicture3(e:MouseEvent):void{
counter3 = counter3 + 1;
if(counter3<=total3){
myrequest3.url="images3/scientology"+counter3+".jpg"
myloader3.load(myrequest3)
right3_mc.addEventListener(MouseEvent.CLICK, forward3)
function forward3(e:MouseEvent):void{
counter3 = counter3 + 1;
if(counter3<=total3){
myrequest3.url="images3/scientology"+counter3+".jpg"
myloader3.load(myrequest3)
left_mc.addEventListener(MouseEvent.CLICK, back3)
function back3(e:MouseEvent):void{
counter = counter - 1;
if(counter>0){
myrequest.url="images3/scientology"+counter+".jpg"
myloader.load(myrequest)

You want to have the trace triggered when the problem occurs, so if the problem occurs when you use your back button, then you want to tie it in to that somehow. I don't know why you are trying to trace all that you show. The main thing you want to find out is why it is not finding the file, which will be defined by whatever value it is trying to use as a url. Try to focus on the data you need to see and not just anything that comes to mind.

Can't Edit Valid CSS/HTML page with DW

I have a page that contains valid HTML and CSS but it is VERY
hard to edit with DW-CS3. The formatting in design view looks
nothing like the page when displayed in a browser. I can always
edit the code directly via the code view but I have users that want
to update the site using the design view. Maybe I don't have DW set
up properly . Can someone take a look and let me know if this page
can be edited? Will it require CSS changes ? Thanks in advance for
any help.
Here's a link to the page: www.nysga.org/indexnew.html

Sure they do.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"josie1one" <[email protected]> wrote in message
news:fqk3pk$b8s$[email protected]..
>> Here's some links to screenshots - in the top gif
you'll notice that the
>> LOGO doesn't even display.
> To the best of my knowledge a background image will not
display in design
> view. Mine certainly don't.
>
> --
> Jo
>
>
>
>
> "tobgolflink" <[email protected]> wrote
in message
> news:fqk386$akv$[email protected]..
>> Maybe I wasn't clear with my original message. The
problem is that the
>> design
>> view doesn't format properly. I'll add some links to
screenshots of what
>> DW
>> looks like when I try to edit the page. You can try
it yourself. Save the
>> page
>> and the CSS locally and see what it looks like in
DW.
>> Here's some links to screenshots - in the top gif
you'll notice that the
>> LOGO
>> doesn't even display.
>> In the bottom gif you'll see the the right side
navigation is on the
>> left.
>>
http://www.nysga.org/top.gif
>>
http://www.nysga.org/bottom.gif
>>
>
>

Help please with nav bar!!

Please could somebody help me?! I am still new to Dreamweaver and im changing my spry menu bar to something that will work properly on other devices BUT ive replaced the menu bar with a pure css menu bar which is now working great on other devices except now when clicking on any of the buttons a new window is opened rather than the button just navigating to that page. How can i make it open other pages on the same window?
Ive only applied the new menu bar to the index page - www.milesfunerals.com

I'm not seeing what you describe in Firefox or IE on Windows7 or on my iPhone.
Did you already repair this, or am I missing something?
Each link I click on in all of the browsers mentioned brings me to the page as expected. No new window or tab is being opened.

Answer to support question on issue with title bar disappearing

I had the issue listed at:
https://addons.mozilla.org/en-US/firefox/addon/hide-caption-titlebar-plus-sma/versions/
The answer I found is at:
http:// www. askvg. com/how-to-enable-titlebar-text-and-icon-in-mozilla-firefox/#comment-1844783
Please update your support article with this answer. It worked well for me!
Take care,
Stephen
''inaccurate information hyperlinked''

No se escribir ingles. pero tengo el mismo problema que aqui se expone. ojala puedan solucionarlo. quisiera que hubiera una opcion para ocultar la barra de tareas.
I'm having the same issue and would really appreciate a solution. Thanks!

EMOD - HTML issues with Mailto functionality

Since the upgrade to version 1.3 I have just noticed a couple of things that did not appear within testing and I was wondering if anyone else has come up with anything similar or knows how I could possibly resolve these.
I have two issues
1 - When the user receives the email now the email is from [email protected]; on behalf of; $(Contact.Owner) can we remove [email protected] as we want the email to be as seen as sent from the contact owner and not a CRM then the owner.
2- Previously in my coding I was using the following mailto statement that includes reference to the contact owners email address now this functionality doesn't work.
a href="mailto:$%7BContact.Owner%20Email%20Address%7D">Please contact me about these strategies
Anyone have any idea's on how I can resolve this before open of business in 12 hours. Lodged a SR but thought that I would also lodge it here just incase someone has faced the same issues and can point me in the right direction.

JE,
Regarding 1 - I got notification from Customer Care that it was an issue on Tuesday but has since been resolved.
Description:
Some users opening emails sent through EMOD campaigns find that the 'From' field is populated with [email protected] instead of the desi! red alia s.
Our engineers are working to resolve this issue as quickly as possible.
Escalation Update
===================
3/30/2009 6:41:10 PM (GMT -07:00) MT - Dear Valued Customer, Thank you for contacting OnDemand eHub. Our engineers have restored service for the issue reported in this service request.
If you are still having the problem I'd notify Customer Care as I don't think it's by design.
cheers
Alex

HTML issue with Safari iOS

I have a personal web page that works great with Mac OS X Safari or Firefox but work correct with the iOS version of Safari. In the regular version when I click on a link to a picture, the picture displays until closed then goes back to the listing on the web page. The iOS version of Safari opens the picture but never goes back the web page to get the next picture. I use html statements like
You know your getting old when you get this <A HREF="xxx.jpeg"target="_blank">Bumper Sticker</a> from the insurance company.</a>
How can I get the iOS version of Safari to understand this statement?

> Shouldn't you have a space between the href and target attributes?
I just did a double check and the only space I see is between the "A" and the "HREF=...."

CR XI Issue with Stacked Bar Chart

I'm hoping this question is easy.
I'm having trouble creating a stacked bar chart.
I want to do a Bar Chart which will show one "Bar" for each Priority (Priority 1, 2, 3, 4 or 5) and then for each Priority divide out, by color, the Status (Submitted, Reviewing, Working, Testing....).
For example, let's say that there are 10 Priority 1 records. Of those 10, 5 have a Status of Submitted, 3 are being Reviewed and 2 are being Tested. Then the Priority 1 bar should show a count of 10 which is comprised of 3 colors which will correspond to the 3 Statuses that make up the 10 Priority 1 records.
I can't get the Stacked Bar Chart to display this correctly.
In the Chart Expert, the Data Tab says:
-- On change of: Priority - Ascending
-- Show Value(s): Count of Status
When I run the CR, it get's the Priority correct and I see the total for each Priority. But it does not then take each Bar and color code by Status.
Any ideas how to get it to do that?
Thanks,

Hi,
You should have in On change of field a sub group as well.
For stacked bar charts it is necessary to have a group and a sub group fields in on change of section.
Say you have the month.
no of priority1 in jan etc.
Hope that helps!!
Thanks
-Azhar
Edited by: Azhar on Aug 4, 2009 8:23 AM

Css layout issue with IE

Hi Folks,
I've tried two different things in my stylesheet and each
produces an odd error that I'm not sure what the deal is. I'm
working with a wraper, leftnav and content area. when I do this
#leftWrap
width: 190px;
float: left;
clear: both;
#content
margin-left: 140px;
border-left: 1px solid gray;
padding: 1em;
max-width: 500px;
I end up with my individual products clearing the left menu
and showing up way down on the page in IE
an example product page is:
http://pinkgolftees.com/p-13-tatoo-golf-jordyn-ladies-high-performance-poly-dri-polo-shirt .aspx?skinid=9
when I change my stylesheet the product looks fine, but then
my list of manufacturers clears the left side. here's what I've
changed to:
#leftWrap
width: 190px;
float: left;
clear: both;
#content
margin-left: 140px;
border-left: 1px solid gray;
padding: 1em;
width: 590px;
sample manufacturer page is here:
http://pinkgolftees.com/m-3-tattoo-golf.aspx?skinid=9
I'm not sure what the deal is and why I can't have both work
or why they produce different results. can anyone shed some light
for me?
thanks
Mark

OK, I figured out a way to do this. It was the float property
that was causing the grief. So, I changed this:
float: right;
to this:
margin-left: auto;
margin-right: 0px;
Which fixed it up.
Peter.

Issue with space bar

Im using Mountain Lion, and when I am typing for example something like "sportia vois " (and at the end click the space bar) the text changes to "sportif vois" and the cursor moves in front of the letter "v"...
What's going on?

I may be wrong but it sounds like an auto correct thing.
You may find this article helpful: http://macs.about.com/b/2012/08/13/taming-automatic-spelling-correction-in-lion- and-mountain-lion.htm

CSS/HTML issue with nav bar

Similar Messages

Maybe you are looking for