I am currently working on a horizontal navbar with horizontal submenus. One issue I am facing is getting the elements in mysubnav to align centrally instead of being pushed to the left all the time.
If you need a visual representation of what I mean, please check out this jsfiddle.
Thank you all for taking the time to help with this! I am open to any suggestions, whether it involves CSS or JavaScript.
http://jsfiddle.net/gbkdd7gg/2/
HTML
<div id="menu">
<ul id="navbar">
<li><a href="#">Occasions</a>
<ul>
<li><a href="#">Valentine's Day</a>
</li>
<li><a href="#">Easter</a>
</li>
<li><a href="#">Mother's Day</a>
</li>
<li><a href="#">Father's Day</a>
</li>
<li><a href="#">Wedding</a>
</li>
<li><a href="#">Birthday</a>
</li>
<li><a href="#">Baby</a>
</li>
</ul>
</li>
<li><a href="#">Cards & Invitations</a>
<ul>
<li><a href="#">Invitations</a>
</li>
<li><a href="#">Baby</a>
</li>
<li><a href="#">Weddings</a>
</li>
<li><a href="#">Announcements</a>
</li>
<li><a href="#">Holiday</a>
</li>
</ul>
</li>
<li><a href="#">Canvas Prints</a>
<ul>
<li><a href="#">Full Wrap</a>
</li>
<li><a href="#">Colour Edge Wrap</a>
</li>
<li><a href="#">Frame</a>
</li>
</ul>
</li>
<li><a href="#">Mugs</a>
<ul>
<li><a href="#">11oz Single Image Mug</a>
</li>
<li><a href="#">11oz Double Image Mug</a>
</li>
<li><a href="#">11oz Scrapbook Mug</a>
</li>
<li><a href="#">11oz Fullwrap Mug</a>
</li>
<li><a href="#">14oz Travel Mug</a>
</li>
<li><a href="#">17oz Latte Mug</a>
</li>
</ul>
</li>
<li><a href="#">Device Cases</a>
<ul>
<li><a href="#">Smartphones</a>
</li>
<li><a href="#">Tablets</a>
</li>
<li><a href="#">iPods</a>
</li>
</ul>
</li>
<li><a href="#">Photo Gifts</a>
<ul>
<li><a href="#">Keychains</a>
</li>
<li><a href="#">Mousepads</a>
</li>
<li><a href="#">Playing Cards</a>
</li>
<li><a href="#">Puzzles</a>
</li>
<li><a href="#">T-Shirts</a>
</li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
position: relative;
}
#navbar {
position: absolute;
margin: 0;
padding: 0;
z-index: 999;
width: 100%;
background-color: #F6F6F6;
}
#navbar li {
list-style: none;
float: left;
width: 16.6%;
background-color: #F6F6F6;
text-align: center;
color:#9a9999;
height:40px;
}
#navbar li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold;
}
#navbar li a:hover {
color: #000;
}
#navbar li ul {
opacity:0;
top:0px;
position:absolute;
background-color:black;
z-index: -100;
left: 0;
width: 100%;
-webkit-transition: all 0.2s ease 3s;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease 1s;
}
#navbar li ul li {
background-color:black;
color:white;
font-size:0.8em;
width:14.1%;
}
#navbar li ul li a {
color:white!important;
}
#navbar li:hover ul {
opacity:1;
background-color:black;
position: absolute;
display: inline;
top:40px;
left: 0;
width: 100%;
margin: 0;
padding: 0;
z-index:-100;
}
#navbar * {
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#navbar li:hover li, #navbar li.hover li {
float: left;
background-color:black;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #FFF;
}
#navbar li li a:hover {
color: #357;
}