This is my code:
a:link,
a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
position: center;
top: 0%;
margin: 0px 0 0 0px;
height: auto;
width: auto;
font-family: cursive;
}
a:hover,
a:active {
background-color: green;
color: white;
}
1st
2nd
3rd
Assuming you mean some kind of container to put the buttons in, wrap it in a div:
a:link, a:visited { background-color: white; color: black; border: 2px solid green; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; position: center; top: 0%; margin: 0px 0 0 0px; height: auto; width: auto; font-family: cursive; } a:hover, a:active { background-color: green; color: white; }
.container {
background: red;
padding: 0.5em;
}
<div class="container">
1st
2nd
3rd
</div>
You can wrap them in a div and give background
div {
background: blue;
padding: 12px;
}
a:link,
a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
position: center;
top: 0%;
margin: 0px 0 0 0px;
height: auto;
width: auto;
font-family: cursive;
}
a:hover,
a:active {
background-color: green;
color: white;
}
<div>
1st
2nd
3rd
</div
Related
My border keeps stretching whenever I center the text in the middle. I want the border to be just around the text not around the whole middle area.
Here is my code:
#EnterHouse {
text-align: center;
font-weight: bold;
font-size: x-large;
position: fixed;
bottom: 0;
margin-bottom: 25px;
overflow: hidden;
border: 10px solid black;
background-color: black;
display: inline-block;
}
#EnterHouse {
float: left;
width: 100%;
}
#EnterHouse a {
text-decoration: none;
color: orange;
}
#EnterHouse a:hover {
color: red;
<body>
<div id="IKWYDLH">Example</div>
<div id="EnterHouse">Hello World</div>
</body>
You can nest the text in a span. Remove the border from #EnterHouse and use padding to give it some extra height. Then just set the border on the span element.
#EnterHouse {
text-align: center;
font-weight: bold;
font-size: x-large;
position: fixed;
bottom: 0;
margin-bottom: 25px;
overflow: hidden;
padding: 10px;
background-color: black;
display: inline-block;
}
#EnterHouse {
float: left;
width: 100%;
}
#EnterHouse a {
text-decoration: none;
color: orange;
}
#EnterHouse a:hover {
color: red;
}
span {
border: 1px solid red;
}
<body>
<div id="IKWYDLH">Example</div>
<div id="EnterHouse"><span>Hello World</span></div>
</body>
Only use floats and absolutes if you really have to. For this, change the display to table and add margin: 0 auto
#EnterHouse {
text-align: center;
font-weight: bold;
font-size: x-large;
margin-bottom: 25px;
overflow: hidden;
border: 10px solid black;
background-color: black;
display: table;
margin: 0 auto;
}
#EnterHouse a {
text-decoration: none;
color: orange;
}
#EnterHouse a:hover {
color: red;
<body>
<div id="IKWYDLH">Example</div>
<div id="EnterHouse">Hello World</div>
</body>
#EnterHouse {
text-align: center;
font-weight: bold;
font-size: x-large;
position: fixed;
bottom: 0;
margin-bottom: 25px;
overflow: hidden;
background-color: black;
display: inline-block;
}
#EnterHouse {
float: left;
width: 100%;
padding:1pc;
}
#EnterHouse a {
text-decoration: none;
color: orange;
border: 10px solid yellow;
}
#EnterHouse a:hover {
color: red;
}
I'm having some troubles to align the upper_navdiv with the content div.
I want the upper_nav with links aligned with the right-hand side margin and that grows in the left-hand side direction depending on how many links there are inside and the width of each boxes.
Could you check which is the problem?
upper_nav is child of header that takes the whole width of the page:
div#upper_nav {
position: absolute;
bottom:0;
right:0;
width:80%;
}
So I would that the width would be the 80% of the parent width but I don't understand why the margin is not aligned correctly.
Here the example of my page:
html {
margin: 0;
padding: 0;
background-color: #ffffff;
font-size: 17px;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color: #000;
text-align: justify;
background-image: url('url_immagine');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div#container {
overflow: hidden;
width: 95%;
margin: 0px auto;
background-color: #ffffff;
}
div#header {
/*background: url('header.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:18vw;*/
position: relative;
}
div#upper_nav {
position: absolute;
bottom: 0;
right: 0;
width: 80%;
/*background-color:#e6e6e6;*/
}
div#navigation_left {
padding: 1% 1%;
float: left;
width: 21%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#content {
overflow: auto;
margin-left: 25%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#footer {
clear: both;
/*background: url('footer.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:5vw;*/
width: 100%;
position: relative;
}
div#footer_content {
position: relative;
bottom: -50%;
text-align: center;
z-index: 9999;
background-color: #e6e6e6;
}
P {
color: #000;
font-family: Tahoma;
}
a {
text-decoration: none;
color: #0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,
h3,
h4,
h5,
h6,
h7,
h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_header {
list-style: none;
line-height: 150%;
text-align: center;
}
ul#menu_header li {
background-color: #737373;
right: 0;
width: 19.6%;
margin: 0.2%;
float: left;
/* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
text-decoration: none;
}
ul#menu_header li.active,
ul#menu_header li:hover {
background-color: #b1b1b1;
}
ul#menu_left {
display: block;
list-style: none;
text-align: left;
text-decoration: none;
padding-left: 5%;
}
ul#menu_left li {
margin: 1%;
font-size: 5vw;
}
ul#menu_left li a {
color: #000;
display: block;
line-height: 150%;
text-decoration: none;
}
ul#menu_left li.active,
ul#menu_left li:hover {
background-color: #c9c9c9;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.panel a {
color: #000
}
.panel a:hover {
background-color: #b1b1b1
}
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://placehold.it/1600x900" width="100%" alt="Riunione annuale GTTI SIEm2019" />
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">links</ul>
</div>
<div id="content">
<p>text</p>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</div>
</body>
</html>
You notice the non-alignment resizing the window.
I have been working on fixing this but cannot figure out what I am missing. I would like for drop down list to show right below its parent. The list shows but all go to far left and forces the remaining nav items to drop down to another line. i have included a snippet for what is currently looks like and an image of what I want it to look like. Also, I have been trying to figure out how to add down fa fa-caret to nav items with drop down list. Please help!
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
overflow: hidden;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 20px;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
You can achieve this by first making the div.list element into an absolute positioned. The 'display:block' property was pushing all the other content down to the next row because the block element was taking up space.
As you see now the list is no longer pushing the content down but now it is not aligned to the correct nav item. We are also going to add a left:0 so that the div.list is to the left of the parent property.
Now the parent property needs a position of relative so that the left:0 on the child element is being positioned relative to the parent element.
.dropdown:hover .list {
display: block;
position: absolute;
left: 0;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
The problem with your CSS code is, you missed to add position: relative and position: absolute to the .dropdown and .list selectors, which is compulsory to create dropdown. Try this code.
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar li:hover > a {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
position: relative;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background-color: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
--> Please update following code in your existing file
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
}
.list {
opacity: 0;
visibility: hidden;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
top: 20px;
left: 0;
transition: 0.3s ease-in-out;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
opacity: 1;
visibility: visible;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
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 looking to get rid of the "inbetween" borders of the nav bar.
I have numerous ul's and li's and it seems to be interfering with my nav bar even though I assigned classes to it.
Here's a pic what it should look like:
body{
background-image: url("../Images/bg.jpg");
color: white;
}
h1{
font-family: sans-serif;
font-size: 4em;
}
h2{
height: 56px;
font-family: sans-serif;
text-align: center;
}
.white{
color: white
}
.blue{
color: #00bfff
}
li{
display: block;
border-style: solid;
border-color: white;
border-width: 1px;
padding: 4px;
}
ul{
border-style: solid;
border-color: white;
border-width: 1px;
width: 100%;
margin: 0px;
padding: 0;
font-family: sans-serif;
}
.small{
width: 270px;
float: left;
}
.red{
background-color: #FF4500;
}
.orange{
background-color: #FF8C00;
}
.yellow{
background-color: #FFBF00;
}
.brown{
background-color: #9C6E03;
}
.black{
background-color: #0d1a00
}
img{
width: 100%;
height: 184px;
}
.zoom{
width: 370px;
height: 600px;
font-size: 20px;
float: left;
background-image: url("../Images/bg.jpg");
margin-top: -50px;
}
.menuUl{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden
}
.menuLi{
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: firebrick;
border-radius: 5px:
}
note: I am aware that the href links aren't in yet.
JS fiddle:
https://jsfiddle.net/rsgq3v5e/
html, body {
background-color:#222;
}
.menuUl {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
}
.menuLi {
float: left;
}
li a {
border-radius:5px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: firebrick;
}
<ul class="menuUl">
<li class="menuLi"><a class="active" href="EindOpdracht.html">COURSES</a>
</li>
<li class="menuLi">INFO DAY
</li>
<li class="menuLi">LOCATIONS
</li>
</ul>
html, body {
background-color:#222;
}
.menuUl {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-top: solid 1px #EEE;
border-bottom: solid 1px #EEE;
}
.menuLi {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-radius: 10px;
}
li a:hover {
background-color: firebrick;
}
li a.active {
background-color: firebrick;
}
<ul class="menuUl">
<li class="menuLi"><a class="active" href="EindOpdracht.html">COURSES</a>
</li>
<li class="menuLi">INFO DAY
</li>
<li class="menuLi">LOCATIONS
</li>
</ul>
.menuUl {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background: #424242;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.menuLi {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #e65e0f;
border-radius: 7px;
}