On the navigation bar, the link only works if I hover over the TEXT however it doesnt work if I hover underneath or above the text (between the 1 px horizontal lines and the text) here is a link to the jsfiddle http://jsfiddle.net/hp20wcrd/
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
font-family: Verdana, Arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:25px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-top: 10px; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
padding-bottom:7px; /* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item">home</li>
<li class="ty-menu__item">news</li>
<li class="ty-menu__item">contact</li>
<li class="ty-menu__item">about</li>
</ul>
</div>
</body>
</html>
Try this (your a is not all clickable, you must create vertical full clickable on your a using padding)
CSS
.menu {
font-family: Verdana, Arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:35px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 10px 0px;
}
a:hover, a:active {
padding-bottom:7px; /* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
DEMO HERE
You can add padding in a element instead:
.menu {
font-family: Verdana, Arial;
position: fixed;
background: transparent;
width: 100%;
top: 100px;
left: 0;
height: 25px;
/* decide on this as some stage */
padding: 0;
text-align: center;
font-size: 12px;
font-weight: 600;
/* decide on this as some stage */
/* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding-bottom: 10px;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link,
a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding-top: 10px;/*add padding top*/
padding-bottom: 10px;/*add padding bottom*/
}
a:hover,
a:active {
padding-bottom: 7px;
/* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B;
/* decide on this as some stage */
color: #9B9B9B;
/* decide on this as some stage */
}
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item">home
</li>
<li class="ty-menu__item">news
</li>
<li class="ty-menu__item">contact
</li>
<li class="ty-menu__item">about
</li>
</ul>
</div>
It's because you gave padding to the ul element and its parent, not the actual anchor, which is the "clickable" area. Something like this should work (with removing the extra padding on the ul element):
.ty-menu__item a {
padding: 8px 0 6px;
}
See it here:
.menu {
font-family: Verdana, Arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:32px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
.ty-menu__item a {
padding: 8px 0 6px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
padding-bottom:7px; /* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item">home</li>
<li class="ty-menu__item">news</li>
<li class="ty-menu__item">contact</li>
<li class="ty-menu__item">about</li>
</ul>
</div>
http://jsfiddle.net/hp20wcrd/14/
I added padding for the anchor tag and dropped the padding-top on .menu
edit: i also added padding-bottom to the .menu to match your hover selector
.menu {
font-family: Verdana, Arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:25px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-bottom:7px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a {
padding:7px 0px;
}
a:hover, a:active {
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
Put the padding on the a tags, and let those take up the space. The li tags will simply take the size of the a tags.
I put together this jsfiddle (I commented out what wasn't needed): http://jsfiddle.net/g5o9dun9/
.menu {
font-family: Verdana, Arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
/* height:25px; */ /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
/* padding-top: 10px; */ /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
/* position: absolute; */
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
/* width:100%; */
text-align: center;
}
.ty-menu__item {
display: inline-block;
margin:0px 50px;
}
.ty-menu__item a{
padding:20px
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
padding-bottom:7px; /* decide on this as some stage */
background: transparent;
border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
color: #9B9B9B; /* decide on this as some stage */
}
Related
I'm trying to make a dropdown menu on the right side of the screen for my users. But it keeps getting cut off and is hiding my text.
When I hover over my dropdown, it gets completely cut off and hides my welcome text on the screen.
My HTML Markup:
<header>
<div>
<?php
if (isset($_SESSION['userId'])) {
require './includes/dbh.inc.php';
/*$sql = mysqli_query($conn,"SELECT fnidUser, lnidUsers FROM users"); */
$result = mysqli_query($conn, "SELECT fnidUser FROM users");
echo "
<div class='dropdown' style='float:right;'>
<li class='login current2'><a href='#'>Welcome</a>
<div class='dropdown-content'>
<ul>
<li style='font-size:25px;'><a href='#'>My Account</a></la>
<li style='font-size:25px;'><a href='#'>My Orders</a></la>
<li style='font-size:25px;'><a href='#'>My Wishlist</a></la>
<li style='font-size:25px;'><a href='#'>My Cart</a></la>
<li style='font-size:25px;'><a href='#'>Log out</a></la>
</ul>
</div>
</li>
</div>
";
}
else{
echo "<li class='login current2'><a href='login.php'>Login / Sign up</a></li>";
}
?>
</div>
<div class="container">
<div id="branding">
<h1><img src="./Header Image/header.png"></h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Apple</li>
<li>Samsung</li>
<li>Gadgets</li>
</ul>
</nav>
</div>
</header>
My CSS Style for this page(side note, I attempted to make the text size smaller and for some reason it doesn't seem to work):
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
.button_1 {
height: 49px;
width: 144px;
background: #FF3B3F;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: white;
font-size: 25px;
border-radius: 8px;
cursor: pointer;
}
.button_1:hover{
background-color: #752021;
color: #CCCCCC;
}
.button_1, .roundbutton:focus{
outline: 0;
}
img{
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
body{
font: 15px/1.5 Arial;
padding: 0;
margin: 0;
background-color: #EFEFEF;
}
.footerc{
float: left;
}
.footerb{
float: right;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Login Page Stuff */
#login_page{
margin-top: 65px;
margin-right: 150px;
margin-bottom: 65px;
margin-left: 150px;
min-height: 500px;
}
#login_page h1{
text-align: center;
color: #FF3B3F;
font-size: 50px;
text-shadow: 2px 2px 12px #000000;
}
/* Header */
header{
background: #35424A;
color: #FFFFFF;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF3B3F 5px solid;
}
header ul a{
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
font-size: 24px;
}
header li{
float: left;
display: inline;
padding: 0px 20px 0px 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin: 0;
}
header nav{
float: right;
margin-top: 25px;
margin-right: 100px;
}
header .highlight, header .current a{
color: #FF3B3F;
font-weight: bold;
}
header .current2 a{
color: #FF3B3F;
}
header a:hover{
color: #CCCCCC;
}
.login a{
color: #FFFFFF;
text-decoration: none;
float: right;
}
.login {
color: #FFFFFF;
text-decoration: none;
float: right;
margin-top: -10px;
margin-right: 10px;
}
/* Login Form Style */
section #login_page td .form{
margin-bottom: 25px;
}
/*Showcase*/
#showcase{
min-height: 500px;
background:url('../img/iphone_showcase.png') no-repeat -50px -50px;
border-bottom: #FF3B3F 5px solid;
/*Scroll Parallax*/
background-attachment: fixed;
}
#showcase h1{
text-align: center;
color: #FF3B3F;
margin-top: 200px;
font-size: 50px;
text-shadow: 4px 4px 12px #000000;
}
/* Boxes */
#boxes{
margin-top: 65px;
}
#boxes .box{
float: left;
width: 30%;
padding: 25px;
}
#boxes .button_1{
align-content: center;
}
#boxes .box2{
float: left;
width: 48%;
min-height: 100px;
}
/* Footer */
footer{
padding: 20px;
margin-top: 200px;
border-top: #FF3B3F 5px solid;
background-color: #35424A;
color: white;
font-weight: bold;
}
footer .fpara, footer .logo{
margin-left: 100px;
}
footer nav{
float: right;
}
footer li{
float: left;
display: inline;
padding: 0px 20px 0px 20px;
}
.fbhover{
background: url('../footer image/facebook_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.fbhover:hover{
background: url('../footer image/facebook_hover_yes.png') no-repeat;
background-size: 100%;
}
.instahover{
background: url('../footer image/insta_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.instahover:hover{
background: url('../footer image/insta_hover_yes.png') no-repeat;
background-size: 100%;
}
.trhover{
background: url('../footer image/twitter_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.trhover:hover{
background: url('../footer image/twitter_hover_yes.png') no-repeat;
background-size: 100%;
}
.sphover{
background: url('../footer image/support_hover_no.png') no-repeat;
border-radius: 50%;
height: 35px;
width: 35px;
margin-top: 42px;
padding: 8px;
cursor: pointer;
background-size: 100%;
transition: 0.5s;
box-sizing: border-box;
}
.sphover:hover{
background: url('../footer image/support_hover_yes.png') no-repeat;
background-size: 100%;
}
/* Apple Store */
section #applestore{
margin-top: 65px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Store Sections */
#main {
padding:20px 0;
}
#content {
overflow: hidden;
}
#content #left, #content #right {
float: left;
margin: 0 2%;
width: 63%;
}
#content #right {
margin-left: 0;
width: 30%;
}
#content h3 {
background: -moz-linear-gradient(#ffffff, #F6F6F6); /* FF 3.6+ */
background: -ms-linear-gradient(#ffffff, #F6F6F6); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #F6F6F6)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#ffffff, #F6F6F6); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#ffffff, #F6F6F6); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F6F6F6')"; /* IE8+ */
background: linear-gradient(#ffffff, #F6F6F6); /* the standard */
border-bottom: 1px solid #E0E0E0;
color: #3C3C3C;
font-size: 12px;
font-weight: bold;
line-height: 15px;
padding: 11px 0 12px 20px;
text-transform: uppercase;
}
#content ul {
list-style:none outside none;
margin:0;
padding:0;
}
#content #left ul li {
float:left;
padding-bottom: 21px;
width: 33%;
}
#content #left ul li:hover {
background-color: #fbfbfb;
}
#content #right ul li {
border-top: 1px solid #E7E7E7;
overflow: hidden;
}
#content #right ul li:hover {
background-color: #fbfbfb;
}
#content #right ul li:first-child {
border-width: none;
}
#content #left ul li .img {
text-align: center;
}
#content #right ul li .img {
background-color: #FFFFFF;
float: left;
height: 94px;
text-align: center;
width: 113px;
}
#content #left ul li .img img {
height:128px;
width:128px;
}
#content #right ul li .img img {
height:70px;
margin-top: 11px;
width:70px;
}
#content #left ul li .info {
padding: 17px 20px 0 19px;
}
#content #right ul li .info {
float: left;
overflow: hidden;
padding: 17px 0 0 21px;
width: 164px;
}
#content ul li .info .title {
color: #4B4B4B;
display: inline-block;
font-size: 11px;
font-weight: bold;
line-height: 16px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
}
#content ul li .info .title:hover {
color: #049733;
}
#content #left ul li .info p {
color: #7F7F7F;
font-size: 11px;
line-height: 16px;
padding-top: 3px;
}
#content #left ul li .info .price {
background: none repeat scroll 0 0 #F7F7F7;
color: #383838;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin: 17px 0 10px;
padding: 6px 0 6px 8px;
}
#content #right ul li .info .price {
color: #383838;
font-size: 12px;
font-weight: bold;
line-height: 16px;
padding-top: 25px;
}
#content #left ul li .info .price .st {
color: #7F7F7F;
font-size: 11px;
line-height: 16px;
margin-right: 3px;
}
#content #right ul li .info .price .usual, #content #right ul li .info .price .special {
color: #7F7F7F;
font-size: 12px;
font-weight: normal;
line-height: 16px;
padding-right: 6px;
text-decoration: line-through;
}
#content #right ul li .info .price .special {
color: #FD7A01;
font-weight: bold;
text-decoration: none;
}
#content #left ul li .info .actions {
overflow:hidden;
}
#content #left ul li .info .actions a {
border: 1px solid #E0E0E0;
color: #fd7a01;
display: block;
float:right;
font-size: 11px;
font-weight: bold;
line-height: 16px;
padding: 5px;
text-decoration: none;
}
#content #left ul li .info .actions a:first-child {
color: #009832;
float:left;
}
If you can provide me a solution it'd be much appreciated.
You missed the position attributes for your position: absolute.
By adding:
right: 0;
top: 10px;
solves the issue (of course, you can custom that for your needs)
Working example: https://codepen.io/cdtapay/pen/OdRowv
I am a newbie at this so please excuse me if this doesn't make sense. In the #topbar2 section of this CSS Style-sheet I want the image NAFF_webtracker_logo.gif to appear. I believe I need to override just this section of the document since this is inherting from defaultstyle.css. This is in an application where I cannot edit defaultstylesheet.css. Is there a way I can override just this section to get my logo to appear? My coding seems correct but the image does not display.
Any help is appreciated.
Colin
/*
This file inherits all the styles from DefaultStyle.css
Please make sure that the following import link is present if you want to inherit default styles.
Any changes in fonts, colours, layout, etc. can be done via overriding CSS style elements after the import statement.
Good CSS guide is located at
http://www.htmlhelp.com/reference/css/
*/
#import url(DefaultStyle.css);
/* put your changes below this comment */
body
{
background-image: url(images/BG.gif);
background-color: none;
background-position: left top;
background-repeat: no-repeat;
color: #666666;
padding: 0;
margin: 0;
font-size: 11px;
}
#OuterContentPane
{
padding: 15px 30px 20px 30px;
background: none;
border-left: 0px solid;
border-left-color: #ffffff;
border-right: 0px solid;
border-right-color: #ffffff;
}
#pagehead
{
height: 204px;
border-bottom: 0px solid #000000;
background: #fff !important;
}
#topbar1
{
color: #ffffff;
/*background: none url(images/TopR.gif) no-repeat top left;*/
height: 204px;
}
#topbar2
{
color: #ffffff;
background: url(images/NAFF_webtracker_logo.gif) no-repeat top left;
height: 204px;
}
.loginBox
{
border: 1px solid #dfdfdf;
background: #ddedf5 url(images/Boxag.gif) repeat-x top left;
color: #666666;
padding: 10px 10px 10px 10px;
width: 170px;
}
.loginBox input[type="text"], .loginBox input[type="password"]
{
width: 169px;
}
.loginBox a, .loginBox a:visited
{
color: #666666;
}
.loginBox a:hover
{
color: #000000;
}
.LoginInstruction
{
position: absolute;
border: 1px solid #dfdfdf;
background: url(images/BoxBg.gif) repeat-x top left;
color: #666666;
padding: 15px;
left: 264px;
top: 220px;
right: 16px;
height: 322px;
}
#LoginStatusString
{
text-align: right;
color: #00A4E4;
background: none;
top: 113px;
right: 0px;
}
#menu
{
text-decoration: none;
font-weight: normal;
background: none;
text-align: center;
font-size: 9pt;
left: 231px;
top: 149px;
font-variant: normal;
line-height: 26px;
/*text-transform: uppercase;*/
}
#menu li
{
width: 124px;
height: 26px;
color: #00a4e4;
text-decoration: none;
background: url(images/MButtH.gif) no-repeat top left;
border: 0px solid;
}
#menu a, #menu a:visited
{
color: #005596;
background: url(images/MButt.gif) no-repeat top left;
text-decoration: none;
display: inline-block;
}
#menu a:hover
{
color: #00a4e4;
text-decoration: none;
background: url(images/MButtH.gif) no-repeat top left;
}
.DetailsTable
{
padding: 0px;
font-size: 11px;
}
.DetailsHeader
{
color: #005596;
font-size: 12px;
vertical-align: middle;
line-height: 24px;
}
.DetailsHeader td
{
background-image: url(images/MButt.gif);
background-repeat: repeat;
background-position: top left;
}
.DetailsHeader a
{
color: #005596;
font-weight: Normal;
}
.DetailsHeader a:hover
{
color: #000000;
}
a,
a:visited
{
color: #666666;
background: inherit;
}
a:hover
{
color: #000000;
background: inherit;
}
select, input
{
font-size: 11px;
}
.ContentSection
{
padding-left: 0px;
margin-top: 10px;
padding-bottom: 0px;
background: none;
}
.DetailsCell
{
color: #666666;
background: none;
}
.DetailsAlternatingCell
{
color: #666666;
background: #ebf9fe;
}
.TimeLineLegend
{
display: inline-block;
font-weight: bold;
background: none;
color: #000000;
text-align: center;
padding: 5px 5px 5px 5px;
border: solid 1px gray;
}
.TimeLineOverdue
{
background: #ffb6c1;
color: #000000;
white-space: nowrap;
text-align: center;
}
.TimeLinePending
{
background: #FFFF00;
color: #000000;
white-space: nowrap;
text-align: center;
}
.TimeLineCompleted
{
background: #98fb98;
color: #000000;
white-space: nowrap;
text-align: center;
}
.TimeLineCompletedLate
{
background: #ffcc99;
color: #000000;
white-space: nowrap;
text-align: center
}
.TimeLineEstimate
{
font-style: italic;
color: #000000;
background: inherit;
white-space: nowrap;
text-align: center;
}
.Button.FilterStripGroup_none
{
background-color: #ffffff;
}
#pagefooter
{
text-align: left;
padding-top: 8px;
border-top: 0px solid #000000;
border-bottom: 0px solid #000000;
margin-left: 30px;
margin-right: 30px;
height: 30px;
color: #666666;
font-size: 9px;
padding-left: 24px;
background: #dfdfe0;
}
#PageFooter a,
#PageFooter a:visited
{
color: #666666;
font-size: 10px;
}
#PageFooter a:hover
{
color: #000000;
font-size: 10px;
}
#LanguageSelection
{
position:absolute;
right: 10px;
}
html{
overflow-x:hidden;
}
#OuterContentPane{
background-image: url('Images/Rectangle2.jpg');
background-size: cover;
padding: 65px 30px 20px 30px !important;
}
#topbar1{
background-size: cover;
background-image:url('Images/header.jpg');
background-position: -50px -45px;
background-repeat: no-repeat;
}
#topbar2{
display: none;
}
#loginBox, #QuickViewDetails{
margin: 0 auto;
min-width: 250px;
max-width: 440px
max-width:100%;
background-color: #fff;
padding: 20px 40px
}
#OuterContentPane select, #OuterContentPane input{
max-width: 300px;
padding: 5px 6px;
}
.loginBox input[type="text"], .loginBox input[type="password"]{
width: 100% !important;
padding: 5px;
margin-bottom: 15px;
padding: 5px 6px;
background: #fff;
}
#SigninBtn, #FindBtn{
padding: 5px 19px;
border-radius: 0px;
background-color: #BF4646;
color: #fff;
margin-bottom: 20px;
border: none;
cursor:pointer;
-webkit-transition: background-color .8s; /* Safari */
transition: background-color .8s;
}
#SigninBtn:hover, #FindBtn:hover{
background-color:#09517B;
-webkit-transition: background-color .8s; /* Safari */
transition: background-color .8s;
}
#pagefooter{
background-color:#333;
margin: 0px;
width:100%;
min-height:75px;
color:#fff;
}
#menu{
width: 100%;
left: 1px;
top: 160px;
}
#menu, #menu *{
background:#fff !important;
}
#menu > li{
width: 14.2%;
min-width: 95px;
}
#menu > li > ul{
min-width: 200px;
width: auto;
}
#ctl06_ctl01_ctl62_ctl00, #ctl06_ctl01_ctl61_ctl00{
max-width: 110px;
}
#media(max-width:400){
#topbar1{
background-position: -40px -30px;
}
}
You can use the !important keyword in CSS. This will override default styles.
#topbar2
{
color: #ffffff;
background: url(images/NAFF_webtracker_logo.gif) no-repeat top left !important;
height: 204px;
}
I'm trying to have an underline when a link is hovered over. However, you'll notice that the underline doesn't sit flush with the line below it. Could someone explain or show me how to change this CSS to work so when the link is hovered, the 3px line sits on top of the 1px line spanning the page. Thanks
<!DOCTYPE html>
<html>
<head>
<style>
.menu {
font-family: "Helvetica Neue", verdana, arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:25px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-top: 10px; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background: transparent;
border-bottom: 3px solid #494949; /* decide on this as some stage */
color: #494949; /* decide on this as some stage */
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item">home</li>
<li class="ty-menu__item">news</li>
<li class="ty-menu__item">contact</li>
<li class="ty-menu__item">about</li>
</ul>
</div>
</body>
</html>
I added a padding-bottom to your hover, which appears to sit the 3px line on top of the 1px as you intended.
a:hover, a:active {
padding-bottom:8px;
background: transparent;
border-bottom: 3px solid #494949; /* decide on this as some stage */
color: #494949; /* decide on this as some stage */
}
Updated JS Fiddle:
http://jsfiddle.net/rqu39zcf/1/
I changed it to this if I think I understand
.menu {
font-family: "Helvetica Neue", verdana, arial;
position:fixed;
background:transparent;
width:100%;
top:100px;
left:0;
height:35px; /* decide on this as some stage */
padding: 0;
text-align:center;
font-size: 12px;
font-weight: 600; /* decide on this as some stage */
padding-top: 10px; /* decide on this as some stage */
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}
.ty-menu__item {
display: inline-block;
padding-right: 50px;
padding-left: 50px;
}
a:link, a:visited {
display: block;
width: 100%;
font-weight: light;
color: #494949;
background: transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
padding-bottom:1px;
background: transparent;
border-bottom: 3px solid #494949; /* decide on this as some stage */
color: #494949; /* decide on this as some stage */
}
namely I changed the .menu: height
I have been fiddling with CSS-based drop-down navigation on my website and ran into some trouble with the sub-menus modifying the width of the parent menus. When a sub-drop-down is opened, the parent drop-down will enlarge to match the width. If sub-drop-down menus are smaller than the parent, they appear to be using the width of the parent menus for their horizontal offset instead of their own width, which creates a gap.
I have pulled together a live example here: http://jsfiddle.net/vwLf9f3w/2/
Sorry for the large quantity of CSS; I have pulled the relevant code to the top.
Here is the CSS just for my navigation:
/* ----------- Navigation ----------- */
div.nav
{
display: block;
position: absolute;
top: 83px;
left: 470px;
height: 47px;
width: 530px;
background-color: transparent;
z-index: 21;
padding: 0px;
margin: 0;
font-size: 16px;
}
/* ------ [ NAV LINKS ] ------- */
/* Primary header links */
div.nav > ul > li > a
{
display: block;
background-color: transparent;
text-align: center;
height: 24px;
width: 96px;
background-color: #a9a9a9;
border: 1px solid #666666;
border-radius: 3px;
margin-top: 6px;
margin-bottom: 6px;
margin-left: 6px;
padding: 6px 0px 0px 0px;
}
div.nav > ul > li:hover > a
{
background-color: #8bbbdd;
}
/* All header links */
div.nav a
{
color: #000000;
text-decoration: none;
}
/* Header Sub-links */
div.nav > ul > li li > a
{
display: block;
padding: 0px 0px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 20px;
margin-top: 0px;
margin-left: 0px;
background: #a9a9a9;
color: #000000;
}
div.nav > ul > li li > a:hover, div.nav > ul ul li:hover > a
{
background: #8bbbdd;
}
/* ------ [ NAV LISTS ] ------- */
/* Primary navigation items */
div.nav > ul > li
{
display: inline-block;
background-color: transparent;
vertical-align: top; /* here */
max-width: 104px;
overflow: show;
}
/* Primary navigation list */
div.nav > ul
{
display: inline-block;
width: 650px;
margin: 0px;
}
/* Secondary navigation lists */
div.nav > ul ul
{
z-index: 0;
white-space:nowrap;
border: 1px solid #666666;
border-radius: 3px;
padding: 0 0 0 0;
list-style: none;
position: relative;
display: none;
background-color: transparent;
background: URL(images/blank.gif);/*#000;transparent; IE FIX*/
padding: 0;
left: 6px;
top: -3px;
position: relative;
margin-bottom: 0px;
margin-left: 0px;
width: auto;
height: auto;
}
div.nav ul li:hover > ul
{
display: inline-block;
}
/* Secondary list items */
div.nav > ul > li li
{
max-height: 31px;
}
/* Tertiary menu list */
div.nav > ul ul ul
{
top: -36px;
left: -100%;
position: relative;
}
And here is the relevant HTML:
...
<div class="nav">
<ul>
<li>Home
</li><li>Tech
<ul>
<li>Subject 1</li>
<li>Subject 2
<ul>
<li>An Item</li>
<li>Some Other Item</li>
<li>And Yet Another!</li>
<li>I Am Running Out of Ideas
<ul>
<li>Even More To Show Expansion</li>
<li>And More</li>
<li>And More!</li>
</ul>
</li>
<li>One Last Item</li>
</ul>
</li>
<li>Subject 3</li>
<li>Subject 4</li>
</ul>
</li><li>Personal
<ul>
<li>Subject 1
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>5555</li>
</ul>
</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li><li>Software
<ul>
<li>Subject 1</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li><li>Contact
<ul>
<li>Subject 1</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li>
</ul>
</div>
...
To summarize: How can I get each navigation sub-menu to have its own size that will not modify the size of other menus? And, how can I get the sub-menus to reference their own width rather than their parents' to prevent gaps?
All suggestions are welcome; my apologies for the unpolished code.
Parent element expansion:
The reason that your parent elements are expanding is because you are are not using absolute positioning on your child menus and the parent width is adjusting accordingly to the wider child elements. You will need to add position:relative; to div.nav > ul > li li and position: absolute; to div.nav > ul ul ul to remove your child menus from the flow so they don't widen your parent elements.
Sub Menu Alignment and Gap Elimination:
Sub Menus on right side of dropdown:
div.nav > ul ul ul {
left: 100%; /* All the way to the right of parent */
position: absolute;
}
Sub menus on left side of dropdown:
div.nav > ul ul ul {
left: auto; /* reset */
position: absolute;
right: 100%; /* All the way to the leftt of parent */
}
Sub Menu Vertical Alignment:
I also changed the top position on your sub menus to adjust the alignments for the 1px border and the 4px top margin on your ULs.
div.nav > ul ul {
top: -5px; / * corrects sub menu top alignment */
}
Take a look at the snippet below. It is set up with menus on the right side of the dropdown.
/* ===============----------- Navigation -----------=============== */
div.nav
{
display: block;
position: absolute;
top: 83px;
left: 470px;
height: 47px;
width: 530px;
background-color: transparent;
z-index: 21;
padding: 0px;
margin: 0;
font-size: 16px;
}
/* ------ [ NAV LINKS ] ------- */
/* Primary header links */
div.nav > ul > li > a {
display: block;
background-color: transparent;
text-align: center;
height: 24px;
width: 96px;
background-color: #a9a9a9;
border: 1px solid #666666;
border-radius: 3px;
margin-top: 6px;
margin-bottom: 6px;
margin-left: 6px;
padding: 6px 0px 0px 0px;
}
div.nav > ul > li:hover > a {
background-color: #8bbbdd;
}
/* All header links */
div.nav a {
color: #000000;
text-decoration: none;
}
/* Header Sub-links */
div.nav > ul > li li > a {
display: block;
padding: 0px 0px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 20px;
margin-top: 0px;
margin-left: 0px;
background: #a9a9a9;
color: #000000;
}
div.nav > ul > li li > a:hover, div.nav > ul ul li:hover > a {
background: #8bbbdd;
}
/* ------ [ NAV LISTS ] ------- */
/* Primary navigation items */
div.nav > ul > li {
display: inline-block;
background-color: transparent;
vertical-align: top; /* here */
max-width: 104px;
overflow: show;
}
/* Primary navigation list */
div.nav > ul {
display: inline-block;
width: 650px;
margin: 0px;
}
/* Secondary navigation lists */
div.nav > ul ul {
z-index: 0;
white-space:nowrap;
border: 1px solid #666666;
border-radius: 3px;
padding: 0 0 0 0;
list-style: none;
position: relative;
display: none;
background-color: transparent;
background: URL(images/blank.gif);/*#000;transparent; IE FIX*/
padding: 0;
left: 6px;
top: -5px; /* corrects sub menu top alignment */
position: relative;
margin-bottom: 0px;
margin-left: 0px;
width: auto;
height: auto;
}
div.nav ul li:hover > ul {
display: inline-block;
}
/* Secondary list items */
div.nav > ul > li li {
max-height: 31px;
position: relative; /* required for child menu absolute positioning */
}
/* Tertiary menu list */
div.nav > ul ul ul {
position: absolute; /* removes child sub menu from flow and stops the expandsion of parent element */
left: 100%; /* positions sub menu to right side of parent */
}
/* =======-------- Shouldn't Be Relevant Beyond Here --------======= */
/* Page Setup */
#font-face
{
font-family: 'DejaVu Sans';
src: local(default_font), url('fonts/DejaVuSans.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
#font-face
{
font-family: 'DejaVu Sans';
font-weight: bold;
font-style: normal;
font-variant: normal;
src: local('DejaVu Sans'), url('fonts/DejaVuSans.ttf') format('truetype');
}
#font-face
{
font-family: 'DejaVu Sans';
font-weight: normal;
font-style: italic;
font-variant: normal;
src: local('DejaVu Sans'), url('fonts/DejaVuSans.ttf') format('truetype');
}
*
{
padding: 0;
margin: 0;
border: 0;
/*font-family: "Arial", Gadget, sans-serif;*/
font-family: "DejaVu Sans", "Arial", "Gadget", "sans-serif";
color: #000;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
* html .clearfix
{
height: 1%;
}
.clearfix
{
display: block;
}
html, body
{
min-height: 100%;
}
body
{
background: url(images/background.png) repeat; /*no-repeat*/
/*background-attachment: fixed;
background-size: cover;*/
font-family: Geneva, Arial, Helvetica, san-serif;
height: 100%;
min-height: 100%;
}
/* Main body components */
.header
{
height: 128px;
text-indent: -9999px;
margin: -1px 0px 0px 0px;
border-bottom: 0px solid #000;
padding: 0px;
}
#container
{
display: block;
position: relative;
width: 1000px; /* 750px */
height: 100%;
margin: 0 auto;
padding: 0px;
background-color: #fff;
box-shadow: 0px 0px 5px #888888;
border-bottom: 4px #000 solid;
margin-bottom: 32px;
z-index: 1;
}
.slideshow
{
display: block;
text-align: center;
margin-left: 0px;
margin-bottom: 24px;
}
#hide
{
display: none;
}
.announcement
{
/*color: #B0B0B0;*/
position: absolute;
top: 140px; left: 425px;
height: 47px; width:575px;
z-index: 20;
}
.selectable
{
}
.selectable:hover
{
cursor: pointer;
background-color: #F3F3FF;
}
#pagecategory
{
font-family: "League Gothic", "Arial", "sans-serif" !important;
letter-spacing: .02em;
position: absolute;
top: 128px;
left: 0px;
width: 400px;
height: 35px;
text-align: center;
padding-right: 32px;
background-color: transparent;
padding-top: .25em;
font-size: 24px;
/*text-shadow: 0 0 3px #777777;*/
}
/* Simple elements */
a
{
color: #FF6600 ;/*#151B8D; HYPERLINK 0066CC*/
font-style: bold;
/*text-shadow: 0.1em 0.1em 0.1em black;*/
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
a.a_subtle
{
color: #888;
font-style: italic;
text-decoration: none;
}
a.a_subtle:hover
{
color: #0000ff;
font-style: regular;
text-decoration: underline;
}
a.a_download
{
display: block;
color: #444444;
font-size: 20px;
text-decoration: none;
text-decoration: underline;
clear: left;
}
a.a_download:hover
{
color: #0000ff;
}
glowred
{
color: rgb(255, 102, 0);
/*text-shadow: 0.1em 0.1em 0.1em black;*/
}
.buildsbox
{
text-align: left;
display: inline-block;
border: 1px solid #bbbbbb;
border-radius: 3px;
padding: 12px;
overflow: scroll;
max-height: 512px;
width: 700px;
}
input
{
margin-bottom: 8px;
}
input[type="text"], textarea
{
border: 1px solid;
font-size: 16px;
padding: 3px;
}
input[type="submit"]
{
border: 1px solid;
font-size: 16px;
padding: 3px;
}
input[type="submit"]:hover
{
background-color: #CCCCFF;
cursor: pointer;
}
label
{
font-size: 15px;
}
.errorbox
{
display: block;
margin-top: 5px;
margin-bottom: 5px;
border: 1px dashed #903333;
border-radius: 2px;
padding: 5px;
background-color: #FFBBBB;
}
.successbox
{
display: block;
margin-top: 5px;
margin-bottom: 5px;
border: 1px dashed #339033;
border-radius: 2px;
padding: 5px;
background-color: #BBFFBB;
}
/* Posts/text */
h1
{
font-family: "League Gothic", arial, sans-serif !important;
text-align: left;
font-size: 30px;
font-weight: normal;
margin-bottom: 16px;
display: block;
}
h2
{
font-family: "League Gothic", arial, sans-serif !important;
margin-bottom: 8px;
margin-top: 16px;
display: block;
font-size: 16px;
letter-spacing: .02em;
font-weight: 700 !important;
}
em, i
{
font-style: italic !important;
font-family: inherit;
font-weight: inherit;
}
/*subtitle_in
{
margin-left: -4px;
margin-bottom: 8px;
margin-top: 16px;
text-shadow: 0 0 1px #111111;
display: inline-block;
font-weight: bold;
}*/
code
{
background: #EEEEEE;
display: inline-block;
padding: 1px;
font-family: "courier new", monospace !important;
}
ul
{
margin-left: 32px;
margin-top: 4px;
margin-bottom: 4px;
}
/*h1
{
height: 1px;
background: transparent;
font-size:0px;
font-weight:normal;
padding:0px;
color: transparent;
}
h1 em
{
font-style:normal;
}*/
#content
{
/*width: 916px; /* 1111 */
float: left;
margin: 0px;
margin-left: 12px;
margin-right: 12px;
width: 976px;
}
h3
{
font-size: 24px;
border-bottom: 2px solid #666666;
}
.category
{
font-size: 18px;
margin: 15px 0 0 20px;
}
ph
{
padding: 0px;
margin-left: -1px;
margin-top: 0px;
}
h5
{
font-size: 12px;
margin: 10px 10px 25px 50px;
line-height: 20px;
border-left: 3px solid #ffffff;
padding-left: 13px;
}
.post
{
display: inline-block;
font-size: 16px;
line-height: 25px !important;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 16px;
margin-right: 16px;
line-height: 20px;
font-weight: 1;
background-color: transparent;
background-image: URL(images/PostBKG.png);
background-repeat: repeat;
padding: 15px;
width: 914px;
text-align: justify;
}
.pagesplit
{
height: 20px;
width: 904px;
background: transparent URL(images/postbreak.png);
margin-top: 16px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.summaryblock
{
width: 440px;
display: inline-block;
vertical-align: top;
margin-left: 8px;
margin-right: 8px;
height: 275px !important;
overflow-x: visible;
overflow-y: hidden;
}
.summaryblock:hover
{
cursor: pointer;
/*color: #000099;*/
}
.summaryblock a
{
text-decoration: none;
color: inherit;
}
.summaryblock a:hover
{
text-decoration: none;
}
.imgleft
{
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
float: left;
margin-right: 16px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 0px;
}
.imgleft_noborder
{
float: left;
margin-right: 16px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 0px;
}
.imgright
{
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
float: right;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 16px;
}
.imgright_noborder
{
float: right;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 8px;
margin-left: 16px;
}
.imgnormal
{
border-radius: 5px;
box-shadow: 2px 2px 5px #888888;
}
.rounded
{
border-radius: 16px;
}
/* Css Effect8 box shadow */
.elegant
{
position:relative;
-webkit-box-shadow:0 1px 4px #000000, 0 0 40px #000000 inset;
-moz-box-shadow:0 1px 4px #000000, 0 0 40px #000000 inset;
box-shadow:0 1px 4px #000000, 0 0 40px #000000 inset;
}
/*#comment
{
margin-left: 32px;
margin-right: 32px;
padding: 8px;
border-radius: 5px;
border: 1px solid #5555ee;
}*/
/* COMMENTS */
.comment
{
color: #000000;
font: 16px "Trebuchet MS", Helvetica, sans-serif;
/*line-height:24px;*/
padding: 15px;
background-color: #f2f2f2;/*#e8e7e2;*/
border: 1px solid #c2c2c2;
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
width: auto%;
margin-right: 32px;
margin-left: 32px;
}
.com_report
{
float: right;
}
.com_title_text
{
font-size:19px;
/*text-transform:capitalize;*/
color: #000000;
}
.com_title
{
padding: 5px;
margin-right: -15px;
padding-left: 10px;
background-color: #ffffff;
margin-left: -15px;
margin-top: -15px;
-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */
border-top-right-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
border-top-left-radius: 5px; /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */
border-bottom: 1px solid #e2e2e2;
width: auto;
}
.com_body
{
margin: 0 auto;
margin-top: 15px;
font: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 15px;
line-height: 21px;
}
.post r
{
color: #2554C7;
font-style: bold;
/*text-shadow: 0.1em 0.1em 0.2em black*/
}
.post span
{
display:block;
text-align:center;
}
.post form
{
display:block;
text-align:left;
}
.post table
{
display:block-inline;
border-collapse: collapse;
border: 2px solid #DDDDDD;
margin-left: 16px;
margin-right: 16px;
}
.post table caption
{
text-align: center;
font-size: 18px;
font-weight: bold;
margin-top: 3px;
}
.post td
{
border: 1px solid #DDDDDD;
padding: 5px;
font-size: 16px;
font-weight: normal;
}
.post th
{
border: 1px solid #DDDDDD;
padding: 5px;
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
font-size: 16px;
}
input.myButton
{
background-image: url('images/formbutton.png');
width: 200px;
height: 48px;
border-style:none;
font-size: 20px;
color: #ffffff;
}
input.myButton:hover{
background-image: url('images/formbutton_hover.png');
}
input.myButton:active{
background-image: url('images/formbutton_press.png');
}
.cap
{
font-style: italic;
color: #666666;
display: block;
text-align: center;
}
#full_citation
{
display: none;
}
#full_citation_link
{
display: inline;
}
/* Footer */
footer
{
height: auto;
margin-left:auto;
margin-right:auto;
margin-bottom: 16px;
/*background: #000000;*/
background: transparent;
font-size: 12px;
/*color: #fff;*/
width: 984px;
border-radius: 8px;
text-align: center;
padding: 8px;
}
footer a
{
color: #FFF;
}
<!DOCTYPE html>
<body>
<!-- Header -->
<div id="container" class="clearfix">
<div class="nav">
<ul>
<li>Home
</li><li>Tech
<ul>
<li>Subject 1</li>
<li>Subject 2
<ul>
<li>An Item</li>
<li>Some Other Item</li>
<li>And Yet Another!</li>
<li>I Am Running Out of Ideas
<ul>
<li>Even More To Show Expansion</li>
<li>And More</li>
<li>And More!</li>
</ul>
</li>
<li>One Last Item</li>
</ul>
</li>
<li>Subject 3</li>
<li>Subject 4</li>
</ul>
</li><li>Personal
<ul>
<li>Subject 1
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>5555</li>
</ul>
</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li><li>Software
<ul>
<li>Subject 1</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li><li>Contact
<ul>
<li>Subject 1</li>
<li>Subject 2</li>
<li>Subject 3</li>
</ul>
</li>
</ul>
</div>
<div class="announcement">
<p>
<b>News - </b> Incredibly exciting news goes here!
</p>
</div>
<div id="pagecategory">Test Pages</div>
<div class='header' style="width: 1000px; height: 168px; background: #999999 url('http://www.bitfracture.com/images/header.png') 100% 100% no-repeat;') 100% 100% no-repeat; "></div>
<br/>
<div id="content">
<div class="post">
<h1>Test Page</h1>
Notice that when hovering over "Tech" and opening any sub-menu, all parent menus resize to the size of the sub-menu.<br/><br/>
Also notice that when hovering over "Personal" all sub-menus are now float as far left as the width of the parent, rather than their own width, leaving a gap. <br/><br/>
</div>
</div>
</div>
<footer>
© 2008-2015 Erik Greif All Rights Reserved. <br>Site design and content created by Erik Greif.
</footer>
</body>
</html>
I want to set equal margins between "Li" elements in the navigation.
right now there is slightly difference between the
margin left and right as shown in the pic below.
Here is a fiddle link
Here is the css:
.nav {
background-color: white;
width: 100%;
min-height: 29px;
line-height: 26px;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
position: relative;
border: none;
font-size: 15px;
font-weight: normal;
}
.nav, .nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 2.5;
/* font-size: 13px; */
z-index: 100;
}
.nav li {
float: left;
}
.nav a {
background-color: white;
text-decoration: none;
display: block;
z-index: 9999;
padding-right: 5px;
padding-left: 5px;
}
.nav ul a {
/* border-right: 1px solid #333333; */
text-indent: 4px;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
width: 6.5em;
line-height: 16pt;
}
.nav > ul > li > a {
width: 6em;
}
Remove the width on your <a> elements:
and add this:
.nav li {margin-right: 10px /* or whatever margin you want */}
.nav li:last-child {margin-right: 0}
.nav {
background-color: white;
width: 100%;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
font-size: 15px;
font-weight: normal;
}
.nav, .nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 2.5;
/* font-size: 13px; */
z-index: 100;
}
.nav li {
display: inline;
margin: 0 10px;
}
.nav li a {
background-color: white;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
}
add the reset of the styling as you wish.
edit: use position and z-index only when it is necessary
fiddle
You could try adding word-spacing: 5px; in the nav class:
.nav {
background-color: white;
width: 100%;
min-height: 29px;
line-height: 26px;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
position: relative;
border: none;
font-size: 15px;
font-weight: normal;
word-spacing: 5px;
}
Hope this helps.