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
Attachment | Size |
---|---|
Untitled.jpg | 99.32 KB |
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
You used the wrong quotation
You used the wrong quotation marks
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
I think it has to do with the editor you use.. Personally I prefer Notepad++
Nice catch
@hielkio
I can't imagine using a text editor that would do that to me. 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