Why does the second and third submenu expand start from another position than the first two menus? I want every menu to start at det same place and end at the same place with a width of 95%.
<html>
<head>
<style>
// css
#menu {
width: 960px;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 95%;
margin: 0;
padding: 0;
list-style: none;
background: #0066ff;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {
display: inline;
}
ul#nav li a {
float: left;
font: bold 1.1em arial,verdana,tahoma,sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #0066ff;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #330000;
background: #abcdef;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav ul {
display: none;
}
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
display: block;
width: 95%;
height: 45px;
position: absolute;
margin: 40px 0 0 0;
background: #abcdef;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial,verdana,tahoma,sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #abcdef;
}
ul#nav li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}
</style>
</head>
<body>
<div id="menu">
<ul id="nav">
<li>Menu 1
<ul>
<li>Menu 1 Submenu item 1</li>
<li>Menu 1 Submenu item 2</li>
<li>Menu 1 Submenu item 3</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Menu 2 Submenu item 1</li>
<li>Menu 2 Submenu item 2
<ul>
<li>Menu 2 Submenu 2 item 1</li>
<li>Menu 2 Submenu 2 item 2
<ul>
<li>Menu 2 Submenu 2 item 1</li>
<li>Menu 2 Submenu 2 item 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu 2 Submenu item 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Menu 3 Submenu item 1</li>
<li>Menu 3 Submenu item 2</li>
<li>Menu 3 Submenu item 3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I have tried to change the margins and other values to, but cant find it. Do you know why?
Since the position of the ul element is absolute, I added left: 0 to it, which keeps them all opening in the same position.
Here's the bit I changed:
ul#nav li:hover > ul {
display: block;
left: 0; /* added to keep positioning the same */
max-width: 960px; /* set the max width of the submenu(s) */
width: 100%; /* set to 100% */
height: 45px;
position: absolute;
margin: 40px 0 0 0;
background: #abcdef;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
And here's a jsfiddle of it.
Edit:
To make everything work the way you want you'll have to change a few more things, you'll want to set all margins in the body to be 0. Also, again the width is set to 960px if you want to adjust that to be smaller adjust that pixel size instead of using percentages.
body {
margin: 0; /* to remove margins */
}
#menu {
width: 960px;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 100%; /* this needs to be 100% if you want to adjust the size, adjust above where it says 960px */
margin: 0;
padding: 0;
list-style: none;
background: #0066ff;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {
display: inline;
}
ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #0066ff;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
/* APPLIES THE ACTIVE STATE */
ul#nav .current a,
ul#nav li:hover > a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #330000;
background: #abcdef;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav ul {
display: none;
box-sizing: border-box; /* needed to help margins */
}
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
display: block;
left: 0; /* added to keep positioning the same */
max-width: 960px; /* set the max width of the submenu(s) */
width: 100%; /* set to 100% */
height: 45px;
position: absolute;
margin: 40px 0 0 0;
background: #abcdef;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #abcdef;
}
ul#nav li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}
And here's the fiddle of the updated changes.
SEE THE DEMO
Here's the CSS you need to add/update:
body {
margin: 0;
}
ul#nav {
width: 100%;
}
ul#nav ul {
box-sizing: border-box;
}
ul#nav li:hover > ul {
left: 0;
max-width: 960px;
width: 100%;
}
Related
There is a navigation menu, the design is as given in the image below.
Now, when I hover on About Us sub-menu gets open.
But when I try to move the cursor to the sub-menu item, the sub-menu gets closed - the reason being that hover is being removed from li.
I want the menu to remain open till the cursor reaches the sub-menu item.
Please Note:The space between Menu and sub-menu has to be kept as it is (As indicated with red border in the image above).
You can find the link to the code, here
Any help would be appreciated!
A quick solution:
ul#nav li:hover > ul {margin: 40px 0 0 0; border-top: 10px solid #b58d69; }
Cheers!
You have to make li a bit higher, so it will cover free space between sub-menu and this particular li a. The simplest solution was in this case to add margin to main a tag inside li. There will be more solutions how to achieve this effect (adding padding inside li and applying background-color to a tag), but this one is the fastest one.
Search for "added" and "changed" notes in css below
#menu {
width: 960px;
height: 40px;
clear: both;
}
ul#nav {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
background: #b58d69 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li {
display: inline-block; /*changed*/
padding-bottom: 10px; /*added*/
position: relative; /*added*/
}
ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
margin: 0;
padding: 0px 20px;
background: #b58d69 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav li a.plus_a { /*added*/
position: absolute;
}
ul#nav .current a, ul#nav li:hover > a {
color: #b58d69;
text-decoration: none;
background: #30251b;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nav ul {
display: none;
}
ul#nav li:hover > ul {
position: absolute;
width: 920px;
height: 45px;
position: absolute;
margin: 50px 0 0 0;
background: #fff;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #b58d69;
text-decoration: none;
margin: 0;
padding: 0 20px 0 0;
background: #fff;
}
ul#nav li:hover > ul li a:hover {
color: #30251b;
text-decoration: none;
text-shadow: none;
}
ul#nav li:hover > ul {
display:block !important;
}
I have done something like what you are asking for and this might give you an idea. Saw it in a tutorial on youtube fro css only drop down. You could use the idea behind this to solve your problem. But this works for when user clicks on the link.
.fixed-nav-container {
height: 90px;
width: 100%;
background-color: #111;
position: fixed;
z-index: 16;
}
.fixed-nav-container:hover {
opacity: 1;
}
.fixed-nav .active {
padding: 23px 0px;
background-color: #2a2730;
box-shadow: inset 0 3px 7px black;
}
.fixed-nav {
width: 100%;
height: 70px;
font-family: Arial, Helvetica, sans-serif;
}
.fixed-nav ul {
display: block;
text-align: center;
}
.fixed-nav ul li {
display: inline-block;
padding: 20px 15px;
font-weight: bold;
width: 15%;
border-right: 2px solid #2a2730;
}
.fixed-nav ul li:last-child {
border-right: 0px;
}
.fixed-nav ul li a {
text-decoration: none;
color: silver;
transition: all linear 0.5s;
-webkit-transition: all linear 0.5s;
padding: 10px 0px;
}
.fixed-nav ul li a:hover {
font-size: medium;
transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
}
.fixed-nav-content {
position: absolute;
top: 70px;
overflow: hidden;
background-color: #111111;
color: #FFFFFF;
max-height: 0px;
}
.fixed-nav-content a {
text-decoration: none;
color: #FFFFFF;
}
.fixed-nav-content a:hover {
background-color: silver;
box-shadow: inset 0 3px 7px black;
color: #2a2730;
}
.fixed-nav-content:active {
max-height: 400px;
}
.fixed-nav-sub ul {
padding: 0px;
list-style-type: none;
text-align: left;
}
.fixed-nav-sub ul li {
width: 20%;
}
.fixed-nav-sub ul li a {
padding: 10px;
display: inline-block !important;
background-color: #2a2730;
box-shadow: inset 0 3px 7px black;
}
.nav-item:focus {
background-color: #2a2730;
padding: 10px;
box-shadow: inset 0 3px 7px black;
}
.nav-item:hover ~ .fixed-nav-content {
max-height: 400px;
transition: max-height 0.4s linear;
}
<div class="fixed-nav-container">
<nav class="fixed-nav">
<ul>
<li>
About
<div class="fixed-nav-content">
<div class="fixed-nav-sub">
<ul>
<li>About Us</li>
<li>Meet The team</li>
<li>Recent Projects</li>
</ul>
</div>
</div>
</li>
<li>
Services
<div class="fixed-nav-content">
<div class="fixed-nav-sub">
<ul>
<li>Civil Works</li>
<li>Electrical</li>
<li>Water Engineering</li>
<li>Telecoms</li>
<li>Info. Technology</li>
<li>Renewable Energy</li>
<li>Consulting</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
I'm working on developing a design I created that has menu tabs that pop up when you are on the active page or when you hover on them.
It looks like this in my design:
When it come to development, I've tried playing around with margins and padding, but each of them just push the rest of the site down.
Here is a Jfiddle if you'd prefer to use that. http://jsfiddle.net/CW3f7/
HTML
<div class="menu-main-navigation-container">
<ul class="nav-menu">
<li class="nav-menu">Home
</li>
<li class="nav-menu">Contact
</li>
<li class="nav-menu">About
</li>
</ul>
CSS
.nav-menu li {
display: inline-block;
position: relative;
background: #d71921;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.nav-menu li a {
color: #fff;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}
.nav-menu a:hover {
background-color: #d71921;
color: #fff;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
ul.nav-menu, div.nav-menu > ul {
margin: 0;
padding: 0 40px 0 0;
}
Any code would be greatly appreciated. All of my Google searches bring up unrelated results.
were you thinking something along the lines of this:
fiddle
.menu-item {
height: 55px;
margin-bottom: -5px;
}
.menu-item:hover, .current-menu-item {
position: relative;
top: -5px;
}
You can add vertical margin for inactive elements, and remove it for active element.
Alternatively you can use absolute position to exclude menu from document flow. Menu size will not impact rest of document.
you could set the z-index to 1 or greater, z-index will place it above the other layer
z-index 0 is default most of your website is probably on that. z-index 1 should display it on top
think of it like x, y, z coordinates
You can do it using positions. Here http://jsfiddle.net/AdrianSis/TU97j/1/ is a fiddle for your case.
<body>
<ul class="nav-menu">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
CSS
ul.nav-menu{
margin: 0;
max-height: 45px;
overflow: hidden;
padding: 0 40px 0 0;
position: relative;
border-bottom: 5px solid #D71921;
}
ul.nav-menu li{
background: none repeat scroll 0 0 #D71921;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: inline-block;
position:relative;
top:10px;
}
.nav-menu li.active, .nav-menu li:hover{
top: 0;
}
.nav-menu li a {
color: #FFFFFF;
display: block;
font-size: 15px;
font-weight: bold;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}
I am writing an article for my blog on the menu.
I am trying to create a Circular drop down menu. It works fine when there are two or more Submenus on all browsers. But if there is only one sub-menu to a parent menu it is displayed way below its intended position.
Here is working copy of the following code in jsfiddle: http://jsfiddle.net/avdhut/LDmM8/5/
I know the problem is in the #menucontainer ul li:hover > ul selector,
its with margin. But if I remove that margin-top menus having 2 or more sub-menus go up and are displayed way above their intended position.
Please help as I cannot find a suitable solution on this issue.
Following is the HTML code:
<div id="menucontainer">
<ul id="hmenu">
<li>Home
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 3</li>
</ul>
</li>
<li>About
<ul>
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>Test 1</li>
</ul>
</li>
<li>Info
<ul>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</li>
</ul>
</div>
Following is the CSS code:
#menucontainer {
margin: 0px;
padding: 0px;
width: 100%;
height: 90px;
}
/* Following selectors will define the color and the border radius for the menu*/
#menucontainer ul, #menucontainer ul li ul {
list-style: none;
margin: 0px;
padding: 0px;
}
/* Following selector will define the style for individual menu or li tags. The following style gives them a look when the menus are not selected.
note that the position proerty is set to relative and dispaly is inline.
*/
#menucontainer ul li {
list-style: none;
margin: 10px;
padding: 0px;
background-color:#2CDF7B;
position: relative;
display: inline;
text-align: center;
/*Setting the height and width for the menu*/
width: 90px;
cursor:pointer;
height: 90px;
/*Setting the border-radius for the menu
various prefix are added so it is supported in older version of
browsers. For IE supported from IE-9+
IMPORTANT: to keep the border radius height and width same to get circle.
*/
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
-khtml-border-radius: 90px;
border-radius: 90px;
/*Adding the box shadow to the menu*/
box-shadow: 0 0 10px black;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
float: left;
}
/* Style for the anchor tag defined in the menu.
*/
#menucontainer ul li a {
margin: 10px;
padding: 10px;
background-color:transparent;
display: block;
text-decoration: none;
text-align: center;
font-family:"Times New Roman", "Arabic";
font-size: 18px;
color: #E3E3C0;
}
/* The hover effect is defined using the below selectors
For the opacity is used to create a semi-transperant look as a hover effect
*/
#menucontainer ul li:hover {
list-style: none;
margin: 10px;
padding: 0px;
opacity: 0.7;
background-color:#2CDF7B;
position: relative;
display: block;
width: 90px;
text-align: center;
cursor:pointer;
height: 90px;
/*Setting the border-radius for the menu
various prefix are added so it is supported in older version of
browsers. For IE supported from IE-9+
IMPORTANT: to keep the border radius height and width same to get circle.
*/
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
-khtml-border-radius: 90px;
border-radius: 90px;
-moz-box-shadow: inset 0 0 10px black;
box-shadow: inset 0 0 10px black;
-webkit-box-shadow: inset 0 0 10px black;
}
#menucontainer ul li:hover a {
margin: 10px;
padding: 10px;
background-color:transparent;
display: block;
text-decoration: none;
text-align: center;
font-family:"Times New Roman", "Arabic";
font-size: 18px;
color: white;
}
/*******************************************************/
/*******************************************************/
/*Sub menu*/
/*******************************************************/
#menucontainer ul li > ul {
display : none;
overflow: hidden;
position: relative;
border-bottom: solid 1px;
border: 0px;
height: 0px;
width: 100%;
}
#menucontainer ul li:hover > ul {
z-index: 10;
float: none;
left: -15px;
margin: 40px 10px 10px 10px;
height: auto;
padding: 0px 5px 0px 0px;
display:block;
width: 100px;
}
#menucontainer ul li:hover > ul li, #menucontainer ul li a:hover > ul li {
list-style: none;
margin: 10px;
padding: 0px;
background-color:#2CDF00;
position: relative;
display: inline;
text-align: center;
/*Setting the height and width for the menu*/
width: 90px;
cursor:pointer;
height: 90px;
/*Setting the border-radius for the menu
various prefix are added so it is supported in older version of
browsers. For IE supported from IE-9+
IMPORTANT: to keep the border radius height and width same to get circle.
*/
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
-khtml-border-radius: 90px;
border-radius: 90px;
/*Adding the box shadow to the menu*/
box-shadow: 0 0 10px black;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
float: left;
}
/*******************************************************/
#menucontainer ul li:hover > ul li:after, #menucontainer ul li a:hover > ul li:after {
content:" ";
border: solid transparent;
margin: 0px;
padding: 0px;
position: absolute;
pointer-events: none;
border-color: rgba(44, 223, 123, 0);
border-top-color: #2CDF00;
top: 98%;
left: 50%;
margin-left: -10px;
border-width:10px;
}
#menucontainer ul li:hover > ul li:before, #menucontainer ul li a:hover > ul li:before {
content:" ";
border: solid transparent;
margin: 0px;
padding: 0px;
position: absolute;
pointer-events: none;
border-color: rgba(44, 223, 123, 0);
border-bottom-color: #2CDF00;
bottom: 98%;
left: 50%;
margin-left: -10px;
border-width:10px;
}
/*******************************************************/
Just some changes to css and you are done:-
#menucontainer ul li > ul {
display : none;
overflow: hidden;
position: absolute; //implement absolute
border-bottom: solid 1px;
border: 0px;
height: 0px;
width: 100%;
top:90px; //add top
}
#menucontainer ul li:hover > ul {
z-index: 10;
float: none;
left: -15px;
margin: 5px; //change it to this
height: auto;
padding: 0px 5px 0px 0px;
display:block;
width: 100px;
}
Working fiddle:- http://jsfiddle.net/LDmM8/7/
It has nothing to do with the fact that you only have 1 item in that dropdown menu. You can try and add more and see it's still happening. The real reason is that the "Contact Us" button is taking two rows instead of one like the other buttons.
The problem is solved by setting a fixed height for the anchors.
jsFiddle Demo
#menucontainer ul li a {
height:33px;
}
I am trying to build a pure CSS hover menu and I having two issues with my current code.
When the user hovers over an li tag with a sub-menu ul tag, it push the item up instead of hovering below.
The sub-menu ul tag is not taking the width of the parent li tag
Here is the source code:
You can also see a working copy of the code here: http://jsfiddle.net/Fbgug/
HTML:
<ul id="subnav">
<li class="subnavtab">
Plan Your Visit
<ul class="sub-menu">
<li>Fee and Hours</li>
<li>Directions</li>
<li>Field Trips</li>
<li>Birthday Parties</li>
<li>Rentals</li>
</ul>
</li>
<li class="subnavtab">
Tour the Museum
<ul class="sub-menu">
<li>Artville</li>
<li>ArtZone</li>
<li>Exhibitions</li>
</ul>
</li>
<li class="subnavtab">
Program & Events
<ul class="sub-menu">
<li>Weather or Not</li>
<li>Classes & Workshops</li>
</ul>
</li>
<li class="subnavtab">Membership</li>
<li class="subnavtab">Donate</li>
</ul>
CSS:
#subnav { margin-top: 20px; width: 740px; float: left; position: relative; }
.subnavtab { background-color: #A1CD3A; padding: 10px 10px 10px 10px; margin: 0 1px 0 1px; display: inline-block;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
-webkit-border-radius-topright: 15px; -moz-border-radius-topright: 15px; border-top-right-radius: 15px;
-webkit-border-radius-topleft: 15px; -moz-border-radius-topleft: 15px; border-top-left-radius: 15px;
border-radius: 15px 15px 0px 0px;
behavior: url(pie.htc);
}
.subnavtab:first-child { margin-right: 3px; margin-left: 0px; }
.subnavtab:last-child { margin-right: 0px; margin-left: 3px; }
.subnavtab a { color: #000; text-decoration: none; font-weight: bold; font-size: large; }
.subnavtab a:hover { color: #fff; text-decoration: none; font-weight: bold; font-size: large; }
#subnav ul.sub-menu
{
display: none;
position: relative;
left: -10px;
padding: 10px;
z-index: 90;
list-style-type: none;
margin-left: 5px;
}
#subnav ul.sub-menu li { text-align: left; }
#subnav li:hover ul.sub-menu { display: block; background-color: #A1CD3A;
-webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-left-radius: 15px;
border-radius: 0px 0px 15px 15px;
behavior: url(pie.htc);
}
#subnav ul.sub-menu a { color: #000; text-decoration: none; font-weight: bold; font-size: small; }
#subnav ul.sub-menu a:hover { color: #fff; text-decoration: none; font-weight: bold; font-size: small; }
Since your li elements have display: inline-block adding vertical-align: top; should do the trick:
.subnavtab {
...
vertical-align: top;
}
http://jsfiddle.net/Fbgug/1/
Add vertical-align: top; to .subnavtab.
EDIT: dfsq beat me to it.
I am working on this site, and I have a requirement to make navigation menus that expand when you mouse over them, and that have white vertical bars that separate the entries. And all the way to the right would be the ability to search.
The site is: http://www.problemio.com and I am talking about the items that have the background image near the top of the screen that has the words "problems support"
I have this html for that div:
<div class="nav_bar">
<!-- connect buttons and menu go here -->
<div class="nav">
<div class="icons">
</div>
<div class="menusystem" id="site_nav">
<ul class="main_menu_ul">
<li class="main_menu_li">Support
</li>
<li class="main_menu_li">Problems
<ul class="child_menu_ul">
<li class="first">Categories</li>
</ul>
</li>
</ul>
<form name="form" method="post">
Search: <input type="text" size="20"></input>
<input type="submit" class="button" value="Search"></input>
</div>
</div>
And I have this css for the nav_bar
.nav_bar
{
background-image: url('http://www.problemio.com/img/ui/problemiomainbluebar.png');
background-repeat: repeat-x;
border-bottom: 1px solid #462c1f;
border-top: 1px solid #462c1f;
margin-top: 5px;
}
/* styles for nav_bar: */
.nav_bar a
{
z-index: 20;
width:100%;
/* background:#ffce2e; the comehike strip with orange */
/* background:#2e6ea4; the comehike strip with blue */
color: white;
position: relative;
}
.nav_bar .nav
{
width:60em;
height: 40px;
margin: 0 auto;
position: relative;
z-index: 20;
}
.nav_bar .icons
{
position: absolute;
left: 0;
display: inline-block;
}
.nav_bar .icons div
{
display: inline-block;
position: relative;
top: 10px;
float:left;
}
.nav_bar .nav #site_nav
{
position: absolute;
right: 0.5em;
top: 0.2em;
z-index: 20;
}
and this css for the pieces that make up the dropdowns:
.menusystem
{
position: absolute;
font-size: 1em;
}
.menusystem ul, .menusystem li
{
margin: 0;
padding: 0;
}
.menusystem li
{
list-style: none outside none;
}
.menusystem ul
{
list-style: none;
/*
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
*/
}
.menusystem ul li
{
position: relative;
/*
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
*/
}
.menusystem ul li ul
{
display: none;
position: absolute;
top: 1.6em;
right: 0;
width: 10em;
}
.menusystem li a {
display: block;
padding: 5px 10px;
/* dark blue */
/* border: 1px solid #2e6ea4; */
text-decoration: none;
}
.menusystem ul li.main_menu_li {
float:right;
width: 10em;
margin-right:0.2em;
text-align: center;
}
/* IE-Win (Holly hack) reads the list item line breaks, so lets hide those \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
.menusystem li:hover ul, .menusystem li.mouseHover ul {
display: block;
}
.menusystem li ul.child_menu_ul li a
{
/*
color: #fff;
*/
color: #fff;
/* light blue */
/* background: #7ba9c9; */
font-size: 80%;
text-shadow: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-bottom: 1px solid #2e6ea4;
border-top: 0px;
background: none repeat scroll 0 0 #2E6EA4;
}
.menusystem li ul.child_menu_ul li.first a
{
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 14px;
-webkit-border-top-left-radius: 14px;
-webkit-border-top-right-radius: 14px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-top: 1px solid #2e6ea4;
}
.menusystem li ul.child_menu_ul li.last a
{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 14px;
-moz-border-radius-bottomright: 14px;
-webkit-border-bottom-left-radius: 14px;
-webkit-border-bottom-right-radius: 14px;
}
.menusystem li ul.child_menu_ul li.only a
{
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
}
.menusystem li ul.child_menu_ul li a:hover {
color: #ff0;
background: #2e6ea4;
}
/*.menusystem li.main_menu_li a */
.menusystem ul.child_menu_ul a
{
color: #fff;
/*
background: -moz-linear-gradient(100% 100% 90deg, #668eb8, #2e6ea4 );
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#668eb8), to(#2e6ea4));
*/
text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
/*
-moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
*/
}
.menusystem li.main_menu_li a:hover
{
/* background-color: #2e6ea4; */
color: #ff0;
}
ul li.spaced
{
padding-bottom: 10px;
font-weight: normal;
}
Why not a simple border?
#site_nav>ul>li+li {
border-left: solid 2px white;
}
This adds a 2px-thick white border to the left of any li immediate sibling to a li (so, not the first) immediately inside a ul immediately inside #site_nav.
What do you mean by a "separator"? Just a line? If so, you could simply add a border-bottom property to the CSS for the <li> in question.
add an additional li in between each nav menu give it the class separator and style the separator class.
<ul class="main_menu_ul">
<li class="main_menu_li">Support</li>
<li class="main_menu_separator"></li>
<li class="main_menu_li">Problems
<ul class="child_menu_ul">
<li class="first">Categories</li>
</ul>
</li>
</ul>
.main_menu_separator { width: (width of image); height: (height of menu); background-image: (separator image); }
If I were making a menu system, I would be using <div> elements instead of <ul> and <li>. Then, for a seperator, I need only put <hr /> and Voilà!
Of course, most people seem fixated on using lists for menus...