I am building a css drop down menu' with sub menu that I found online. I have a strange issue. If I don't specify charset everything is working fine, see screenshot of resize window on Chrome:
Menu OK Thai characters scrambled
Then I add <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
and this is what I get:
Thai characters OK but manu' strange
You can try yourself, here the code, try to remove the chareset line and will be OK:
<html>
<head>
<meta http-equiv="Content-Language" content="en-th">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ice cream</title>
<style>
.all {width:100%;text-align:center}
.one {margin:0 auto;display:inline-block;font-weight:bold;font-family:times new roman,serif;font-size:16px}
a:hover {text-decoration:underline}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
}
ul li {
display: block;
position: relative;
float: left;
width:144px;
background: #240F0A;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 0.5em;
text-decoration: none;
white-space: nowrap;
color: #BCA363;
}
ul li a:hover { background: #402015; }
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
z-index:2;
}
li:hover li { float: none; }
li:hover a { background: #402015; }
li:hover li a:hover { background: #402015; }
.main-navigation li ul li { border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
</style>
</head>
<body bgcolor="#240F0A" text="#FFFFFF" bottommargin="0">
<div class="all">
<div class="one">
<ul class="main-navigation">
<li>ไอศครีม</li>
<li>HOME</li>
<li>ABOUT US
<ul>
<li>The Company</li>
<li>History
<li>Contacts
<ul>
<li>Email</li>
<li>Address</li>
<li>Location</li>
<li>All contacts</li>
</ul></li></ul></li>
<li>ICE CREAM
<ul>
<li>Sherbet</li>
<li>Italian Gelato</li>
<li>Thai Ice Cream</li>
<li>Japanese cream</li>
<li>Classic ice cream</li>
<li>Promotion</li>
<li>Flavors
<ul>
<li>Sherbet Flavors</li>
<li>Gelato Flavors</li>
<li>Thai Flavors</li>
<li>Japanese Flavors</li>
<li>Classic Flavors</li>
<li>All Flavors</li>
</ul></li></ul></li>
<li>About Us</li>
<li>About Us2</li>
<li>About Us3</li>
<li>About Us4</li>
</ul>
</div>
</div>
</body>
</html>
How can avoid that empty space? This happen on Chrome and all Iphone.
Well it's happening because of the line height of your font. You can easily fix this by giving that particular hyperlink to line height of 1em or giving all the anchor tag to same line-height like below -
ul li a {
line-height: 1em;
}
you can check the image here
It's the font that throwing it off. If you inspect the element of the list items you'll see that the first item is 144x36 and the rest are 144x34.
you can target just the first li with something like
.one li:first-child {
font-size: 15px;
}
Related
I know there are 400 of these threads out there but it seems like everyone's code is a little bit different: I've set up my CSS so that a blue bar appears every time you hover over a page in the navigation, and when that link page is clicked, the blue bar stays over it. I CAN NOT get it to stay over the parent page when I click on one of the links with a drop-down menu. I'm able to get a blue bar to appear inside of the dropdown (lol) but can not get it to stay with the parent at all. I've tried all the ancestor tips, all the menu-current tips, i'm just at wits end. I would be eternally grateful for any help.
/*** ----------------------------CHANGE THE COLOR OF THE SQUARES UNDERNEATH THE NAVIGATION BAR HERE ------------------------------- ***/
nav ul li a:hover, nav ul li a.current {
border-bottom: 5px solid #00BCF2;
color: #00BCF2;
}
/*** THIS WILL PROBABILY GET US TO WHERE WE WANT TO BE WITH ADDING AND HOVERING THE PARENT LINK
nav ul li:hover > a, .current-menu-ancestor > a, .current-menu-parent > a {
background-color: #536f9e !important;
color: #ffffff !important;
}
***/
/*** add publications from box site level 1 here ***/
/**** Dropdown ****/
/*** ----------------------------- CHANGE THE LOGO OF THE DROPDOWN ARROW ------------------------------ ***/
/*** ----------------------------- CHANGE THE height OF THE DROPDOWN menu ------------------------------ ***/
.dropdown{
padding: 14px 16px 37px 10px;
background: url('images/dropdown_icon.png') no-repeat 99% 21px;
}
.dropdown:hover{
border-bottom: none;
}
nav ul ul{
display: none;
margin: 0;
position: absolute;
background-color: #000;
z-index: 1;
}
nav ul li:hover ul{
display: block;
opacity: 0.9;
}
nav ul li ul li{
margin: 0;
}
/*** ----------------------------- CHANGE THE WIDTH OF THE DROPDOWN MENU ------------------------------ ***/
nav ul li ul li a{
margin: 0;
padding: 5px 10px;
width: 100px;
}
/*** ----------------------------- CREATE BLUE BARS INSIDE OF DROPDOWN ------------------------------ ***/
nav ul li:hover ul li a:hover, nav ul li:hover ul li a.current{
border-bottom: none;
}
As Requested, The HTML I have for my beginning --> header is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XXXXXX</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
$(this).addClass('current');
}
<!--END OF HEADER -->
});
});
</script>
</head>
<body>
<div id="wrapper">
<!--========================== L O G O & N A V B A R ============================-->
<header>
<div id="logo">
<img src="images/xylophone.png" alt="YouRock" />
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Founders</li>
<li>Pipeline
<ul>
<ul>
<li>Timeline</li>
<li>Phase I / II</li>
<li>PreClinical</li>
</ul>
</ul>
</li>
<li>Publications
<ul>
<ul>
<li>Coronary Artery Disease </li>
<li>Heart Failure</li>
</ul>
</ul>
</li>
<li>contact</li>
</ul>
</nav>
</header>
I'm working through a PSD to HTML5/CSS3 course on Udemy, and my results aren't rendering like those shown in the screencast. I'd post comparison screenshots if SO didn't require a rep of 10, but basically the author's version renders the list items horizontally, without bullets, while mine keep rendering vertically, with bullets.
HTML:
<html>
<head>
<title>My Website</title>
<link href="styles/normalize.css" rel="stylesheet" type="text/css" media="screen">
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<header>
<div class="container clearfix">
<a href="/" title="Return to Home" id="logo">
<img src="images/logo.gif" alt="Logo">
</a>
<nav>
<ul>
<li>About
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
<!-- end container -->
</header>
</body>
</html>
CSS:
/* Navigation Styling */
nav ul {
margin: 0;
padding: 0;
float: right;
}
nav ui li {
list-style: none;
float: right;
}
header nav ul li a {
display: block;
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 20px;
border-left: solid 1px #333;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* For IE6/7 (trigger hasLayout) */
}
I've tried switching display in header nav ul li a to inline, which would seem to be more logical for a horizontal list, but that doesn't change anything. Any ideas?
You have a syntax error in your css, just replace nav ui li by nav ul li.
I want to create a drop down menu but I faced some problem:
Actually I want to create it without making <ul> tag inside the <li> tag
so the code :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a>Coffee</a></li>
<ul><li><a>Coffee 2</a></li></ul>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
</body>
</html>
and the css code :
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
z-index: 1;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
You can see that Coffee 2 is not dropdown it should be with coffe menu please help me
without making the <ul> tag inside the <li>.
jsbin link : http://jsbin.com/evasof/1/edit
Here you go:
<ul>
<li class="dpdwn"><a>Coffee</a><div><a>Coffe 2</a></div></li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
extra css:
.dpdwn div{
display: none;
}
.dpdwn:hover div {
display:block;
}
Demo
But in my opinion you should use a ul inside that li.
Here's an example:
<ul>
<li class="dpdwn"><a>Coffee</a>
<ul>
<li><a>Coffe 2</a></li>
</ul>
</li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
That same extra css:
.dpdwn ul{
display: none;
}
.dpdwn:hover ul {
display:block;
}
Demo2
Assuming your HTML structure above, we can see that when we try and validate it at the W3C Validator that this structure is INVALID, and not accepted. You can see this from the provided screenshot below...
Beyond the fact that what you want is invalid markup, CSS-wise it is also impossible to handle the hover state in order to make your sub-menu appear. There is no selector in the current standard that allows you to select a sister sibling while hovering over a sibling.
My suggestion is to follow how it has been done for ages, what is valid markup, and how it will be for the foreseeable future, and nest the ul inside the li.
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a>Coffee</a>
<ol><a>Coffe 2</a></ol></li>
<li><a>Tea</a></li>
<li><a>Milk</a></li>
</ul>
</body>
</html>
you can use <ol> tag within <li> tag see above example
You could use dl and dt and style them accordingly but I'm afraid at that point you're just trading one tag for another. As w/ the other answers, why are you trying to avoid using ul and li. Creating dropdown menus is something that there tags are very good at.
<dl>
<dt>Foo</dt>
<dt>Bar</dt>
</dl>
I use the following HTML program for creating Horizontal menu bar with horizontal sub menu.It was working fine in Fire Fox and Chrome but it doesn't work in IE.So What are the changes are need changes in this program?
<html>
<head>
<style>
/* Targeting both first and second level menus */
#nav li {
list-style:none;
float: left;
position: relative;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
top:150px;
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: absolute;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
</style>
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>
Products
<ul class="child">
<li>Hard Drives</li>
<li>Monitors</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Random Equipment</li>
</ul>
</li>
<li>
Services
<ul class="child">
<li>Repairs</li>
<li>Installations</li>
<li>Setups</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
do you use modernizr? or have available classes for legacy IE browsers? You might want to try messing with separate styles and/or stylesheets for IE.
Or
You can switch your navigation from floated blocks to "inline" elements, which older browsers such as IE6 that don't work well with floats will recognize.
Or
If you want to stick with floats then make sure you are setting a "width" for any floated element.
Chris Coyier has a nice article on floats that contains a section labeled: "Problems with Floats"
http://css-tricks.com/all-about-floats/
Well for some reason I can't even get the fiddle site to work at all in IE8...? But one problem I noticed in your CSS, is opacity. IE8 doesn't support the opacity property. To change the opaqueness of elements in old IE, use filter:alpha(opacity=75); Note, the value 75 is a whole number from 1 to 100, not a decimal like with the opacity property. I wish I could be more help, but I can't even see what the problem is in the fiddle...
Most CSS vertical menus have their second level and third layer menus popping out right beside the 1st level menu. This creates a space if you go to the third option in the first level menu. The second level menu from that third option is positioned only as high as the third menu first level item. Thus, there's a space above the second level menu, all the way up to the first level menu first selection.
How would I go about making it so that the second level menu that pops out would be at the highest first level menu selection?
I made a graphic to further iterate this.
http://i.imgur.com/v1UIk.png
http://i.imgur.com/weEwn.png
In the first image, when you hover over Purchase, the menu pops out to the side. Instead, I want the menu to pop out above, at the Products area. I want it so that even if I go to Products, Purchase, Support, Downloads...etc, that second level menu ALWAYS pops out at the top of the menu/Products.
In my actual menu, each level will only have four options, so there will be no issues hovering over and keeping the menu active.
Does anyone have a link or an idea on how to get this done?
Thanks - and I hope I explained it well..lol.
EDIT:
*I took this off of a website, I realize there's a ton of syntax errors like missing quotes and such. I'm just trying to get it to work before I fix anything and refine it.
CSS
#menu ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
#menu ul li {
position: relative;
}
#menu li ul {
position: absolute;
left: 149px; /*Set 1px less than menu width */
top: 0;
display: block;
}
#menu li:hover ul {
display: block;
}
#menu li:hover>ul {
visibility:visible;
}
#menu ul ul {
visibility:hidden;
}
/* Fix IE. Hide from IE Mac \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */
/* Make-up syles */
#menu ul, li {
margin: 0 0 0 0;
}
/* Styles for Menu Items */
#menu ul a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Hover Styles */
#menu ul a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* Sub Menu Styles */
#menu li ul a {
text-decoration: none;
color: #77F;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Sub Menu Hover Styles */
#menu li ul a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* Icon Styles */
#menu ul a.submenu {background:#fff url("r_arrow.gif") no-repeat right; }
#menu ul a.submenu:hover {background:#f9f9f9 url("r_arrow.gif") no-repeat right;}
html:
<div id=menu>
<ul id=menuList>
<li>Products
<ul>
<li>All</li>
<li>CodeCharge</li>
<li>CodeCharge Studio</li>
<li>DemoCharge Studio</li>
<li>Comparison<ul>
<li>CodeCharge Studio</li>
<li>DemoCharge Studio</li>
</ul></li>
</ul>
</li>
<li>Downloads
<ul>
<li>CodeCharge</li>
<li>CodeCharge Studio</li>
<li>DemoCharge Studio</li>
</ul>
</li>
<li>Support
<ul>
<li>Support</li>
<li>Forums</li>
<li>KB</li>
</ul>
</li>
<li>Purchase
<ul>
<li>Store</li>
<li>Resellers</li>
<li>Affiliate</li>
</ul>
</li>
<li>Company
<ul>
<li>About Us</li>
<li>Contact Us</li>
<li>Press Releases</li>
</ul>
</li>
</ul>
</div>
IE Fix:
<script type="text/javascript">
startList = function() {
// code for IE
if(!document.body.currentStyle) return;
var subs = document.getElementsByName('submenu');
for(var i=0; i<subs.length; i++) {
var li = subs[i].parentNode;
if(li && li.lastChild.style) {
li.onmouseover = function() {
this.lastChild.style.visibility = 'visible';
}
li.onmouseout = function() {
this.lastChild.style.visibility = 'hidden';
}
}
}
}
window.onload=startList;
</script>
In your CSS, change #menu ul to position: relative:
#menu ul
{
margin: 0;
padding: 0;
position: relative;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
And remove the relative positioning from #menu ul li:
#menu ul li
{
/*position: relative;*/
}
This makes it a little difficult to get over to the subitems, though.
Here's a demo: http://jsfiddle.net/KvaTC/
If you give each ul that is a submenu an id, then you can specify in CSS for that ID a negative top value of whatever is necessary for each one. I would recommend setting a height value for the li tags concerned for two reasons, it will tell every browser to render them at the same height and you can calculate the negatives required - no javascript required to do this.
So, take out the top:0 in the following code block so it is like this:
#menu li ul {
position: absolute;
left: 149px; /*Set 1px less than menu width */
display: block;
}
Then set a height for each li concerned:
#menu ul li {
position: relative;
height:30px;
}
Then for each submenu ul give an id (I show the first one as an example):
<ul id=menuList>
<li>Products
<ul id="submenu1">
<li>All</li>
<li>CodeCharge</li>
<li>CodeCharge Studio</li>
<li>DemoCharge Studio</li>
<li>Comparison<ul>
<li>CodeCharge Studio</li>
<li>DemoCharge Studio</li>
</ul></li>
</ul>
</li>
Then the CSS:
#submenu1 {
top:0px;
}
Each subsequent id would then need negative values for whatever is required for them to be at the top. so for the second, now they have a definite height of 30px would be:
#submenu2 {
top:-30px;
}
JSFiddle: http://jsfiddle.net/Psyrus/C3xqX/