We are trying to get a drop down menu working but when hovering on the top level, it expands its width. How can we make sure it stays the same ?
The html code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Velocior | Accelerate your web</title>
</head>
<body class="body">
<header role="banner">
<nav role="navigation">
<ul id="top-bar">
<li class="top-icon-block">
<a href="http://ha.efficens-software.com">
<span id="top_icon_home" title="Home"></span>
</a>
</li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><span id="top_icon_register" title="Register"></span></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><span id="top_icon_login" title="Login"></span></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><span id="top_icon_logout" title="Logout"></span></li>
<li class="top-menu-left-edge-block"></li>
<li class="top-menu-button-block">Velocior</li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block">Technology</li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block"><span>Solutions</span></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block"><span>Tech Center</span></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block">
<span>Free BETA</span>
<ul class="sub-menu">
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115">WordPress acceleration</li>
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111">Apache acceleration</li>
<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113">IIS & SharePoint acceleration</li>
<li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114">ISPs and Cloud suppliers</li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112">Developer tools</li>
<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108">Pricing</li>
</ul>
</li>
<li class="top-menu-right-edge-block"></li>
</ul>
</nav>
</header>
<div id="page">
<div id="logo"><img src="images/velocior_logo.png"></div>
<div class="content long-content">
<div class="content-inner-left long-inner-content">
<div class="content-icon">
<img src="images/timer.png">
</div>
</div>
<div class="content-inner-right long-inner-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
</div>
<div id="mailing-list-box">
<div class="mailing-list-separator"></div>
<div class="mailing-list-text">Join our mailing list : </div>
<!-- <div class="mailing-list-input">NREGEV#GMAIL.COM</div> -->
<input type="text" class="mailing-list-input">
<div class="mailing-list-submit"><img src="images/subscribe.png"></div>
</div>
<!--
<div class="content long-content">
<div class="content-inner-left long-inner-content">
some text and icon
</div>
<div class="content-inner-right long-inner-content">
some text but no icons here ..
</div>
</div>
-->
</div>
<div id="footer">
<span>Some footer text here</span>
</div>
</body>
</html>
And the CSS Code looks like this:
body {
background-color: black;
width: 950px;
margin-left: auto;
margin-right: auto;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
}
#top-bar {
position: relative;
display: block;
width: inherit;
height: 39px;
padding: 0px;
margin: 0px;
vertical-align: middle;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
}
.top-icon-block {
width: 50px;
margin: 0px;
display: table-cell;
text-align: center;
}
.top-icon-block a {
position: relative;
top: 5px;
}
.top-icon-block span {
position: relative;
left: 10px;
background-repeat: none;
width: 30px;
height: 20px;
cursor: pointer;
display: block;
}
/* .top-icon-block div:hover { cursor: pointer; } */
#top_icon_home { background-image: url("images/home.png");}
#top_icon_home:hover { background-image: url("images/home_red.png");}
#top_icon_register { background-image: url("images/register.png");}
#top_icon_register:hover { background-image: url("images/register_red.png");}
#top_icon_login { background-image: url("images/login.png");}
#top_icon_login:hover { background-image: url("images/login_red.png");}
#top_icon_logout { background-image: url("images/logout.png");}
#top_icon_logout:hover { background-image: url("images/logout_red.png");}
/*
.top-icon-block img {
padding-top: 8px;
}
.top-icon-block img:hover {
cursor: pointer;
}
*/
.top-icon-sep-block {
width: 4px;
margin: 0px;
display: table-cell;
text-align: center;
/* background-image: url("images/top_icon_separator.png"); */
}
.top-icon-sep-block img {
padding-top: 8px;
}
.top-menu-left-edge-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_left_edge.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-sep-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_separator.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-right-edge-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_right_edge.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-button-block {
width: 80px;
margin: 0px;
background-image: url("images/buttons_bg.png");
background-repeat: repeat-x;
display: table-cell;
}
.top-menu-button-block span, a{
font-size: 12px;
display: inline-block;
width: inherit;
text-align: center;
vertical-align: 6px;
color: white;
text-decoration: none;
}
.top-menu-button-block *:hover {
color: darkorange;
cursor: pointer;
}
#page {
position: relative;
/* background-image: url('images/background.jpg'); */
background-repeat: no-repeat;
display: inline-block;
width: inherit;
height: 564px;
z-index: 3;
/* border-style: solid;
border-color: red;
border-width: 1px;*/
}
#logo {
position: relative;
top: 25px;
left: 25px;
z-index: 2;
}
#footer {
position: relative;
background-color: #414142;
display: inline-block;
width: inherit;
height: 20px;
}
#footer span {
display: inline-block;
width: inherit;
text-align: center;
vertical-align: -2px; /*middle */
font-size: 10px;
color: white;
text-decoration: none;
}
.content {
position: absolute;
border-top: 1px solid lightgrey;
border-bottom: 1px solid grey;
border-radius: 15px 0px 15px 0px;
width: 640px;
bottom: 60px;
right: 0px;
padding: 5px;
background-color: rgba(255,255,255,0.92);
font-size: 13px;
}
.content-inner-left {
position: absolute;
border-right: 1px solid #AAAAAA;
width: 100px;
display: table-cell;
padding: 5px;
}
.content-inner-right {
position: absolute;
width: 515px;
display: table-cell;
left: 120px;
padding: 5px;
}
.content-icon {
position: relative;
width: 60px;
height: 60px;
top: 0px;
margin: auto;
}
.short-content { height: 130px; }
.long-content {height: 280px; }
.short-inner-content { height: 120px; }
.long-inner-content {height: 270px; }
#mailing-list-box {
position: absolute;
width: 350px;
height: 18px;
bottom: 42px;
right: 300px;
background-color: black;
padding: 0px;
}
.mailing-list-separator {
position: absolute;
display: table-cell;
left: 20px;
width: 3px;
height: inherit;
background-image: url("images/subscription_sep.png");
background-repeat: no-repeat;
top: 1px;
}
.mailing-list-text {
position: absolute;
display: table-cell;
left: 50px;
top: 1px;
width: 110px;
height: inherit;
color: white;
}
.mailing-list-input {
position: absolute;
display: table-cell;
left: 150px;
width: 140px;
top: 2px;
height: 13px;
vertical-align: middle;
color: red;
padding: 0px;
border: none;
font-size: 11px;
border-radius:2px;
}
.mailing-list-submit {
position: absolute;
display: table-cell;
left: 290px;
top: 2px;
width: 74px;
height: inherit;
cursor: pointer;
}
/*
nav ul:after {
content: "";
clear: both;
display: block;
}
*/
nav ul ul {
list-style-type: none;
}
nav ul li ul {display: none;}
nav ul li:hover > ul {display: inline-block;}
nav ul ul {
position: abslute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
background-color: grey;
}
/*
#top-bar li ul li {
position: relative;
z-index: 5;
background-color: rgba(0,0,0,0.6);
width: 220px;
height: 20px;
text-align: center;
border-bottom: 1px solid black;
border-radius: 4px;
display: block;
}
*/
/*
#top-bar li ul ul {
top: 0;
left: 100%;
}
#top-bar ul li:hover > ul {
border-left: 0;
display: block;
}
#top-bar li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
#top-bar li ul li a:hover {
background: #e3e3e3;
color: #444;
}
*/
The problem is that when we hover on the BETA menu, it expands to show the sub level menu. HOw can we prevent it ?
Thanks,
I've yet to find a way of doing this without using javascript.
Here's a jQuery snippet of code I use to accomplish this. The code will set explicit widths for the top level li's and the sub-menu ul's.
You'll need some css rules in place to.
The parent items nav ul > li will need to have overflow:visible; set.
Related
How do I create something like this in bootstrap ?
I was thinking of making 4 columns each one of the nodes using the grid layout. But the center node is taking more space than it should take.
Here is the bootply http://www.bootply.com/5ni6EJeTWM
As of now it looks like this
Here is what I came up with. It is not perfect but it should help you get on the track.
UPDATED the code - FULLY RESPONSIVE NOW !!!
.node-list {
margin-bottom: 10px;
overflow: hidden;
width: 100%;
padding: 0px;
margin: 0px;
}
.node-list li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 14px;
width: 25%;
float: left;
position: relative;
text-align: center;
}
.node-list li p {
color: #000;
font-weight: bold;
}
.node-list li:after {
content: '';
width: 20px;
height: 20px;
line-height: 20px;
display: block;
font-size: 18px;
color: #000;
background: #fff;
border: 10px solid #000;
margin: 0 auto 5px auto;
}
.node-list li:before {
content: '';
width: 100%;
height: 6px;
background: #000;
position: absolute;
left: -50%;
bottom: 20px;
z-index: -1
}
.node-list li:first-child:before {
content: none;
}
<ul class="node-list">
<li class="active">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
<li class="">
<p>ABC</p>
</li>
</ul>
I'm trying to do a nav menu in a particular style, It needs to be a bunch of square buttons/list items, then when you hover over an item, the background behind the item changes color, a decent height above the item and behind the drop down list, as seen in the image below.
My issue is that Im curious if I'm doing it the most efficient way and also when I hover over the initial item, it is working but then you go to one of the drop down items and the main/parent item disappears into the background.
Code:
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
padding-top: 100px;
padding-left: 100px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
border: solid 4px #fff;
width: 150px;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
}
li a:hover {
color: #fff;
border: solid 4px #00ee98;
border-top: solid 100px #00ee98;
margin-top: -100px;
}
.droplinks {
position: absolute;
background-color: #00aeef;
min-width: 150px;
display: none;
margin-left: -2px;
}
.droplinks a {
padding: 10px;
display: block;
border: solid 2px #00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li>Home
</li>
<li class="dropbutton">Products
<div class="droplinks">
Widgets
Cogs
Gears
</div>
</li>
<li class="dropbutton">
Services
<div class="droplinks">
Handshakes
Winks
Smiles
</div>
</li>
<li>Shop
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
Then on hovering a menu item, it changes to this;
However, when I then go to a sub menu item the top level item messes up as in the example above. Would could be done to resolve this?
take a look at this fiddle,
and here is how you can properly show the sub menu on hovering on menu item:
li:hover .droplinks{
display: block;
}
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
text-align:center;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
vertical-align: middle;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
width: 150px;
position: relative;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
border-width: 30px 5px;
border-color: #fff;
border-style: solid;
}
li:hover a {
color: #fff;
border-color:#00ee98;
}
.droplinks {
background-color: #00aeef;
top: 100%;
display: none;
margin-left: 0;
min-width: 150px;
position: absolute;
margin-top: -15px;
}
.droplinks a {
padding: 10px;
display: block;
border-width: 2px 4px;
border-style: solid;
border-color:#00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li>Home
</li>
<li class="dropbutton">Products
<div class="droplinks">
Widgets
Cogs
Gears
</div>
</li>
<li class="dropbutton">
Services
<div class="droplinks">
Handshakes
Winks
Smiles
</div>
</li>
<li>Shop
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
I've got a drop down menu that won't appear over the rest of the content. I've set the position to absolute and the z-index to 99 and no luck. Any ideas how to get it to lay on top of the rest of the site?
<body>
<header>
<div class="container">
<h1 class="logo">Relaxr</h1>
<nav>
</span>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="container">
nav {
position: relative;
}
nav ul {
display: none;
}
header {
margin-left: -20px;
margin-right: -20px;
}
body {
margin-left: 20px;
margin-right: 20px;
}
.container {
width: 100%;
margin: 0;
}
#main {
margin-top: 10px;
}
header nav ul li {
display: block;
margin-right: 20px;
margin: 0 20px 0 0;
}
.hamburger {
margin-top: 5px;
margin-right: 80px;
margin-bottom: 20px;
float:right;
position: relative;
display: inline-block;
width: 1.5em;
height: 0.74em;
border-top: 0.2em solid #fff;
border-bottom: 0.2em solid #fff;
}
.hamburger:before {
content: "";
position: absolute;
top: 0.9em;
left: 0px;
width: 100%;
border-top: 0.2em solid #fff;
}
nav ul {
position: absolute;
left: 0; top: 100%;
width: 100%;
background-color: black;
z-index: 99;
Codepen:
http://codepen.io/kiddigit/pen/wWvPJm
In your #media query change
nav {
position: relative;
}
to
nav {
position: absolute;
}
This will keep your menu on top.
I think You should use something like this to work
$(".hamburger").click(function(e){
$("nav > ul").toggle();
});
there is only one difference I've added a closing bracket in
$("nav > ul").toggle();
I have a Horizontal Menu. When the mouse is hovered over the child elements it disappears. The child elements cannot be clicked. I would like the child elements to stay when the mouse is hovered over it.
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 70px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
It's because you have positioned your submenu absolutely, and it's too far away from your parent li, so your mouse is leaving the parent menu before it reaches the submenu. I've added borders to show you.
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 1px solid blue;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 70px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
You have padding, but it's on your a element, and needs to be on your li element, instead. Either add padding-top to your submenu li elements or adjust their top position so that they're directly underneath (aka "touching") the parent element.
Here is the code with the menu moved to top: 40px and the padding added to the submenu li elements:
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li ul li {
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 40px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
For some odd reason, bottom-border works when I set the property to the "li" element, not for the defined "class" name (li-navclass). This presents a problem because I don't want the bottom border to be applied to the footer-links.
What I've tried:
-expanding the menu height
-bottom border, top-border
-different ways to write the property
Would greatly appreciate help on this. Thanks in advance!
.container {
position: absolute;
background:url('../images/bgpic.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
margin: auto;
padding: auto;
height: 655px;
width: 900px;
}
.titlehdr {
margin: 0px;
padding: 0px;
display: inline-block;
width: 897px;
height: 110px;
}
.title-div {
display: inline-block;
position: relative;
height: 100%;
width: 90px;
margin: 0px;
padding: 0px;
}
.title {
position: relative;
top: 40px;
margin: 0px;
padding: 0px;
font-size: 70px;
color: white;
font-family: Mesquite Std;
letter-spacing: 1.2px;
}
.barandgrill-div {
display: inline-block;
vertical-align: bottom;
}
.barandgrill-text {
margin: 0px;
padding: 0px;
font-family: Arial;
font-weight: bold;
}
/*---------------Nav Menu----------------*/
.menu {
padding-left: 0px;
margin-left: 0px;
font-size: 15px;
}
.nav-container {
text-align: center;
display: block;
top: 100px;
margin: 0px;
padding: 0px;
width: 900px;
height: 40px;
background-color: #901423;
border-style: solid;
border-width: 1px;
border-color: #111111;
}
.menu {
display: inline-block;
text-align: center;
margin: auto;
padding: auto;
list-style-type: none;
overflow: hidden;
font-color: #000000;
}
.li-navclass {
border-bottom: 1px solid #000;
}
li {
display: inline-block;
position: relative;
padding: 0 1em;
font-size: 150%;
}
.nav-text {
color: #ffffff;
font-weight: bold;
opacity: .3;
}
.nav-container ul a {
text-decoration: none;
word-spacing: 200px;
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: Segoe Script;
}
/*---------------Content----------------*/
.content {
display: block;
width: 900px;
height: 500px;
border-style: solid;
border-width: 1px;
background-color: #111111;
opacity: 0.6;
}
/*---------------Footer------------------*/
.foot {
text-decoration: none;
list-style-type: none;
display: block;
position: relative;
text-align: center;
font-size: 12px;
}
.ftr-button {
position: relative;
top: -5px;
list-style: none;
text-decoration: none;
color: rgb(147, 104, 55);
}
.ftr-links {
text-decoration: none;
list-style-type: none;
}
.vert-line {
height: 13px;
border-right: 1px solid #909090;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sticky Navigation Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--Title-->
<div class="titlehdr">
<div class="title-div">
<p class="title">Donatelo's</p>
</div>
<div class="barandgrill-div">
<p class="barandgrill-text">Mediterranean Bar and Grill</p>
</div>
</div>
<!--Navigation Menu-->
<div class="nav-container">
<ul class="menu">
<li class="li-navclass">Story</li>
<li class="li-navclass">Menu</li>
<li class="li-navclass">Gallery</li>
<li class="li-navclass">Catering</li>
<li class="li-navclass">Contact</li>
</ul>
</div>
<!--Grey Box-->
<div class="content">
<div id="sidebar">
<div id="scroller">
</div>
</div>
</div>
<!--footer-->
<div class="foot">
<ul class="ftr-links">
<li class="vert-line">Story</li>
<li class="vert-line">Menu</li>
<li class="vert-line">Gallery</li>
<li class="vert-line">Catering</li>
<li class="vert-line">Contact</li>
</ul>
<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
$( this ).css( "opacity", ".8" );
});
$(".nav-text").mouseout(function() {
$(this).css( "opacity", ".2");
});
$(".ftr-button").mouseover(function() {
$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
$(this).css("color", "rgb(147, 104, 55)");
});
$(".nav-text").click(function() {
$(this).css("opacity", ".8");
});
});
</script>
</html>
Add style to :after
.li-navclass:after {
border-bottom: 1px solid #000;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
}