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
Related
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.
I encountered this problem when trying to apply styles to the hover state of a link.
I couldn't quite come up with the right phrase to google this problem so apologies if this is a duplicate post. I might also add that I am a complete beginner.
Anyway this is what happens:
The padding is not being applied inside the header, it is instead spilling out into the main page content.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Header 1</h1>
<nav>
<ul>
<li>Home</li>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
</header>
</body>
</html>
CSS:
#font-face{
font-family: LobsterTwoBoldItalic;
src: url(../fonts/LobsterTwo-BoldItalic.ttf);
}
* {
box-sizing: border-box;
margin: 0;
font-family: LobsterTwoBoldItalic;
}
header {
height: 100px;
width: 100%;
background: #3399FF;
position: relative;
}
header h1 {
float: left;
padding: 20px;
color: #FFF;
font-size: 48px;
}
header nav {
float: left;
}
header nav ul {
padding: 0;
list-style: none;
position: absolute;
bottom: 0px;
}
header nav ul li {
display: inline-block;
font-size: 32px;
}
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 10px 25px;
}
header nav ul li a:hover{
background: #CCC;
color: #217C7E;
}
What is it that I'm doing wrong?
Change
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 10px 25px;
}
to
header nav ul li a{
text-decoration: none;
color: #FFF;
padding: 20px 25px 1px 25px;//this puts it to the bottom of the nav bar in JS fiddle
}
You can try it in jsfiddle here : http://jsfiddle.net/v93mzvvj/
Padding adds space to the inside of the element.
What you want is to change it so the padding on the bottom is only 0px, this way you get the spacing you want around the text, without going past the bottom of the navigation bar.
JSFiddle
Simply change this part of your CSS file:
header nav ul li a{
text-decoration: none;
color: #FFF;
--> padding: 20px 25px 0px 25px;
}
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.
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)
}
I saw the following drop-up menu example:
http://jsfiddle.net/W5FWW/360/
html:
<div id="menu">
<ul>
<li><center>Home</center>
<ul>
<li>About Us</li>
<li>Disclaimer</li>
</ul>
</li>
</ul>
</div>​
This example works for me perfectly on Chrome but fails to work on IE 9,
The menu should open when I'm hovering the Menu link.
(It works when I open it on jsfiddle but when copying it to html file and runs this independently it fails)
Why this working on Chrome and doesn't works on IE 9? What can I do?
Thanks!
You don't have a doctype set do you.
"Note: In IE there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element."
http://www.w3schools.com/cssref/sel_hover.asp
You have a :hover on the <li>:
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
I've tested this on:
Firefox 17.0.1
Chrome 21.0.1180.89 m
IE 9.0.8112.16421
and it works great.
Just as a word of advice do not use CSS drop-downs for key navigation in case old browsers are unable to support it. You risk loosing key functionality.
Also depending on your DOCTYPE! <center> is obsolete and you should consider centering using CSS instead.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
</head>
<body>
<div id="menu">
<ul>
<li class="centretext">Home
<ul>
<li>About Us</li>
<li>Disclaimer</li>
</ul>
</li>
</ul>
</div>​
</body>
</html>
The only way I can get this to fail is by throwing IE into Quirks mode.
Ensure you have a valid doctype in your file and you should be fine.
Please advise if this is not the issue :)
Here is the complete code that is working on IE7/8/9 and other browsers. Please read up on Doctype declaration.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div, ul, li{ padding:0; margin:0; list-style:none;}
#menu {
margin-top: 100px;
float: left;
line-height: 10px;
left: 200px;}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;}
#menu a:hover { background: #B0BD97;}
#menu ul li ul li a:hover {
background: #ECF1E7;
padding-left:9px;
border-left: solid 1px #000;}
#menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
z-index:1;
}
#menu ul li ul li a {
font: 11px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;}
#menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;}
#menu li{
position:relative;
float:left;}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 140px;}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display:block;}
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}​
</style>
</head>
<body>
<div id="menu">
<ul>
<li><center>Home</center>
<ul>
<li>About Us</li>
<li>Disclaimer</li>
</ul>
</li>
</ul>
</div>​
</body>
</html>