I have a vertical menu and some overflowing text and i'd like to make the text inline with each other. How would i do this?
For example:
http://i754.photobucket.com/albums/xx182/rache_R/text_zpsbd15aa0d.png
HTML:
<div id="sideMenu">
<ul class="top-level">
<li>Back</li>
<li>Accessories & Merchandise</li>
<li>Accident & Roadside Assistance</li>
<li>Customer Relations</li>
<li>E10 Petrol Compatibility</li>
<li>Insurance</li>
<li>Quality & Safety Actions</li>
<li>Shop</li>
<li>Servicing & Maintenance</li>
<li>Servicing Offers</li>
<li>Warranty</li>
</ul>
</div>
CSS:
#sideMenu {
font-size: 11px;
width: 185px;
padding-top: 35px;
padding-left: 15px;
}
#sideMenu ul {
margin: 0;
padding: 0;
}
#sideMenu li {
list-style: none;
padding: 9px;
padding-left: 25px;
}
ul.top-level {
background: #eceeef;
}
ul.top-level li {
border-bottom: 1px solid #FFF;
border-top: 1px solid #FFF;
}
#sideMenu a {
color: #000;
curser: pointer;
display: block;
height: auto;
text-indent: 10px;
text-decoration: none;
width: 100%;
background-image: url(leftMenuArrowBlack.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 0px;
}
#sideMenu a:hover {
}
#sideMenu li:hover {
background: #fac026;
position: relative;
}
Is this what you want..
Then make your width 200px for #slidemenu..
you can specify text-align:left/right/center in your css to align the text in the vertical menu
Update
you can remove the text-indent and padding-left on the li item and just add text-align:left
#sideMenu a {
color: #000;
curser: pointer;
display: block;
height: auto;
text-align: left;
text-decoration: none;
width: 100%;
background-image: url(leftMenuArrowBlack.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 0px;
}
checkout the jsfiddle http://jsfiddle.net/8U2H5/1/
Related
I'm having trouble writing a code for a simple drop down menu but cant understand what I'm doing wrong still new to coding. Whenever I bring my cursor over the respective dropdown li tag the hover color effect is there but nothing comes down. In a previous attempt when the code was a a little different the list id appeared but it was in an inline manner and was align horizontally not vertically plz help.
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden;
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover {
background-color: #d3d3d3;
color: black;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li id="main">Home</li>
<li id="main">Products</li>
<li id="main">More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li id="main">About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
First of all, you have id="main" applied to multiple elements. id is meant to be unique and applied to only one element.
Second, your hover effect was just a little incomplete. See my changes below.
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
/*overflow: hidden; don't do this if you want dropdowns */
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
#nav>li>a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
#nav>li>a:hover {
background-color: #d3d3d3;
color: black;
}
#nav>li {
position: relative;
display: inline-block;
}
#nav>li ul {
display: none;
position: absolute;
}
#nav>li:hover ul {
display: block;
bottom: -80px;
padding: 10px;
left: 0;
min-width: 100px;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li>Home</li>
<li>Products</li>
<li>More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li>About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
you need to target ul li ul which you will show and hide ... and #main id can not be duplicate on the same page.. working example as below
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden;
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover {
background-color: #d3d3d3;
color: black;
}
ul li{display: inherit;}
ul li ul {
display: none;
width: auto;
position: absolute;
top: 35px;
background: #ccc;
margin: 0;
padding: 0;
}
ul li ul li{display:block; list-style-type:none}
ul li:hover ul {
display: block;
z-index:1000;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li class="nestedchild">More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li id="main">About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
Your css should be like that.
.first .link {
color: black;
transform: rotate(-90deg);
width: auto;
border-bottom: 2px solid #FFFFFF;
position: relative;
top: 0vh;
}
.first {
background: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu {
background-color:red;
}
.bottom-line {
border-bottom:5px solid pink;
}
#navbar{
background-color: #9C9C9C;
margin: 0 auto;
padding: 30px 0;
width: 1200px;
}
#nav{
padding: 0px;
margin: 0px;
font-family: arial;
float: left;
list-style: none;
}
#main{
display: inline;
}
a{
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover{
background-color: #d3d3d3;
color: black;
}
ul li {
float: left;
position: relative;
}
ul li ul {
display: none;
position: absolute;
list-style: none;
top: 32px;
z-index: 5;
background-color: #ddd;
padding-left: 0;
}
ul li:hover ul {
display: block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
and You can also see demo here
How can i make custom pills for navbar like on
screenshot?
I did it by myself, but pills are inside of navbar and the text is not in the center of pill.
I understand, that the problem is inside of .menu li a:hover:not and .menu li a:hover:not(.active). But i don't know, how to make outside of navbar(i mean borders of the pills like on screenshot)
.menu {
padding-top: 10px;
padding-bottom: 10px;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
margin: 0 auto;
padding: 0px;
overflow: hidden;
display: block;
list-style:none;
border-radius: 20px 0 0 0;
background-color: #0b78ad;
text-align: center;
}
.menu li {
list-style-type: none;
text-align: center;
display: inline-block;
}
.menu ul li a {
padding: 10px;
padding-left: 50px;
margin: 0px;
display: block;
text-align: center;
}
.menu li a:hover:not(.active) {
color: #325491;
}
.menu li.active a {
border-radius: 20px 0 20px 0;
border-style: solid;
border-width: 2px;
border-color: #325491;
color: #325491;
background-color: white;
}
<div class="menu">
<ul>
<li class="active">startseite</li>
<li>über uns</li>
<li>zell-linien</li>
<li>downloads</li>
<li>kontakt</li>
</ul>
</div>
.menu {
font-family: Arial, sans-serif;
}
.menu ul {
padding: 0;
list-style: none;
background-color: #0b78ad;
text-align: center;
white-space: nowrap;
height: 34px;
margin: 30px 0;
}
.menu li {
position: relative;
top: -10px;
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0 10px;
}
.menu ul li a {
position: relative;
display: block;
padding: 18px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 2px solid transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
font-weight: 700;
line-height: 1;
transition: all .1s ease-in-out;
}
.menu ul li a.active,
.menu ul li a:hover {
background-color: #FFF;
border: 2px solid #0b78ad;
color: #0b78ad;
}
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skill</li>
<li>Contact</li>
</ul>
</div>
You can do it with just a plain border-radius, like any other property it starts with top, right, bottom and right
.button {
display: inline-block;
background-color: #ededed;
border: 1px solid deepskyblue;
border-radius: 10px 0 10px 0;
padding: 10px 16px;
text-align: center;
}
<div class="button">shape</div>
You can do like this.
1. Navbar you can give a 'max-height' property so that we can set a height for the first-child.
#nav-id {
max-height: 65px;
margin-top: 20px;
}
2.We can set the first 'li' 'margin-top' or 'position'
li:first-child {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 106px;
background: blue;
background-position: center;
margin-top:-20px;
z-index:1;
text-align:center;
}
Here is the working copy:
https://codepen.io/nabanitadasgupta/pen/aLNGgo
So I'm trying to understand why when I specify the width for my .thenav class it is not expanding to the entire width of the page.
I UNDERSTAND that it is taking the characteristics of the .container class, but I don't understand why and what is the solution seeing that i specified the width? PLEASE HELP!
Here is my picture of what's happening (I attached an image of what's happening because the jsfiddle makes the div appear at 100% and it's not):
http://imgur.com/a/zsBqC
Here is my jsfiddle:
https://jsfiddle.net/CheckLife/yox7Ln1b/3/
Here's the code for reference:
HTML:
<div class="header">
<div class="container">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<ul>
<li><a href="http://www.nba.com"/>Home</a></li>
<li onclick="changeP()">About</li>
<li>Players
<ul>
<li onmouseover="slow()"></li>
<li><a href="#kobesec"/>Kobe</a></li>
<li><a href="#"/>Kevin Durant</a></li>
<li><a href="#"/>The Goat</a></li>
</ul>
</li>
<li onclick="slow()">News</li>
</ul>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
header, nav, section, aside, footer, article {
display: block;
}
body {
background-image: url(backwood.png);
width: 100%;
margin: auto;
}
.container {
margin: 0px auto;
background-size: cover;
width: 1300px;
height: 100%;
}
.header {
background:linear-gradient(to right, #5092f4, #f29641);
margin-top: 0px;
width: 100%;
}
.header h1{
text-align: center;
width: 100%;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #f4ca1f;
}
.tmacw {
display:inline;
position: relative;
padding: 0px;
top: 5px;
}
.nba {
margin-right: 10px;
}
.thenav {
background-color: #7886a3;
width: 100%;
height: 85px;
position: relative;
z-index: 1;
}
/* Style for the Nav Bar */
.thenav ul {
padding: 0;
margin: 0;
}
.thenav ul li {
float: left;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
position: relative;
}
.thenav ul li a {
display: block;
color: white;
font-weight: bold;
padding: 33px 10px;
}
.thenav ul li a:hover {
background-color: #47e586;
transition: all 0.90s;
}
/*Dropdown Nav */
.thenav li ul li{
background-color: #7886a3;
border: 2px groove grey;
border-radius: 4px;
position: relative;
}
.thenav li ul li a {
padding: 8px;
text-align:left;
}
.thenav li ul li:nth-child(1) a:hover {
background-color: #F47575;
}
.thenav li ul li:nth-child(2) a:hover {
background-color: #f7d759 ;
}
.thenav li ul li a:hover{
background-color: red;
}
.thenav ul li ul {
display: none;
}
.thenav li:hover ul{
position:absolute;
}
.thenav li:hover ul{
display: block;
}
/* End of Dropdown */
.userlogin {
font-size: 12px;
top:2px;
color: white;
}
input[type=text], input[type=password] {
font-weight: bold;
margin: 0;
font-size: 8px;
height: 10px;
padding: 3px 5px 3px 5px;
color: 162354;
}
/* Stats Button */
.stat input[type=button] {
background-color: #6cd171;
color: blue;
border-radius: 6px;
font-weight: bold;
border: none;
float: left;
margin-top: 20px;
margin-left: 20px;
padding: 2px 2px;
font-family: Verdana, Geneva, sans-serif;
}
.log[type=button] {
background-color: white;
color: #008cff;
border-radius: 4px;
font-weight: bold;
border: none;
padding: 1px 2px 2px 2px;
position: relative;
left: 5px;
top: 3px;
}
A child div that does not have absolute positioning and has a width of 100% (unnecessary if it's display is the default of block) will be set to it's containers width. Your div.container has a width setting of 1300px and it is the parent element of div.thenav, therefore div.thenav's width will also be 1300px.
You can either remove width on the container:
.container {
margin: 0px auto;
background-size: cover;
/*width: 1300px; remove this */
height: 100%;
}
or:
Move div.thenav outside of div.container as in this code:
(https://jsfiddle.net/nod19rze/)
<div class="header">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<!-- contents of thenav here -->
</div>
<div class="container">
</div>
</div>
Either the container should be the first wrapper and then comes the header, which could solve the issue. I am not sure if this is what u need. Please check this fiddle:
https://jsfiddle.net/estgLn1q/1/
<div class="container">
<div class="header">
</div>
</div>
Or if you want to maintain the same html structure, then remove width:1300px from '.container' which will cause the container to take the same width as of its parent.
I would just move #box and .thenav out of .container and start that class after those elements.
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
header,
nav,
section,
aside,
footer,
article {
display: block;
}
body {
background-image: url(backwood.png);
width: 100%;
margin: auto;
}
.container {
margin: 0px auto;
background-size: cover;
width: 1300px;
height: 100%;
}
.header {
background: linear-gradient(to right, #5092f4, #f29641);
margin-top: 0px;
width: 100%;
}
.header h1 {
text-align: center;
width: 100%;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #f4ca1f;
}
.tmacw {
display: inline;
position: relative;
padding: 0px;
top: 5px;
}
.nba {
margin-right: 10px;
}
.thenav {
background-color: #7886a3;
width: 100%;
height: 85px;
position: relative;
z-index: 1;
}
/* Style for the Nav Bar */
.thenav ul {
padding: 0;
margin: 0;
}
.thenav ul li {
float: left;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
position: relative;
}
.thenav ul li a {
display: block;
color: white;
font-weight: bold;
padding: 33px 10px;
}
.thenav ul li a:hover {
background-color: #47e586;
transition: all 0.90s;
}
/*Dropdown Nav */
.thenav li ul li {
background-color: #7886a3;
border: 2px groove grey;
border-radius: 4px;
position: relative;
}
.thenav li ul li a {
padding: 8px;
text-align: left;
}
.thenav li ul li:nth-child(1) a:hover {
background-color: #F47575;
}
.thenav li ul li:nth-child(2) a:hover {
background-color: #f7d759;
}
.thenav li ul li a:hover {
background-color: red;
}
.thenav ul li ul {
display: none;
}
.thenav li:hover ul {
position: absolute;
}
.thenav li:hover ul {
display: block;
}
/* End of Dropdown */
.userlogin {
font-size: 12px;
top: 2px;
color: white;
}
input[type=text],
input[type=password] {
font-weight: bold;
margin: 0;
font-size: 8px;
height: 10px;
padding: 3px 5px 3px 5px;
color: 162354;
}
/* Stats Button */
.stat input[type=button] {
background-color: #6cd171;
color: blue;
border-radius: 6px;
font-weight: bold;
border: none;
float: left;
margin-top: 20px;
margin-left: 20px;
padding: 2px 2px;
font-family: Verdana, Geneva, sans-serif;
}
.log[type=button] {
background-color: white;
color: #008cff;
border-radius: 4px;
font-weight: bold;
border: none;
padding: 1px 2px 2px 2px;
position: relative;
left: 5px;
top: 3px;
<div class="header">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<ul>
<li><a href="http://www.nba.com" />Home</a>
</li>
<li onclick="changeP()">About</li>
<li>Players
<ul>
<li onmouseover="slow()">
</li>
<li><a href="#kobesec" />Kobe</a>
</li>
<li><a href="#" />Kevin Durant</a>
</li>
<li><a href="#" />The Goat</a>
</li>
</ul>
</li>
<li onclick="slow()">News</li>
</ul>
</div>
<div class="container">
</div>
</div>
my code of menu work fine, but only text is a href, how ever i try to make it a bit more user friendly so make even background in to work as href but its not working, can somebody help me to fix it?
My HTML:
<div id="menu">
<ul>
<li>GAMESITES<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>HRY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>SERVERY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>CLANKY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FORUM<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>DOWNLOADS<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>BLOGY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FLASHOVKY<span class="arrow"></span></li>
</ul>
</div>
My CSS:
#menu{
background-image: url("images/menubg.png");
background-repeat: repeat-x;
height: 44px;
width: 983px;
margin: 0 22px;
}
.spacer{
background-image: url("images/menu_spacer.png");
background-repeat: no-repeat;
width: 1px;
height: 25px;
margin: 0px 12px;
}
#menu ul{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
}
#menu ul li{
padding: 0px 5px 0px 0px;
display: inline-block;
color: #f7f7f7;
}
.arrow{
background-image: url("images/sipka.png");
background-repeat: no-repeat;
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Live preview: http://funedit.com/andurit/try4/
Your markup can be heavily simplified into this:
<div id="menu">
<ul>
<li>GAMESITES</li>
<li>HRY</li>
<li>SERVERY</li>
<li>CLANKY</li>
<li>FORUM</li>
<li>DOWNLOADS</li>
<li>BLOGY</li>
<li>FLASHOVKY</li>
</ul>
</div>
Flexbox solution
If you're willing to explore modern CSS specifications, you can always use flexbox instead of relying on inline-block to position your elements — check out the demo fiddle here: http://jsfiddle.net/teddyrised/9FZS8/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
flex: 1 1 auto;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
display: block;
padding: 14px 0;
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Non-Flexbox solution
Otherwise, you can always fallback to floating your individual <a> elements, but that requires you to calculate the padding for each of them carefully so the menu does not overflow: http://jsfiddle.net/teddyrised/9FZS8/2/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#menu ul li {
color: #f7f7f7;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Add to your links a padding of x and a margin of -x, for example:
#menu a {
padding: 20px;
margin: -20px;
}
Make link to take full space:
li > a{
display:inline-block;
width: 100%;
height: 100%;
}
I had a mouseover submenu working very nicely on my site (so nicely in fact that it was working exactly right in Chrome, IE 7 & 8, and FF), but now it's broken somehow and I can't see the problem.
Here's the CSS:
.MainMenu {
width: 90% !important;
min-width: 800px;
height: 42px !important;
padding: 0 0 0 10%;
overflow: hidden;
border-top: 1px solid #0054a6;
border-bottom: 1px solid #0054a6;
background: transparent url("Images/ServiceMenuBG.png");
background-repeat: repeat-x;
}
.MainMenu ul {
padding: 0;
margin:0;
list-style: none;
}
.MainMenu li {
float: left;
position: relative;
height: 31px;
width: 150px;
padding: 11px 0 0 0;
text-align: center;
border-right: 1px solid #0054a6;
}
.MainMenuItem#First { border-left: 1px solid #0054a6; }
.MainMenuItem a {
color: #ffffff;
display: block;
height: 31px;
width: 150px;
font-weight: bold;
text-decoration: none;
}
.MainMenuItem:hover { background: transparent url("Images/ServiceMenuBG.png") repeat-x 0 -42px; }
.SubMenu {
z-index: 500;
display: none;
width: 150px !important;
position: absolute;
top: 10px;
left: 0;
background-color: rgb(51,118,184);
}
.SubMenu li { padding: 0 0 2px 5px; height: 20px !important; width: 143px; }
.SubMenu li a {
height: 20px !important;
font-weight: normal;
color: #ffffff;
text-align: left;
text-decoration: none;
}
.SubMenu li a:hover { text-decoration: underline; }
.MainMenu li.MainMenuItem>ul { top: auto; left: auto; }
.MainMenu li.MainMenuItem:hover ul { display: block; }'
Here's the HTML:
<div class="MainMenu">
<ul>
<li class="MainMenuItem" id="First">Home</li>
<li class="MainMenuItem">Philosophies</li>
<li class="MainMenuItem">Services
<ul class="SubMenu">
<li id="TopItem">Shop Repair</li>
<li>Donations</li>
<li>Consulting</li>
<li id="BottomItem">On-site Service</li>
</ul>
</li>
<li class="MainMenuItem">Contracts</li>
<li class="MainMenuItem">About Us</li>
<li class="MainMenuItem">Contact Us</li>
</ul>
</div>
The SubMenu doesn't display either on mouseover or if I set it's initial display property to block. It's as if it doesn't exist on the page at all.
Thanks in advance for any help.
.MainMenu { overflow: hidden; }
is hiding the sub menus, so remove that line. Line 6 in your CSS.
As Sotiris mentioned
.MainMenuItem a { color: #ffffff; }
hides the top menu items (maybe not on your version because I see you have a background image)