I Have a <li> menu items with 2px border bottom as underline and a bold hover which makes other elements move while hovering. I tried to change the padding on the hover but without a result. (I think the problem is the added underline of border bottom)
#menu {
list-style: none outside none;
margin-top:40px;
text-align: center}
#menu li {
margin-right: 26px;
display:inline;}
#menu a:hover {
border-bottom:2px solid #ac9962;
font-size:16px;
letter-spacing: -2px;
white-space: nowrap;
font-weight:bold;}
<ul id="menu">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
http://jsfiddle.net/tGcfh/
Try something similar:
HTML
<div id="menu_container">
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
</ul>
</div>
CSS
#menu_container {
width: 100%;
display: table;
}
#menu_container ul li {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 50px;
}
#menu_container ul li a {
font-size: 14px;
}
#menu_container ul li a:hover {
font-size: 24px;
}
This will work perfectly as expected, but have in mind that display:table is not supported in IE7 and bellow.
make the font size same in hover time and normal time on hover time font-size:16px is there and normal time font-size:14px is there... and hover time font weight bold is there.
just give the following css for hover. You have gave bold, border bottom and size change, it causes alignment issue. Otherwise you have to give specified width to each link.
#menu2 a:hover {
text-decoration:underline;
}
if change this
#menu a:hover {
border-bottom:2px solid #ac9962;
font-size:16px;
letter-spacing: -2px;
white-space: nowrap;
font-weight:bold;}
delete
font-size:16px;
letter-spacing: -2px;
font-weight:bold;
This may fix your problem
Related
I would like to change my current menu to allow for one dropdown: Products. My test page can be found here This is my HTML:
<nav>
<ul class="menu">
<li class="current">Home</li>
<li>About Us</li>
<li class="subNav"><a class="selected">Products</a>
<ul>
<li>Designer Bags
</li>
<li>Cowhides
</li>
<li>Hand-carved Geese
</li>
<li>Antler Chandeliers
</li>
</ul>
<li>Gallery</li>
<li>Shows</li>
<li>Contact</li>
<li>Shop</li>
</ul>
</nav>
My original CSS:
.nav-buttons{text-align:center;padding-bottom:17px;}
#nav{overflow:hidden;display:inline-block}
#nav li{float:left;overflow:hidden;margin:0 10px}
#nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0;
width:19px;height:19px;
line-height:0;font-size:0;
}
#nav li a:hover,#nav li.showPage a{background-position: 0 bottom}
nav{float:right;padding:12px 0 0 0}
.menu {
font-size:0;
line-height:0;
padding:0;
z-index:99;
position:relative;
margin-right:21px;
}
.menu > li {
position:relative;
float:left;
margin-left:11px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:url(../images/point.png)
}
.menu li a{
color:#b3adad;
font-size:18px;
line-height:20px;
display:block;
position:relative;
text-decoration:none !important;
padding:7px 12px 9px;
font-family: 'Noto Sans', sans-serif;
}
.menu li.current,
.menu li:hover {
background:#9c6f51;
}
.menu li.current a,
.menu li:hover a{
color:#fff
}
And this bit of CSS I just added today:
nav a {
font-weight: 800;
padding: 5px 10px;
display: block;
}
nav > ul > li.subNav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: #fff;
}
nav ul li.subNav:hover ul {
display: block;
}
It seems to want to work with the exception that I see no sub-menu unless I hover over it. I've come here for help because I'm afraid to mess with the original CSS and thus ruin my navigation throughout the rest of the site. Is there something I can add that will cause the menu to appear within just the "subNav" class, without affecting the rest of the menu or site navigation? (The original CSS came with this template and I do note that font-size:0 is used a few times. Since the menu worked well before I felt I needed to add a dropdown, I have been reluctant to change that, since I would only be experimenting without understanding.)
I've sorted it. I had to change the background color in the "subNav" class, in order for the site menu's overall font color to show up. It's there; I just couldn't see it.
I am making a website for a friend and am struggling with the CSS for the menu bar. I've deisgned it as he asked etc., but am having a couple of problems.
1) I can't get it to stretch across the full width of the page. The menu itself should stretch across the whole width of the page, with the width of the page split into 6, and the text in each menu item to be centralised and stay the same size and just add extra black background to accommodate the page width. (Most users who'll be looking at it will be using 1920 x 1080 apparently)
Like so (Ignore the boxes at the top - they were just colour tests):
http://i58.tinypic.com/1z2zkf8.png
2) When I mouseover the menuitems for the submenu, the main menu readjusts itself. How can I stop it doing this, so it stays at a static width for the menu buttons? (i.e. 1/6th of the page width)
3) How can I make it so clicking the main menu will show the relevant submenu and keep it up until there is a click elsewhere on the page (i.e. so you don't have to hold your mouseover to select the submenu)
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation</title>
<link href="navigation.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Clan
<ul class="subnav">
<li>Really? You made a website for this?</li>
<li>Member Roster</li>
<li>One of us...</li>
</ul>
</li>
<li>Games
<ul class="subnav">
<li>Current Games Rotation</li>
<li>Games You Really Need To Buy</li>
<li>Clan Steam Account</li>
<li>Wargame Decks</li>
<li>Leon's Wheel o' Games</li>
</ul>
</li>
<li>Events
<ul class="subnav">
<li>Thursday Game Night</li>
<li>ILAN</li>
</ul>
</li>
<li>Donate
<ul class="subnav">
<li>Help Us Not Be Poor</li>
<li>Help Us Even If You're Poor</li>
</ul>
</li>
<li>Other Shit
<ul class="subnav">
<li>Links to Shit</li>
<li>Cheap as Shit Games</li>
<li>Stats 'n' Shit</li>
<li>Downloadable Shit</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
#import url("AEnigma_Scrawl/stylesheet.css");
.navbar {
font-family: "AEnigma Scrawl";
font-size: 32px;
text-align: left;
height: 80px;
width: 100%;
font-weight: normal;
text-shadow: 1px 1px #000000;
}
.navbar ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
list-style-type: none;
width: 100%;
}
.navbar ul li {
float: left;
}
.navbar ul li a {
text-decoration: none;
color: #FFFFFF;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-image: url(bg_navbar.png);
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.navbar ul li a:hover , .navbar ul li a:active, .navbar ul li a:focus{
background-image: url(bg_navbar_hover.png);
}
.navbar ul li a.current {
background-image: url(bg_navbar_current.png);
}
.navbar ul li .subnav {
display: none;
}
.navbar ul li .subnav li {
float: none;
}
.navbar ul li .subnav li a {
font-size: 18px;
}
.navbar ul li:hover ul.subnav {
display: block;
position: static;
}
.navbar ul li:hover ul.subnav a {
display: block;
width: 100%;
}
The reason why your menubar isn't stretching across the page is probably because browsers usually automatically add a margin to the html/body. Try setting this css:
html,
body
{
margin:0;
padding:0;
}
Also the reason why your menu bar is shifting is because you're positioning the .subnav ul as static when it should be positioned as absolute. Like so:
.navbar ul li .subnav
{
position:absolute;
}
Positioning an element as absolute means it takes up no space on page so this means it won't push other elements away.
Try adding min-width: 100% on the navbar.
Also change the menu background from image to color.
I have a nav that holds a ul with several ils. The problem is that im unable to get rid of the ul's first and last child's divider.
here's a demo: http://jsfiddle.net/Rvs3C/1/
i've added this code to my CSS file but seems like it makes no difference:
nav ul a li:first-child{
content: none;
}
nav ul a li:last-child{
content: none;
}
You markup is wrong. The corret way is <a> tag being the children of tag <li>.
The way you made the correct selector would:
nav ul a:first-child li{
content: none;
}
nav ul a:last-child li{
content: none;
}
But remembering, this is not the right way to do.
The correct is change you html to:
<ul class="showing">
<li>home</li>
...
As mentioned elsewhere your HTML structure is off, li must me a direct child of ul, no other element as a child is valid. With this said, you also need to change your selectors per the below.
Updated Fiddle
HTML
<nav>
<ul class="showing">
<li>home
</li>
<li>about me
</li>
<li>content
</li>
<li>browse
</li>
<li>rate
</li>
<li class="nav_arr"><img src="http://www.irvinewelsh.net/images/arrow-left.png" />
</li>
</ul>
</nav>
CSS
nav {
margin-right: 150px;
}
nav ul {
background-color: #494A4C;
overflow: hidden;
text-align: right;
}
nav li img {
margin-left: 20px;
vertical-align: top;
}
nav ul li a {
color: white;
text-decoration: none;
font-family:arial;
font-size: 14px;
padding: 0px;
font-weight: bold;
}
nav ul li:first-child:before {
content: none;
}
nav ul li:last-child:before {
content: none;
}
nav li:before {
content:"|";
padding: 5px;
font-weight: bold;
color:lightblue;
font-size: 20px;
}
nav ul li {
display: inline-block;
}
Hello I'm new to html & css and I have a problem. I made a navbar and wanted to show the user on wich page he was by changing the background-color in the navbar. But for some reason this doens't work very well. Please help me.
This is the css code I use for the navbar:
#nav{
width: 60%;
display: inline-block;
text-align: right;
float: right;
}
/* unorded list */
#nav ul{}
#nav ul li{
display: inline-block;
height: 62px;
}
/* text in blokken */
#nav ul li a{
padding: 20px;
background: orange;
color: white;
}
#nav ul li a:hover{
background-color: #ff1e42;
box-shadow: 0px 1px 1px #666;
text-decoration: underline;
}
#nav ul li #inuse {
background-color: #ff1e42;
}
my html code looks like this:
<div id="nav">
<ul>
<li><a class="inuse" href="../html/index.html" >Home</a></li>
<li><a href="../html/kleding.html" >Kleding</a></li>
<li><a href="../html/bestel.html" >Bestellen</a></li>
<li>Contact</li>
<li><a href="../html/vragen.html" >Vragen</a></li>
</ul>
</div>
Thanks in advance.
try:
#nav ul li a.inuse{/* in use css */}
instead of:
#nav ul li #inuse{}
hope that helps
I'm having a design issue with my css vertical menu.
It's working but it does not have the effect i would like to have when I do a mouse hover on a category
Below, you will see a simple vertical menu which appears when you hover your mouse over the main category
However I would like to have a small effect :
When the mouse is hover a category, i would like to add a background color (black).
It's working but I would like that the height and the width of the background to stick exactly to the same height and width of the text. Currently, I dont know why; the height of the background is more than the height of my text.
Here is some pictures of how it's right now and how i would like to be be.
How it 's now:
How I would like it to be:
Here is my code Html code
<div id="menu">
<ul id="MenuDeroulant">
<li style="margin-left:-10px;">Main categorie
<ul>
<li><a href="" >Subcat 1</a></li>
<li><a href="" >Subcat 2</a></li>
</ul>
</li>
</ul>
Here is my css code:
#MenuDeroulant
{
margin: 0;
padding: 0
}
#MenuDeroulant li
{
float: left;
list-style: none;
}
#MenuDeroulant li a
{
display: block;
padding: 0px 0px;
text-decoration: none;
color: #000;
white-space: nowrap;
text-align:center;
}
#MenuDeroulant li a:hover
{
background: #000;
color: #FFF;
}
#MenuDeroulant li ul
{ visibility: hidden;
padding: 0px 0px;
}
#MenuDeroulant li ul li
{
float: none;
display: inline;
}
#MenuDeroulant li ul li a
{
width: auto;
padding: 0px 0px;
}
#MenuDeroulant li ul li a:hover
{
background: #0000;
padding: 0px 0px;
}
Thanks in advance for your help and I wish you a very nice day,
Anselme
Use width:100% to all your <li> or li a elements and a fixed width to your <ul>. This will solve your issue.
With that CSS your nested ul is permanently hidden. You'll need something like
#MenuDeroulant li:hover ul {
visibility:visible;
}
to show the nested menu items then maybe display: inline on the #MenuDeroulant li ul li a
You can add a class to your menu hyperlinks giving them a margin-bottom:3px and it should bump up the links in the container.