I am trying to fix my content alignment on the navigation bar. I made the Navigation bar mobile ready first.
.sidebar{
position: fixed;
top:0;
left:-300px;
width: 300px;
height: 100vh;
background: #262626;
transition: 1s;
padding 20px;
text-align: center;
box-sizing: border-box;
}
.sidebar.active{
left: 0px;
}
.menu-options a{
color: #fff;
font-family: sans-serif;
text-decoration:none;
display: block;
padding: 10px 0px;;
margin: 6px 0px ;
text-transform: uppercase;
font-size: 18px;
transition: .5s;
}
When the width of the screen reaches a certain size I try to remove the nav icon (hamburger button) and the image. I then try to use flex box and justify the content to have space in between.
#media screen and (min-width:800px){
.sidebar{
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 7%;
justify-content: space-between
}
.menu-options{
display: flex;
}
.menu-options a{
padding: 10px 22px;
}
.social-icons{
position: static;
width: auto;
}
.social-icons i{
padding: 10px 22px;
}
.nav-icon,
.sidebar img{
display: none;
}
}
Here is the HTML
<body>
<header>
<!-- Nav icon-->
<!-- Mobile social media sidebar-->
<div class="sidebar">
<div class="nav-icon">
<div class="hamburger"></div>
</div>
<img src="images/wheel_img_web.png">
<nav class ="menu-options">
About
Portfolio
Contact
</nav>
<!-- social media icons -->
<nav class="social-icons">
<i class="fa fa-linkedin" aria-hidden="true"></i>
<span class="sr-only"></span>
<i class="fa fa-github" aria-hidden="true"></i>
<span class="sr-only"></span>
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="sr-only"></span>
</nav>
</div>
</header>
</body>
My goal is to have the menu options on the left and the social media icons to the right. The menu options seem to center align for some reason. I believe that it is because it still sees the hamburger and the image as an object. I have this assumption because when I remove the nav-icon (hamburger) and the img banner from the DOM it does what I want it to do. What can I do to fix this situation? Also I have included images in this link that might give a better prespective https://drive.google.com/drive/folders/1yx_VPB-P19rOwf9W66c-jVlJbCaI_04R?usp=sharing . Thanks
You'll want to add the following to make it work (only one line). This forces the flex child, .menu-options, to take the most space contextually available.
#media screen and (min-width:800px) {
…
.menu-options {
…
flex-grow: 1;
}
}
Related
I am trying out "flex" with CSS.
I cannot get my nav bar to move to the right. I have tried for hours using margin, changing displays, using float. It won't move passed the middle... Sorry i'm still learning
I have pasted a link to my codepen to show you a better picture:
https://codepen.io/Saharalara/pen/pGyQWZ
The HTML
<div id="page-wrapper">
<header>
<div class="logo">
<img id="header-img" src="https://upload.wikimedia.org/" alt="Minnie Pic">
<span id="logo-name">Minnie & Friends Inc</span>
</div>
<nav id="nav-bar">
<ul id="nav-ul">
<li class="nav-link">Stories<li>
<li class="nav-link">Toys<li>
<li class="nav-link">Suscribe</li>
</ul>
</nav>
</header>
<body>
<container id="container1">
<section>
<h1 id="stories">Minnie & Friends Stories</h1>
<p>
Here you will find all of the best Minnie & Friends toys
and stories.
Choose from a huge variety of stories and the happy gang and they go on
many adventures.
</p>
<section>
<iframe id="video" height="180" src="https://www.youtube.com/watch?
v=crJ1CwD_TX0" frameborder="1" allowfullscreen ></iframe>
</section>
<h2 id="toys">Minnie & Friends Toys</h2>
<p>
Here you will also find many of your favourite characters
to choose from and order to arrive at your doorstep to continue their
adventures with you.
</p>
<h3 id="suscribe">Suscribe to our newletter</h3>
</section>
</container>
</body>
The Css
#page-wrapper {
position: relative;
color: black;
margin: -9px;
padding: 10px;
border: 4px solid;
border-radius: 3px;
background-color: rgba(223, 42, 42, 0.20);
padding: 10px 20px 20px 20px;
}
header {
display: flex;
font-size: 1.3em;
margin-left: -10px;
margin-right: -10px;
background-image: url('https://cdn2.vectorstock.com/i/1000x1000/07/66/pink-
white-star-polka-dots-background-vector-7590766.jpg');
opacity: 0.80;
}
#header-img {
height: 120px;
}
#logo-name {
font-size: 2em;
color: black;
}
h1,
h2,
h3 {
font-size: 2em;
}
//navigation bar
#nav-bar {
display: flex;
justify-content: flex-end; //**not working***
}
#nav-ul {
list-style-type: none;
display: flex;
}
nav li {
padding: 4px;
}
//body
p {
font-size: 1.2em;
}
#video {
border: 5px solid;
border-radius: 3px;
color: pink;
}
Fix 1
The best way to fix this (to me) is to control layout at the flex container (parent) level. It's straightforward and declarative.
header {
…
justify-content: space-between;
}
Fix 2
Another way is to add flex-grow: 1 to your #nav-bar.
#nav-bar {
…
flex-grow: 1;
}
In this instance, setting flex-grow to 1 tells the element to take up the available space in its flex container.
Fix 3
The non-flexbox way would be to add a left auto margin to the #nav-bar, effectively pushing it as far right as possible.
#nav-bar {
…
margin-left: auto;
}
since your header has display: flex property, his childs act like flex items.
So if you want to move whole .nav-bar to right you have to set margin-left: auto to .nav-bar so that element will be pushed to right.
Means .nav-bar will have as big margin as can without breaking on new line from left so element will move to right.
Since the Header element is the container just add justifi-content: space-between; and this will force the elements to go left and right. Another way is to put position: absolute; right: 0; to the nav-bar container but the first way is cleaner.
This should be very simple, and apologies if it's a duplicate. I can't get some text in a span to vertically align beside an icon.
Example:
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
CSS I've tried:
Setting the span to display: inline-block and assigning padding and margin. This also moves the icon up.
Setting the link to position: relative and positioning the span. This causes the icon to move, as the span is now taken out of the flow.
Adjusting the line-height of the span. Again, this affects the icon.
Floating the span. This doesn't work.
Is there something I'm missing? I'm not very familiar with flex, would that be a solution? (Note I have to support very old browsers...)
Suggestions much appreciated!
Add following css:
.box a i,
.box a span {
display: inline-block;
vertical-align: middle;
}
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box a i,
.box a span {
display: inline-block;
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Give the <i> an id (or class, I named it #k), then add this ruleset:
#k { vertical-align: middle; }
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
#k {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a href='#/'>
<span>Search</span>
<i id='k' class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Use CSS Flexbox. Apply display: flex property to .box a and use align-items: center (this will align your items vertically centered).
Have a look at the snippet below:
.box {
width: 30%;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box a {
display: flex;
align-items: center;
justify-content: center;
}
.box a span {
padding-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Hope this helps!
You can easily adjust the positioning of your text in the span if you first make it a block element, and then apply a float. Once this is done, you can apply line-height as you initially mentioned, but without affecting the icon.
Here is a JSFiddle to show what to do. Incredible easy, and you don't have to touch your original CSS: https://jsfiddle.net/pgkjaa8c/
Solution using Floats
.box span {
display: block;
float: left;
line-height: 40px;
}
And you can change the float from left to right if you want the text on the right. Additionally, you can apply left and right padding to push the text away from the icon if you so desire: https://jsfiddle.net/rz4y4696/
.box span {
padding-left: 15px;
display: block;
float: right;
line-height: 40px;
}
Additionally, I advise against using flex. People are constantly pushing flex as a solution, but it eliminates many legacy browsers from support. This would be one of the more traditional ways of implementing this, with fully cross browser, and legacy browser support.
Solution without using Floats
If you want a solution that does not require floats, and will work for varying widths, then you'd have to remove the <i> tag and add your FontAwesome icon to your CSS. You can see the solution here: https://jsfiddle.net/rwkypte8/2/
You can get the value of the FontAwesome search icon here: http://fontawesome.io/icon/search/
The HTML and CSS is below:
HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
</a>
</div>
CSS
.box {
width: 50%;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box span {
display: block;
line-height: 40px;
text-align: center;
}
.box span:after {
padding-left: 20px;
font-family: 'FontAwesome';
font-size: 30px;
content: '\f002';
}
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
I am trying to align a set of images horizontally within a div tag and then display a horizontal scroll bar when the images exceed the length of the div tag. I am relatively new to CSS and have tried everything I can think of. The below code displays my images vertically!!!
Thank you very much for any help.
Inside the body tag:
<div id="TNBox">
<ul class="imagelist">
<li>
<img id="tnimage1" src="images/tn-images/Rio-Street-Art-TN01.jpg">
</li>
<li>
<img id="tnimage2" src="images/tn-images/Rio-Street-Art-TN02.jpg">
</li>
<li>
<img id="tnimage3" src="images/tn-images/Rio-Street-Art-TN03.jpg">
</li>
<li>
<img id="tnimage4" src="images/tn-images/Rio-Street-Art-TN04.jpg">
</li>
<li>
<img id="tnimage5" src="images/tn-images/Rio-Street-Art-TN05.jpg">
</li>
</ul>
</div>
And the CSS:
#TNBox {
width: 500px;
height: 88px;
border: 1px solid black;
position: absolute;
left: 50px;
top: 320px;
overflow-x: auto;
display: inline-block;
text-decoration: none;
}
.imagelist {
list-style: none;
margin: 0px;
padding: 0px;
}
#TNBox{
width: 500px;
height: 88px;
border: 1px solid black;
position: absolute;
left: 50px;
top: 320px;
overflow-x: auto;
display: inline-block;
text-decoration: none;
white-space:nowrap;
}
.imagelist{
list-style: none;
margin: 0px;
padding: 0px;
}
.imagelist li{
display:inline-block;
}
Preview >> jsfiddle (I have styled images too)
Link to fiddle. I also changed the image urls to point to something that exists
http://jsfiddle.net/GVdMz/2/
Here is what I added:
To get the images to display horizontally
.imagelist li{
display: inline;
}
And this will make a horizontal scroll appear if the images extend past the width of #TNBox
#TNBox{
white-space:nowrap;
}
For some reason, I am getting a weird overlapping dropdown menu glitch. It works fine when I open it with Firefox, but when I publish the HTML onto Blogger.com website, it overlaps.
My website I am updating it to is http://clubpenguinspin.com/, as you can see, when you mouseover "Chat", it has so many choices and weird overlapping menus. Heres a picture of it:
http://prntscr.com/aopk4
Take a look at my HTML:
<center>
<!-- Link to styles used for our Navigation Bar -->
<link href="http://cpspintest123.x10.mx/nav-id-19fnroex/tea.css" rel="stylesheet" type="text/css" />
<!-- Link to a file with couple simple JavaScript functions used for our Navigation Bar -->
<script src="http://cpspintest123.x10.mx/nav-id-19fnroex/SimpleNavBarScripts.js" language="JavaScript" type="text/javascript"></script>
<!-- main nav bar titles -->
<!-- Note how the the closing angle bracket of each </a> tag runs up against the next <a> tag,
to avoid leaving a gap between each menu title and the next one. -->
<!-- REPLACE each "placeholder.html" URL below with the specific page you want the user
to go to when the given menu title is clicked. For example, the first link below
is for the "Home" menu title, so you'd probably replace the first URL with index.html. -->
<div class="mynavbar">
<a class="navbartitle" id="t1" href="http://clubpenguinspin.com/"
onmouseout="HideItem('products_submenu');"
onmouseover="ShowItem('products_submenu');"
>Home<a class="navbartitle" id="t2" href="http://xat.com/clubpenguincheatzone"
onmouseout="HideItem('services_submenu');"
onmouseover="ShowItem('services_submenu');"
>Chat<a class="navbartitle" id="t3" href="http://twitter.com/#!/cpcheatzone"
onmouseout="HideItem('funstuff_submenu');"
onmouseover="ShowItem('funstuff_submenu');"
>Twitter<a class="navbartitle" id="t4" href="#"
onmouseout="HideItem('aboutus_submenu');"
onmouseover="ShowItem('aboutus_submenu');"
>Extras<a class="navbartitle" id="t5" href="http://support.clubpenguinspin.com"
onmouseout="HideItem('contact_submenu');"
onmouseover="ShowItem('contact_submenu', 't5');"
>Support</a>
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon
<!-- Products sub-menu, shown as needed -->
<div class="submenu" id="products_submenu"
onmouseover="ShowItem('products_submenu');"
onmouseout="HideItem('products_submenu');">
<div class="submenubox">
</div>
</div>
<!-- Services sub-menu, shown as needed -->
<div class="submenu" id="services_submenu"
onmouseover="ShowItem('services_submenu');"
onmouseout="HideItem('services_submenu');">
<div class="submenubox">
<ul>
<li>CPCheatZone Chat</li>
<li>NoeExclusives Chat</li>
<li>TheCpWorld Chat</li>
</ul>
</div>
</div>
<!-- Fun Stuff sub-menu, shown as needed -->
<div class="submenu" id="funstuff_submenu"
onmouseover="ShowItem('funstuff_submenu');"
onmouseout="HideItem('funstuff_submenu');">
<div class="submenubox">
<ul>
<li>CPCheatZone</li>
<li>444ppenguin</li>
<li>Noe231</li>
<li>Rich Nich</li>
<li>Master Swamp</li>
</ul>
</div>
</div>
<!-- About Us sub-menu, shown as needed -->
<div class="submenu" id="aboutus_submenu"
onmouseover="ShowItem('aboutus_submenu');"
onmouseout="HideItem('aboutus_submenu');">
<div class="submenubox">
<ul>
<li>Freebies</li>
<li>Graphics Store</li>
<li>Club Penguin Cheats</li>
<li>Fun</li>
<li>More coming soon!</li>
</ul>
</div>
</div>
<!-- CONTACTS & DIRECTIONS sub-menu, shown as needed -->
<div class="submenu" id="contact_submenu"
onmouseover="ShowItem('contact_submenu');"
onmouseout="HideItem('contact_submenu');">
<div class="submenubox">
<ul>
<li>Banners</li>
<li>Contact Us</li>
<li>More</li>
</ul>
</div>
</div>
<div class="submenu" id="yeaman_submenu"
onmouseover="ShowItem('yeaman_submenu');"
onmouseout="HideItem('yeaman_submenu');">
<div class="submenubox">
<ul>
</ul>
</div>
</div><!-- end of sub-meus -->
</a></a></a></a></a></div>
</center>
Here is my CSS:
.mynavbar {
position: relative;
width: 974px;
height: 23px; /* corresponds to 'line-height' of a.navbartitle below */
margin: 0; border: 0; padding: 0;
background-color: #005EFF;
border-bottom: #003cff solid 3px;
border-left: #003cff solid 3px;
border-right: #003cff solid 3px;
}
a.navbartitle {
display: block;
float: left;
color: white;
text-shadow: 1px 1px 3px #000;
outline: 0;
background-color: #005EFF;
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0; border: 0; padding: 0;
line-height: 23px; /* corresponds to 'top' value of .submenu below */
text-align: center;
text-decoration:none;
}
a.navbartitle:hover {
background-color: #0241AD;
}
/* menu title widths */
#t1 { width: 104px; }
#t2 { width: 100px; }
#t3 { width: 102px; }
#t4 { width: 102px; }
#t5 { width: 120px; }
#t5 { width: 110px; }
#t6 { width: 120px; }
/* We just specify a fixed width for each menu title. Then, down below we specify
a fixed left position for the corresponding submenus (e.g. #products_submenu, etc.)
Using these fixed values isn't as elegant as just letting the text of each
menu title determine the width of the menu titles and position of the submenus,
but we found this hardwired approach resulted in fewer cross-browser/cross-OS
formatting glitches -- and it's pretty easy to adjust these title widths and the
corresponding submenu 'left' positions below, just by eyeballing them whenever
we need to change the navbar menu titles (which isn't often). */
.submenu {
position:absolute;
z-index: 2;
top: 23px; /* corresponds to line-height of a.navbartitle above */
padding: 0; margin: 0;
width:166px; /* If adjust this, then adjust width of .submenu below a too */
color: white;
background-color: #0241ad;
border: 1px solid transparent; /* box around entire sub-menu */
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 11px;
}
/* Fix IE formatting quirks. */
* html .submenu { width: 148px; } /* IE needs narrower than width of .submenu above */
/* End */
/* position of each sub menu */
/* We just eyeball the position of each submenu here -- can move left or right as needed.
If you adjust menu title text, you might want to adjust these too. */
#products_submenu { left: 0px; visibility: hidden; }
#services_submenu { left: 104px; visibility: hidden; }
#funstuff_submenu { left: 204px; visibility: hidden; }
#aboutus_submenu { left: 306px; visibility: hidden; }
#contact_submenu { left: 408px; visibility: hidden; }
#contact2_submenu { left: 408px; visibility: hidden; }
#yeaman_submenu { left: 517px; visibility: hidden; }
/* Note, each submenu is hidden when the page loads - then made visible when
the mouse goes over the menu title. Using the 'visibility' property instead
of using the 'display' property avoided a bug in some versions of Safari.
(The bug is pretty where esoteric: The browser ignored the 'hover' property
on 'li' objects inside an object whose display property was set to 'none'
when the page loaded...) Using the 'visibility' property instead of 'display'
would normaly take up extra room on the page, but that's avoided here by putting
the submenu on a second layer: see 'position: absolute' and 'z-index: 2'
in .submenu definition, higher up this page. */
.submenu a
{
display: block;
color: #eee;
background-color: #005EFF;
width: 146px; /* This should be width of .submenu above minus right-side padding on next line */
padding: 5px 0px 4px 20px;
text-decoration: none;
background-color: #005EFF;
border-bottom: #003cff solid 1px;
border-left: #003cff solid 1px;
border-right: #003cff solid 1px;
}
ul { position: left; display: block; }
li { position: left; display: block; }
.submenubox {
margin: 0; padding: 0; border: 0;
}
.submenubox ul
{
margin: 0; padding: 0; border: 0;
list-style-type: none;
}
.submenubox ul li {
margin: 0; padding: 0; border: 0;
}
.submenubox ul li a:link { }
.submenubox ul li a:visited { }
.submenubox ul li a:hover
{
color: #c6e8e2; /* text color for submenu items */
background-color: transparent;
border-bottom: transparent solid 1px;
}
Please help me! This is very annoying to my website viewers, and others.
:(
You have to add a closing </a> after "Coming Soon" and your other links:
<a class="navbartitle" id="t1" href="http://clubpenguinspin.com/"
onmouseout="HideItem('products_submenu');"
onmouseover="ShowItem('products_submenu');"
>Home</a><a class="navbartitle" id="t2" href="http://xat.com/clubpenguincheatzone"
onmouseout="HideItem('services_submenu');"
onmouseover="ShowItem('services_submenu');"
>Chat</a><a class="navbartitle" id="t3" href="http://twitter.com/#!/cpcheatzone"
onmouseout="HideItem('funstuff_submenu');"
onmouseover="ShowItem('funstuff_submenu');"
>Twitter</a><a class="navbartitle" id="t4" href="#"
onmouseout="HideItem('aboutus_submenu');"
onmouseover="ShowItem('aboutus_submenu');"
>Extras</a><a class="navbartitle" id="t5" href="http://support.clubpenguinspin.com"
onmouseout="HideItem('contact_submenu');"
onmouseover="ShowItem('contact_submenu', 't5');"
>Support</a>
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon</a>
Fortunately, the problem is simple. Add an </a> to the end of your "Coming Soon" link:
<a class="navbartitle" id="t6" href="#"
onmouseout="HideItem('yeaman_submenu');"
onmouseover="ShowItem('yeaman_submenu');"
>Coming Soon
I'd run a fine tooth comb through that and make sure your HTML is set up properly. Also, considered taking out the JS from the HTML file where possible and making a separate JS file? You'll thank yourself later.