• Locked
3 replies [Last post]
Sun, 2015-06-07 06:55
jollybee
Offline
newbie
China
Last seen: 4 years 51 weeks ago
China
Timezone: GMT+7
Joined: 2015-06-07
Posts: 2
Points: 3

hi,guys. I don't know why i went wrong
>First i have a code in html to make menubar

<!DOCTYPE html>
<html>
<head>
	<title> Menu Bar</title>
	<meta charset="utf-8"/>
	<link rel=”stylesheet” type=”text/css”  href=”css/style.css”>
</head>
<body>
<nav id="top-nav">	
<div id="menubar">
    <ul id="menus">
         <li><a href='LINK'>DropDownName1</a></li>
         <li><a href='LINK'>DropDownName2</a></li>
         <li><a href='LINK'>DropDownName3</a></li>   
         <li><a href='LINK'>TabName4</a>
             <ul>
                <li><a href='LINK'>DropDownName1</a></li>
                <li><a href='LINK'>Drop<code><code>DownName2</a></li>
                <li><a href='LINK'>DropDownName3</a></li>
             </ul>
         </li>
    </ul>
  </div>
  </nav>
 
  </body>
  </html>

SECOND: I made a css file and saving its name "sytle.css" to style for menubar decoration

 
#menubar {
background-color: transparent;
				width: 840px;
				color: #424338;
					margin: 0px;
					padding: 0;
					position: relative;
					border-top:0px solid ##8C001A;
					height:35px;
			} 
 
			#menus {
				margin: 0;
				padding: 0;
			} 
 
			#menus ul {
				float: left;
				list-style: none;
				margin: 0;
				padding: 0;
			} 
 
			#menus li {
				list-style: none;
				margin: 0;
				padding: 0;
					border-left:0px solid #1A6680;
					border-right:0px solid #1A6680;
					height:auto;
			}
			#menus li a, #menus li a:link, #menus li a:visited {
				color: #FFFFFF; /* This changes the text color of visited links. */
				display: block;
			   font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 5;  
					   /* change margin value to 0 if you want no space between tabs */
					   /* change 14 to another number to increase or reduce font size */ 
				padding: 9px 12px 10px 12px;
					text-decoration: none;
			} 
 
			#menus li a:hover, #menus li a:active {
				background: #424338; /* This is the main menu background color when a user hovers. */
				color: #FFFFFF; /* This changes the text color. */
				display: block;
				text-decoration: none;
					margin: 0;
				padding: 9px 12px 10px 12px;       
			} 
 
			#menus li {
				float: left;
				padding: 0;
			} 
 
			#menus li ul {
				z-index: 9999;
				position: absolute;
				left: -999em;
				height: auto;
				width: 160px;
				margin: 0;
				padding: 0;
			} 
 
			#menus li ul a {
				width: 140px;
			} 
 
			#menus li ul ul {
				margin: -25px 0 0 160px;
			} 
 
			#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
				left: -999em;
			} 
 
			#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li 
 
			li.sfhover ul, #menus li li li.sfhover ul {
				left: auto;
			} 
 
			#menus li:hover, #menus li.sfhover {
				position: static;
			} 
 
			#menus li li a, #menus li li a:link, #menus li li a:visited {
				background: #424338; /* This is the background color for the drop down menu. */
				width: 120px;
				color: #FFFFFF; /* This changes the text color. */
				display: block;
				font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;  
						   /* change 14 to another number to increase or reduce font size */ 
				margin: 0;
				padding: 9px 12px 10px 12px;
					text-decoration: none;
			z-index:9999;
			border-bottom:0px solid #1A6680;
			} 
 
			#menus li li a:hover, #menusli li a:active {
				background: #424338; /* This is the background color for the drop down menu when a user hovers. */
				color: #FFFFFF; /* This changes the text color. */
				display: block;     margin: 0;
				padding: 9px 12px 10px 12px;
					text-decoration: none;
			}

But when i run the result look like this picture

AttachmentSize
Untitled.jpg99.32 KB
Top
Tags:
Sun, 2015-06-07 07:06
#1
jollybee
Offline
newbie
China
Last seen: 4 years 51 weeks ago
China
Timezone: GMT+7
Joined: 2015-06-07
Posts: 2
Points: 3

as the tuturial it's result

as the tutorial the result look like this . And you know, i think my menubar was decorated with the color, margin in good shape but it was appeared in stupid shape , just like a word in simple blue color. I don't know why. Please explain it for me. thanks a lot
http://helplogger.blogspot.com/2014/02/add-a-neat-css-dropdown-menu-in-blogger.html

Top
Tue, 2015-06-09 12:17
#2
hielkio
hielkio's picture
Offline
newbie
Last seen: 4 years 51 weeks ago
Timezone: GMT+2
Joined: 2015-06-08
Posts: 3
Points: 3

You used the wrong quotation

You used the wrong quotation marks Tongue

Instead of
<link rel=”stylesheet” type=”text/css”  href=”css/style.css”>

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

The ones you used are 'Curly' quotations and don't work ... Hope I helped you out Party

I think it has to do with the editor you use.. Personally I prefer Notepad++

Top
Tue, 2015-06-09 17:19
#3
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 13 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9759
Points: 3841

Nice catch

@hielkio

I can't imagine using a text editor that would do that to me. Sad Must be a MSFT product.

@ the OP

Definitely get a decent text editor. I used notepadII and a few others maybe a dozen years ago. Most are very good editors. However, I had discovered Emacs and have not found anything that can match it in power and versatility.

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked