I made a simple 2 tier navigation menu with only one dropdown menu. I've added a 🢓 entity to that 2 tier dropdown menu and it's enlarging its containing element. There's no margin/padding/border that causes this problem. Is there a way to fix that without removing the HTML entity?
nav#menu ul {list-style-type: none; position: relative; padding: 0;}
nav#menu ul li {float: left;width: 190px;}
nav#menu ul li a {
text-decoration: none;
display: block;
text-align: center;
padding: 1rem 0;
background-color: cornflowerblue;
color: white;
border-right: 2px solid white;
border-top: 2px solid white;
font-family: sans-serif;
font-weight: bold;
}
/* appears when floating */
nav#menu ul ul {
display: none;
position: absolute;
top: 100%;
}
nav#menu ul ul li a{
display: block;
text-decoration: none;
text-align: center;
background-color: cornflowerblue;
color: white;
padding: 1rem 0;
font-family: sans-serif;
font-weight: bold;
}
nav#menu ul ul li {
float: none;
width: 190px;
padding: 0;
}
nav#menu ul li:hover > ul {
display: block;
}
nav#menu > ul::after {
content: "";
display: block;
clear: both;
}
.level2 li {
border-top: 2px solid white;
}
nav#menu a:hover, nav#menu a:focus{background-color:rgb(45, 114, 241);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Navigation Menu</title>
</head>
<body>
<nav id="menu">
<ul>
<li>Home</li>
<li>Menu 🢓
<ul class="level2">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Products</li>
<li>Help</li>
<li class="lastitem">About</li>
</ul>
</nav>
</body>
</html>
Yes, there is. The enlargement is caused by the glyph for the character entity being drawn from a different font, with different font metrics.
What I recommend doing is putting the entity reference in a span, and giving the span a minimal line-height. Something like this:
nav#menu ul {list-style-type: none; position: relative; padding: 0;}
nav#menu ul li {float: left;width: 190px;}
nav#menu ul li a {
text-decoration: none;
display: block;
text-align: center;
padding: 1rem 0;
background-color: cornflowerblue;
color: white;
border-right: 2px solid white;
border-top: 2px solid white;
font-family: sans-serif;
font-weight: bold;
}
nav#menu ul li a span { /* <== the added rule */
line-height:1px;
}
/* appears when floating */
nav#menu ul ul {
display: none;
position: absolute;
top: 100%;
}
nav#menu ul ul li a{
display: block;
text-decoration: none;
text-align: center;
background-color: cornflowerblue;
color: white;
padding: 1rem 0;
font-family: sans-serif;
font-weight: bold;
}
nav#menu ul ul li {
float: none;
width: 190px;
padding: 0;
}
nav#menu ul li:hover > ul {
display: block;
}
nav#menu > ul::after {
content: "";
display: block;
clear: both;
}
.level2 li {
border-top: 2px solid white;
}
nav#menu a:hover, nav#menu a:focus{background-color:rgb(45, 114, 241);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Navigation Menu</title>
</head>
<body>
<nav id="menu">
<ul>
<li>Home</li>
<li>Menu <span>🢓</span>
<ul class="level2">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Products</li>
<li>Help</li>
<li class="lastitem">About</li>
</ul>
</nav>
</body>
</html>
I loaded your code up and opened it in a browser, and all of the menu items are the same size. But yes, you can wrap the arrowhead in a span tag, assign it a class, and customize it to either shrink the font-size or set the line-height or whatever you want really.
I think there's a quite a few different ways you can fix this.
Related
Hellow.
I am creating a responsive menu with HTML5 and CSS. To do that, I create the navigation menu for desktop computers and then I use a checkbox with a lavel to show the responsive menu (I mean, show menu).
This is the code:
Code Note:(The image is 350px width x 100px heigth):
body {
margin: 0px;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
/*Hacer que la imagen no se mueva */
#img-nav {
padding-top: 0px !important;
}
/*Create a horizontal list*/
li {
display: inline-block;
float: left;
}
/*Style for menu links*/
li a {
display: block;
min-width: 200px;
height: 70px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
padding-top: 30px;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles*/
#media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
#img-nav {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<nav>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>
<a href="#" id="img-nav">
<img src="images/nav/logoplacehold.png" alt="">
</a>
</li>
<li>Inicio
</li>
<li>
Aula Virtual
<ul class="hidden">
<li>Test Online
</li>
<li>Test DGT
</li>
</ul>
</li>
<li>Resultado Teórico
</li>
<li>Nuestros Vehículos
</li>
<li>Permisos
</li>
</ul>
</nav>
</body>
</html>
The problem:
I want to have a full width menu (in PC) but I don't know how to do it.
Thank you all!
Woops! I messed up. Surround the ul in a div in the HTML. Set the div's z-index to something higher than 0, position to fixed, and width to 100%.
Remove the background from your a tag and put it on ul tag then add css on it width:100%. This one works fine on me.
body {
margin: 0px;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
width:100%;
background: #2f3036;
}
/*Hacer que la imagen no se mueva */
#img-nav {
padding-top: 0px !important;
}
/*Create a horizontal list*/
li {
display: inline-block;
float: left;
}
/*Style for menu links*/
li a {
display: block;
min-width: 200px;
height: 70px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
text-decoration: none;
padding-top: 30px;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles*/
#media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
background: #2f3036;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
background: #2f3036;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
#img-nav {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<nav>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>
<a href="#" id="img-nav">
<img src="images/nav/logoplacehold.png" alt="">
</a>
</li>
<li>Inicio
</li>
<li>
Aula Virtual
<ul class="hidden">
<li>Test Online
</li>
<li>Test DGT
</li>
</ul>
</li>
<li>Resultado Teórico
</li>
<li>Nuestros Vehículos
</li>
<li>Permisos
</li>
</ul>
</nav>
</body>
</html>
Why is the logo here having a slight overlap at the bottom portion? The CSS and HTML are given below. I've tried overriding the css properties respective to the logo <li> element. but it didn't work.
working fiddle
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<ul id="nav">
<li>WORK</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li class="logo">
<a href="#" style="padding:0;">
<img src="logo.png" />
</a>
</li>
</ul>
</div>
</body>
</html>
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: right;
text-align: center;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
Depends on what you're trying to accomplish.
http://jsfiddle.net/66eKE/3/
#nav {
list-style-type: none;
margin: 0;
padding: 0;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
background: #000;
float: left;
width: 100%;
}
#nav li {
margin: 0;
padding: 0;
width: 19%;
text-align: center;
display: inline-block;
float: right;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
}
#nav a:link, #nav a:visited {
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
This makes it so you can resize your logo to whatever you want. The menu item may be floating outside the div. In that case you either need to float the parent, hide the parent with overflow, or clear the float.
Refactor
I refactored a few things such as the drop shadow and background color on the parent. This allows the majority of the effect to be dependent on the parent div rather than the individual items. I'm only assuming here though. Do you have a photoshop mockup of what you want? Gives us a better idea of what you need for CSS.
OK this is my piece of CSS code .
So I'm trying to replace the white color from the ul(unordered list) with the black color when I'll be hovering over it.Want to mention that I want the text to be black,when I will hover the box of a li and not the anchor.Thanks.
_____________________________________________________________________________________
body {
width: 1000px;
font-family: Arial;
margin-left: auto;
margin-right: auto;
line-height: 135%;
}
.menu ul {
list-style-type: none;
text-align: center;
background-color: black;
margin-right: auto;
margin-left: auto;
}
.menu ul li {
display: inline-block;;
padding: 10px;
border-style: solid;
border-width: 0 1px 0 1px;
border-color:white;
margin-left:0;
margin-right:-5px;
}
.menu ul li:hover{
background-color: white;
color:black;
}
.menu a {
text-decoration: none;
color:white;
}
.menu a:hover{
color:black;
}
___________________________________________________________________________
// HTML
<!DOCTYPE html>
<html>
<head>
<title>WORKSPACE</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<meta charset="UTF-8">
</head>
<body>
<div class="menu">
<ul>
<li>Home</li>
<li>Courses</li>
<li>Groups</li>
<li>Teachers</li>
<li>Students</li>
<li>Resources</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Instead of making the rule to hover over the a element, change the hover state to the li and target the link.
http://jsfiddle.net/LUguq/
CSS
.menu li:hover a{
color:black;
}
Working Demo Here
just add:
.menu ul li:hover a {
color: black;
}
As you can see in JSFiddle
I have searched lots of question in this forum and it doesnt seems to help. I'm trying to center my navigation bar however despite following most of the answers text-align = center; doesn't work for me.
HTML code in ASP.NET:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 8]>
<script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Login</li>
<li>Report</li>
<li>Recent cases</li>
<li>About</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
CSS Code:
body {
font-family: helvetica, arial, sans-serif;
background: #e3e3e3;
text-align: center;
}
/* MENU */
#nav {
text-align: center;
background: #e5e5e5;
float: left;
margin: 0; padding: 0;
border: 1px solid white;
border-bottom: none;
}
#nav li a, #nav li {
text-align: center;
float: left;
}
#nav li {
text-align: center;
list-style: none;
position: relative;
}
#nav li a {
text-align: center;
padding: 1em 2em;
text-decoration: none;
color: white;
background: #292929;
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0; margin: 0;
}
#nav li:hover > ul {
display: block;
}
#nav li ul li, #nav li ul li a {
float: none;
}
#nav li ul li {
_display: inline; /* for IE6 */
}
#nav li ul li a {
width: 150px;
display: block;
}
/* SUBSUB Menu */
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
}
#nav li ul
Indeed the most easiest way is to use text-align: center;. The problem you encounter is that <li> tags are block level elements. Thus it is not possible to apply text-align (applies only on inline elements) on the outer <ul> element in order to center the inner <li> elements. Therefore you have to tell the <li> tags first to behave like inline elements by applying the display property:
Markup:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Style:
ul {
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline-block; // or display: inline;
}
Here is my working example on jsfiddle: http://jsfiddle.net/7MKdk/
Try This:
#nav{
position:absolute;
left:30%;
}
you can remove float
Is this the part you mean?
#nav li a, #nav li {
text-align: center;
float: left;
}
By the way, try removing the float: left part. Your code almost drove me crazy. You should add IDs and classes.
Try margin:auto with exact width and remove float:left
jsfiddle link
At first float:left is needed to calculate exact width of ul. And then we need to make float:none to make use of margin:auto;
Try this:
#nav{
margin-left:10px; (Increase the px until the nav reach center)
}
This pure css dropdown menu works fine in Firefox, Chrome, Safari and Opera, but just shows the list in IE9. It's assumed that it wouldn't work in older versions of IE. It was my understanding IE9 solved the hover, etc. problems with dropdown menus. How do I fix this?Thanks.
The pure CSS is:
body {
background: ;
font-family: Arial Black, Helvetica, sans-serif; font-size: 12px; line-height: 16px;
}
nav {
margin: 0px auto;
text-align: center;
}
nav ul ul {
display: none;
width: 130px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 10px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #377C37;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 5px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5F6975; border-radius: 0px 0px 10px 10px; padding: 0px;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #;
border-bottom: 0px solid #; position: relative;
border-radius: 0px 10px 0px 0px;
}
nav ul ul li a {
padding: 3px 30px;
color: #fff;
}
nav ul ul li a:hover {
background: #3BA110;
border-radius: 0px 0px 0px 0px;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
border-radius: 0px 10px 10px 10px;
}
The HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GRH Multi-Level</title>
<meta name="Author" content="George R. Hozendorf" />
<link rel="stylesheet" type="text/css" href="../down_menu_lawsart.css" />
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li><a>Portfolios ▼</a>
<ul>
<li><a>Horses ►</a>
<ul>
<li>Horses I</li>
<li>Horses II</li>
<li>Horses III</li>
<li>Horses IV</li>
<li>Horses V</li>
<li>Horses VI</li>
<li>Horses VII</li>
</ul>
</li>
<li><a>Dogs ►</a>
<ul>
<li>Dogs I</li>
<li>Dogs II</li>
</ul>
</li>
<li><a>People ►</a>
<ul>
<li>People I</li>
<li>People II</li>
</ul>
</li>
<li>Stills</li>
</ul>
</li>
<li>Order</li>
<li>Contact Me</li>
</ul>
</nav>
</body>
</html>
I was formatting your code and I realized that you missed the closing </ul> before the </nav>. Verify that
I tried your code and with the "Modernizr Library" add/include to your code everything works fine. Even using IE8 http://modernizr.com/
<script type="text/javascript" src="modernizr.js"></script>
You have used html5 element which doesn't support ie old version. If you want to support html5 element in ie older version then just used following js in your html file withing head tag.
<script type="text/javascript">
document.createElement("nav");
</script>