I am working on a portfolio site template that will have a vertical, full-height menu to the left on displays of >= 1024px, and a horizontal, full-width, drop-down menu on mobile displays. The issue is that my drop-down menu items (the text itself, not the drop-down menu) is offset slightly to the right and not centered. I've played around with my CSS and I just can't seem to figure it out. Can anyone help?
$('#nav-status').click(function(e) {
e.preventDefault();
$('#navigation').toggle();
});
html,
body {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/wood-dark.png");
overflow-x: hidden;
font-family: "Oswald", sans-serif;
color: white;
text-align: center;
}
/*mobile rules*/
#media screen and (max-width: 1023px) {
#nav-status {
display: block;
width: 100%;
height: 32px;
padding: 2px;
background-color: rgba(0, 0, 0, 0.75);
}
ul {
display: none;
width: 100%;
background-color: rgba(0, 0, 0, 0.75);
overflow: hidden;
color: white;
}
li h1 {
font-size: 1.5em;
}
ul li {
width: 100%;
min-height: 32px;
padding: 2px;
display: block;
position: relative;
text-align: center;
}
li a:link,
a:visited,
a:active {
color: white;
font-family: "Oswald", sans-serif;
font-size: 1em;
text-decoration: none;
}
li a:hover {
color: #ba1d30;
font-family: "Oswald", sans-serif;
font-size: 1em;
text-decoration: none;
}
}
/*desktop rules*/
#media screen and (min-width: 1024px) {
#nav-status {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
background-color: rgba(0, 0, 0, 0.85);
height: 100%;
position: fixed;
overflow: hidden;
}
li h1 {
font-size: 3em;
}
ul li {
color: white;
margin: auto;
width: 50%;
padding: 2px;
}
li a:link,
a:visited,
a:active {
color: white;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-decoration: none;
}
li a:hover {
color: #ba1d30;
font-family: "Oswald", sans-serif;
font-size: 2em;
text-decoration: none;
font-style: italic;
}
}
<body>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png" alt="Kissy Cat">
<ul id="navigation">
<li>
<h1>Explore</h1>
</li>
<li>
Web Pages
</li>
<li>
Games
</li>
<li>
Productivity
</li>
<li>
Project 4
</li>
</ul>
</div>
</body>
Here is a link to my Codepen in case that helps.
You have a bit of padding to your ul element.
Just do ul { padding : 0; }. That's it.
Related
Fairly straightforward question: I have a responsive, pure-CSS dropdown (checkbox hack) menu using a typical stack menu glyph (burger?) from FontAwesome.
What I would like, because the media menu obviously doesn't close on its own, is to change that glyph to an 'X' indicating it needs to be clicked again in order to close the dropdown. All of the methods I've come up for this are wildly inefficient (involving a lot of opacity and child-divs), not to mention ugly, and I'm wondering if someone more experienced than I could point out the most (or at least a more) efficient means of doing this.
I've included my working code (which is still messy, I know; this is still in early development). If anyone could recommend of means of doing this (without resorting to jQuery/JS), I would be so very grateful.
Thank you in advance.
.toggle,
[id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #ffffff;
z-index: 999999;
visibility: visible;
display: block;
position: absolute;
left: 0px;
width: 100%;
top: 0;
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
border-bottom: 1px solid #00000021;
height: 80px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav i {
color: #9b548c;
font-size: 50px!important;
}
#logo {
display: block;
padding: 25px 30px;
float: left;
font-size: 12px;
line-height: 45px;
text-transform: uppercase;
font-weight: 800;
position: absolute;
}
#logo h1 {
text-align: center;
}
#logo a {
padding: 0;
font-weight: 800;
display: inline-block;
}
#logo h1 a {
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
font-size: 25px;
margin-top: -5px;
}
#logo h2 {
padding: 0;
margin: 0;
line-height: 0px;
font-size: 10px;
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
text-align: center;
letter-spacing: 3px;
margin-top: -4px;
}
#logo img {
display: none;
}
nav ul {
float: right;
padding: 25px 30px 0 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #ffffff;
}
nav a {
display: block;
padding: 10px 15px;
color: #9b548c;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
font-weight: 100;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
nav ul li ul li:hover {
color: #000000;
}
nav ul ul {
display: none;
position: absolute;
top: 35px;
}
nav ul li:hover>ul {
display: inherit;
}
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
li>a:after {
content: ' +';
}
li>a:only-child:after {
content: '';
}
#media screen and (max-width: 1000px) {
/* MEDIA | TOP NAV */
#logo {
padding: 4px 0;
top: 10px;
width: 100%;
position: relative;
z-index: 9;
}
nav {
margin: 0;
}
nav ul {
float: right;
padding: 0;
margin: 0;
position: absolute;
left: 0px;
width: 100%;
}
.toggle+a,
.menu {
display: none;
}
.toggle {
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
display: block;
background-color: #ffffff;
padding: 5px 0px;
color: #000000;
font-size: 25px;
text-decoration: none;
border: none;
text-align: center;
font-weight: 100;
text-transform: uppercase;
position: relative;
width: 100%;
}
.toggle:hover {
background-color: red;
}
[id^=drop]:checked+ul {
display: block;
color: red;
}
nav ul li {
display: block;
width: 100%;
text-align: center;
}
nav a {
font-size: calc(.7em + .7vmin);
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #9b548c;
font-size: 12px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #ffffffcc;
font-size: calc(.7em + .7vmin);
}
nav ul ul {
float: none;
position: static;
color: #9b548c;
}
nav ul ul li:hover>ul,
nav ul li:hover>ul {
display: none;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
}
}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/fontawesome.css" rel="stylesheet"/>
<!--- BEGIN TOPNAV MENU --->
<nav>
<div id="logo">
<h2>
NAVSUBTITLE
</h2>
<h1><a href="/#">
NAVTITLE
</a></h1>
</div><label for="drop" class="toggle"><i class="fa fa-align-justify"></i></label>
<form><input type="checkbox" id="drop" />
<ul class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<!-- START DROP DOWN -->
<li><label for="drop-1" class="toggle">
SUB MENU +
</label><a href="#">
SUB MENU
</a><input type="checkbox" id="drop-1" />
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<!-- END DROP DOWN -->
<li>×</li>
</ul>
</form>
</nav>
<!--- END TOPNAV MENU --->
Here you go:
.fa-align-justify:active::before {
content: "x";
}
The basic idea is to use the active selector to register the click and change the icon: https://www.w3schools.com/cssref/sel_active.asp
Since you want to be able to click on the whole navbar to expand, you might need to adjust the selector to your needs (e.g. nav:active .fa-align-justify::before or whatever you put the dropdown action on)
You can test this here:
https://jsfiddle.net/vbkmtct4/
.toggle,
[id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #ffffff;
z-index: 999999;
visibility: visible;
display: block;
position: absolute;
left: 0px;
width: 100%;
top: 0;
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
border-bottom: 1px solid #00000021;
height: 80px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav i {
color: #9b548c;
font-size: 50px!important;
}
#logo {
display: block;
padding: 25px 30px;
float: left;
font-size: 12px;
line-height: 45px;
text-transform: uppercase;
font-weight: 800;
position: absolute;
}
#logo h1 {
text-align: center;
}
#logo a {
padding: 0;
font-weight: 800;
display: inline-block;
}
#logo h1 a {
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
font-size: 25px;
margin-top: -5px;
}
#logo h2 {
padding: 0;
margin: 0;
line-height: 0px;
font-size: 10px;
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
text-align: center;
letter-spacing: 3px;
margin-top: -4px;
}
#logo img {
display: none;
}
nav ul {
float: right;
padding: 25px 30px 0 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #ffffff;
}
nav a {
display: block;
padding: 10px 15px;
color: #9b548c;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
font-weight: 100;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
nav ul li ul li:hover {
color: #000000;
}
nav ul ul {
display: none;
position: absolute;
top: 35px;
}
nav ul li:hover>ul {
display: inherit;
}
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
li>a:after {
content: ' +';
}
li>a:only-child:after {
content: '';
}
#media screen and (max-width: 1000px) {
/* MEDIA | TOP NAV */
#logo {
padding: 4px 0;
top: 10px;
width: 100%;
position: relative;
z-index: 9;
}
nav {
margin: 0;
}
nav ul {
float: right;
padding: 0;
margin: 0;
position: absolute;
left: 0px;
width: 100%;
}
.toggle+a,
.menu {
display: none;
}
.toggle {
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
display: block;
background-color: #ffffff;
padding: 5px 0px;
color: #000000;
font-size: 25px;
text-decoration: none;
border: none;
text-align: center;
font-weight: 100;
text-transform: uppercase;
position: relative;
width: 100%;
}
.toggle:hover {
background-color: red;
}
[id^=drop]:checked+ul {
display: block;
color: red;
}
nav ul li {
display: block;
width: 100%;
text-align: center;
}
nav a {
font-size: calc(.7em + .7vmin);
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #9b548c;
font-size: 12px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #ffffffcc;
font-size: calc(.7em + .7vmin);
}
nav ul ul {
float: none;
position: static;
color: #9b548c;
}
nav ul ul li:hover>ul,
nav ul li:hover>ul {
display: none;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
}
}
.fa-align-justify:active::before {
content: "x";
}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/fontawesome.css" rel="stylesheet"/>
<!--- BEGIN TOPNAV MENU --->
<nav>
<div id="logo">
<h2>
NAVSUBTITLE
</h2>
<h1><a href="/#">
NAVTITLE
</a></h1>
</div><label for="drop" class="toggle"><i class="fa fa-align-justify"></i></label>
<form><input type="checkbox" id="drop" />
<ul class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<!-- START DROP DOWN -->
<li><label for="drop-1" class="toggle">
SUB MENU +
</label><a href="#">
SUB MENU
</a><input type="checkbox" id="drop-1" />
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<!-- END DROP DOWN -->
<li>×</li>
</ul>
</form>
</nav>
<!--- END TOPNAV MENU --->
You'll have to modify your markup for this solution, namely move the label into the form, and then slightly change your selectors to reflect that change. Also, this solution makes use of the pseudo-element-style instead of the class-based-style of using Font Awesome.
The relevant snippets, for exposition, are:
<form>
<input type="checkbox" id="drop" />
<label for="drop" class="toggle">
<i class="icon"></i>
</label>
<ul class="menu">
...
Along with:
.toggle .icon::before {
font-family: "Font Awesome 5 Free";
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-weight: 900;
content: '\f039';
}
[id^=drop]:checked ~ ul { /** following-sibling selector instead of immediate-sibling **/
display: block;
color: red;
}
[id^=drop]:checked + label .icon::before {
font-family: "Font Awesome 5 Free";
content: "\f00d";
}
Full, runnable snippet:
.toggle,
[id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #ffffff;
z-index: 999999;
visibility: visible;
display: block;
position: absolute;
left: 0px;
width: 100%;
top: 0;
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
border-bottom: 1px solid #00000021;
height: 80px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav i {
color: #9b548c;
font-size: 50px !important;
}
#logo {
display: block;
padding: 25px 30px;
float: left;
font-size: 12px;
line-height: 45px;
text-transform: uppercase;
font-weight: 800;
position: absolute;
}
#logo h1 {
text-align: center;
}
#logo a {
padding: 0;
font-weight: 800;
display: inline-block;
}
#logo h1 a {
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
font-size: 25px;
margin-top: -5px;
}
#logo h2 {
padding: 0;
margin: 0;
line-height: 0px;
font-size: 10px;
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
text-align: center;
letter-spacing: 3px;
margin-top: -4px;
}
#logo img {
display: none;
}
nav ul {
float: right;
padding: 25px 30px 0 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #ffffff;
}
nav a {
display: block;
padding: 10px 15px;
color: #9b548c;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
font-weight: 100;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
nav ul li ul li:hover {
color: #000000;
}
nav ul ul {
display: none;
position: absolute;
top: 35px;
}
nav ul li:hover>ul {
display: inherit;
}
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
li>a:after {
content: ' +';
}
li>a:only-child:after {
content: '';
}
#media screen and (max-width: 1000px) {
/* MEDIA | TOP NAV */
#logo {
padding: 4px 0;
top: 10px;
width: 100%;
position: relative;
z-index: 9;
}
nav {
margin: 0;
}
nav ul {
float: right;
padding: 0;
margin: 0;
position: absolute;
left: 0px;
width: 100%;
}
.toggle+a,
.menu {
display: none;
}
.toggle {
font-family: 'Neutra Text TF', Arial, Helvetica, Sans-Serif;
display: block;
background-color: #ffffff;
padding: 5px 0px;
color: #000000;
font-size: 25px;
text-decoration: none;
border: none;
text-align: center;
font-weight: 100;
text-transform: uppercase;
position: relative;
width: 100%;
}
.toggle:hover {
cursor: pointer;
}
.toggle .icon::before {
font-family: "Font Awesome 5 Free" !important;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-weight: 900;
content: '\f039';
}
[id^=drop]:checked~ul {
display: block;
color: red;
}
[id^=drop]:checked+label .icon::before {
font-family: "Font Awesome 5 Free";
content: "\f00d";
}
nav ul li {
display: block;
width: 100%;
text-align: center;
}
nav a {
font-size: calc(.7em + .7vmin);
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #9b548c;
font-size: 12px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #ffffffcc;
font-size: calc(.7em + .7vmin);
}
nav ul ul {
float: none;
position: static;
color: #9b548c;
}
nav ul ul li:hover>ul,
nav ul li:hover>ul {
display: none;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
}
}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<!--- BEGIN TOPNAV MENU --->
<nav>
<div id="logo">
<h2>NAVSUBTITLE</h2>
<h1>NAVTITLE</h1>
</div>
<form>
<input type="checkbox" id="drop" />
<label for="drop" class="toggle">
<i class="icon"></i>
</label>
<ul class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>
<label for="drop-1" class="toggle">SUB MENU +</label>
SUB MENU
<input type="checkbox" id="drop-1" />
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>×</li>
</ul>
</form>
</nav>
When I add a dropdown menu using "position: absolute", I want to add "position: relative" to its nearest ancestor "li.dropDownBtn" and find out that it makes the whole dropdown menue disappear. I have been trying to find out the reason but still haven't got an answer. Can anyone help me with this please? Thanks a lot!
<html>
<head>
<style>
ul.navBar {
list-style-type: none;
margin: 0px;
padding:0px;
overflow: hidden;
background-color: #4277f4;
cursor: pointer;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
/*When this is added, the dropdown disappear
li.dropDownBtn {
position: relative
}
*/
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
</style>
</head>
<body>
<ul class="navBar">
<li>Home</li>
<li class="dropDownBtn">Products
<div class="dropDownContent">
Product1
Product2
Product3
</div>
</li>
<li>Service</li>
<li>Contact</li>
</body>
</html>
Here's the jsfiddle for this navigation bar page.
overflow: hidden on the main menu is keeping the submenu from showing. I'm assuming you're using that to clear the floats in your nav menu, so added a .clearfix with a different technique that doesn't use overflow: hidden and removed overflow: hidden from your menu's CSS
ul.navBar {
list-style-type: none;
margin: 0px;
padding:0px;
background-color: #4277f4;
cursor: pointer;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
li.dropDownBtn {
position: relative;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<body>
<ul class="navBar clearfix">
<li>Home</li>
<li class="dropDownBtn">Products
<div class="dropDownContent">
Product1
Product2
Product3
</div>
</li>
<li>Service</li>
<li>Contact</li>
Set a height for ul.navBar and take out overflow hidden
ul.navBar {
list-style-type: none;
margin: 0;
padding:0;
background-color: #4277f4;
cursor: pointer;
height:55px;
}
It's because you have this setting:
.dropDownContent {
display: none;
position: absolute;
etc.
Which means the dropdown is not displayed by default (which usually is the desired function...).
And then you have this rule, which makes it visible when you hover its li parent:
li.dropDownBtn:hover .dropDownContent{
display: block;
}
That's the way CSS dropdown menus work, what do you not like about it?
my problem is that i have styled my navigation bar with a block/button style graphic. that works just fine it's just when i put any tags it resorts to that styling? is there a way on the css style sheet to stop that style and having a different one. i've had this problem on other pages too, but it didnt end up being a problem. can anyone help?
css:
nav {
position:relative;
z-index:3;
position: absolute;
margin-left: 420px;
margin-top: -15px;
float: right;
}
ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
li {
float: left;
margin-top: 0px;
}
a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
html: just an unordered list
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
It's not clear what your question is, but I'm sure what you want to do is easy enough. Sounds like you need to add a class or ID to your elements, or to make your CSS more specific. E.g.
nav ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin-top: 0px;
}
nav a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
Simply make your CSS selector more specific by making it only select <a> elements that are descendants of <nav>:
nav a:link,
nav a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,
nav a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
So I have a menu from ul and li, and it looks something like this at page load:
but when i click each menu and executed the code this happens:
what should i do? here's my CSS:
#menu-centered {
padding: 0px;
margin-bottom: 0px;
}
#menu-centered ul {
margin: 0;
padding: 0;
height: 99px;
width: 603px;
}
#menu-centered li {
display: inline;
list-style: none;
padding: 0px;
background: url(images/menu1.png) no-repeat right top;
}
#menu-centered a {
border-style: none;
border-color: inherit;
border-width: medium;
display: block;
margin-right: 0;
padding: 20px 30px 0px 30px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
height: 68px;
width: 130px;
text-align: center;
}
#menu-centered a:hover {
background: url(images/menu2.png) no-repeat right top;
}
and here's my html code for the menus:
<div id="menu-centered">
<ul>
<li> <a href="javascript:Clikbtn1()" >MENU1</a></li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</div>
Please help. Thanks
Your menus need some LoVe and HAte. In other words you need to create all four of the important link pseudoselectors to avoid letting browsers destroy your layout by applying the default active pseudoslector.
Define a:link, a:visited, a:hover and a:active for your menu, in that order exactly.
On hover the background color seems to come outside of the "boxes" that are my navigation items. I have tried tweaking everything. Here is my CSS and HTML...
<div id="menuTop">
<ul id="menuOne" class="menuHoriz">
<li>home</li>
<li>about us</li>
<li>services</li>
<li>samples</li>
<li>contact</li>
</ul>
</div>
#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
}
#menuTop ul, #menuTop li {
margin: 0;
padding: 4px 0 0 0;
}
#menuTop ul {
list-style-type: none;
}
#menuTop li {
display: block;
background-color: #3C87D1;
text-align: center;
width: 197px;
height: 30px;
margin: 0 0px 0 0;
padding: 4px 0 0 0;
border: 1px solid #2A5E92;
}
#menuTop a {
display: block;
margin: 0;
padding: 4px 0 0 0;
}
#menuTop a:link, #menuTop a:visited {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
#menuTop a:hover {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
color: #fff;
background-color: #5F9FFF;
}
ul.menuHoriz li {
float: left;
}
I removed the unneeded/double definitions from your stylesheet and fixed the bug.
* {
margin: 0;
padding: 0
}
#menuTop {
font: 12pt 'Trebuchet MS', Helvetica, sans-serif;
padding-top: 18px;
height: 55px;
background: #000
}
#menuTop ul {
padding-top: 4px;
list-style: none
}
#menuTop li {
background: #3C87D1;
border: 1px solid #2A5E92;
text-align: center
}
#menuTop a {
display: block;
width: 197px;
line-height: 30px
}
#menuTop a:link, #menuTop a:visited {
color: #fff;
text-decoration: none
}
#menuTop a:hover {
background-color: #5F9FFF
}
ul.menuHoriz li {
float: left
}
Here are some notes:
It is handy to set the margin and padding for all elements to zero by using *, before designing your layout.
Set the width and height for your menu item to the a element only (the most nested element). The surrounding li element will take the same size. Also use line-height instead of height because it automatically makes your text vertically centered.
Don't redefine styles in :link, :visited, :hover or :active (for example dimensions and font). It gives unnecessary calculations for the browser.
If your problem is only the color coming outside the boxes, add this to your #menuTop li
overflow:hidden;
Works for me. :)
Try this one: jsfiddle example
#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
text-align: center;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
line-height: 34px;
}
#menuTop a {
float: left;
border: 1px solid #2A5E92;
background-color: #3C87D1;
width: 197px;
color: #fff;
text-decoration: none;
}
#menuTop a:hover {
background-color: #5F9FFF;
}