How to properly position 3rd level menu

How to properly position 3rd level menu - css

If you look here under "About ISL" -> "Board of Trustees" you can see I have created a third level dropdown, but how can I properly align that drop down? Below you will see my css.
#menudiv {
width: 999px;
float: left;
clear: left;
height: 250px;
background: url(images/top_bg.png) no-repeat;
margin-top: 10px;
}
#mainmenu {
width: 948px;
height: 63px;
float: left;
margin-left: 16px;
margin-top: 5px;
border: 1px solid #D5D5D5;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
background: url(images/nav_bg.gif) repeat;
}
.mainnav {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav * {
margin: 0;
padding: 0;
list-style: none;
}
.mainnav ul {
position: absolute;
top: -999em;
display: none;
}
.mainnav li {
float: left;
position: relative;
z-index: 999;
height: 63px;
line-height: 55px;
margin-right: 0px;
border-right: 1px solid #D5D5D5;
}
.mainnav li.last {
border-right: none;
}
.mainnav a {
display: block;
font-size: 19px;
margin: 0;
color: #cc9900;
font-family: Copperplate,Arial,Helvetica,Sans serif;
font-weight: 600;
text-decoration: none;
padding: 3px 13px 3px 12px;
color: #555;
text-shadow: 0 1px 1px white;
}
.mainnav li:hover {
text-decoration: none;
border-bottom: solid 0px #ccc;
background: white;
}
.mainnav ul li {
width: 132px;
}
.mainnav li:hover ul,
ul.mainnav li.sfHover ul {
left: 0px;
top: 50px;
padding-top: 0px;
width: 132px;
border-bottom: solid 0px #eaeaea;
background: url(images/nav_dropdown_shadow.gif) repeat-x top;
padding: 6px 0 0px 0px;
margin: 13px 0 0 -1px;
border: 1px solid #D5D5D5;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
width: 175px;
border-bottom-left-radius: 3px 3px;
border-bottom-right-radius: 3px 3px;
}
.mainnav li:hover li ul,
.mainnav li.sfHover li ul {
top: -999em;
}
.mainnav li li:hover ul,
ul.mainnav li li.sfHover ul {
left: 132px;
top: -8px;
}
.mainnav li:hover ul,
.mainnav li li:hover ul {
top: -999em;
}
.mainnav li li {
color: #555;
display: block;
padding: 0px;
height: auto !important;
border: none;
width: 175px;
background: url(images/nav_dropdown_bg.gif) repeat;
margin: 0;
}
.mainnav li li a:link,
.mainnav li li a:visited {
display: block;
height: auto !important;
line-height: 30px;
color: #333;
font-weight: normal;
font-family: arial,helvetica,sans-serif;
font-size: 12px;
border: none;
margin: 0;
padding-left: 10px;
overflow: hidden;
border-bottom: 1px solid #E3E3E3;
}
.mainnav li li :hover {
}
.mainnav li li a:hover {
background: none;
color: #555 ;
border-bottom: 1px solid #E3E3E3;
}
The problem is that the ul.sub-menu li ul.sub-menu is too far to the left and is covered by its parent. How can I fix the right alignment of these ul elements?

On line 211 in your mainmenu.css, adjust the left position of your submenu by something like 178px, that should place the submenu somewhere more comfortable.

Related

CSS hover over wide

Current my mouse pointer if there is point out of the red colour box it still doing the hover function, but what i need is i only need the hover in red colour box, it out of the box it will hide the menu.
This is the my source from JSfiddle http://jsfiddle.net/KECN7/
This is my html source code
<ul id="menu">
<li>
<ul>
<li>Logout</li>
<li>Account Settings</li>
<li>Terms & Policies</li>
</ul>
</li>
</ul>
this is css source code
#menu{
/*width: 50%;*/
margin: 0;
padding: 10px 0 0 0;
list-style: none;
position: absolute;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
z-index: 99;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 10px 0 25px 0;
/*width: 50px;*/
padding: 0;
display: none;
position: absolute;
top: 20px;
right: 10px;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 15px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 100px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
a.btn-function {
background-image: url(../ovolo/img/btn_function.png);
background-color: red;
background-size: 27px;
background-repeat: no-repeat;
display: block;
position: relative;
margin: 0px 5px 0 90px;
float: left;
}

The problem is you are applying the red box to the a element, but taking action on the (larger) li parent element.
You can change your selector to (Fiddle):
#menu li a:hover + ul, #menu li a + ul:hover{
display: block;
z-index: 99;
}
This is not a perfect fix because of the dead space between the a and the ul though, the best option would be to make the a take up the entire space of the li.

How to center navigation bar in UL?

Tried display: inline-block; text-align: center; and many things from the Internet, but nothing helped.
#nav{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc; }
#nav li {
list-style: none;
float: left; }
#nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }
HTML:
<ul id="nav">
<?php wp_nav_menu('menu=header_menu&container=false'); ?>
<div class="clear"></div>
</ul>
It looks like this:
... and I don't know how to center it.

basic is :
ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
li {
display:inline-block;
}
Note that if <li> floats, you lose :)
http://jsfiddle.net/KWG2j/
then , if you need to center ul with fluid width: go one step higher in html.
http://jsfiddle.net/KWG2j/1
nav {
text-align:center;
}
nav ul {
margin: 0;
padding: 0;
display:inline-block;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc;
}
nav li {
display:inline-block;
}
nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}

Set a fixed width on your UL, then adjust it's margin as
margin: 0 auto;
This will apply equal margins to both the left and right of block elements that have a definite width.

http://jsfiddle.net/Be4Q2/
#nav {
margin: 0;
padding: 0;
text-align:center;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc;
}
#nav li {
display:inline-block;
}
#nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
<ul id="nav">
<li>Home</li>
<li>Projects</li>
<li>Contact</li>
<li>About</li>
<div class="clear"></div>
</ul>

Css Menu Aligment

Hi i have a simple question, what am i doing that is doubling the height of the menu bar and applying it to the area bellow it?
Simple enough thanks again
http://www.mcdanielstudio.com/
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
#main_content {
clear: both;
margin-top: 0px;
border-left-color: #000000;
border-left-style: dashed;
border-left-width: 2px;
margin: 0px;
border-bottom: 0px;
border-right: 0px;
border-top: 0px;
border-left: 0px;
float: left;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;
padding-bottom: 3em;
}

Remove margin-bottom:3em from your #nav

You have a 3em bottom margin on #nav.

CSS menu not working in IE7 or below

In most browser it works perfectly.
but in IE7, please check the screenshot, it is really messy.
the drop down menu is not in the correct position.
the drop down menu items is not link together.
the search text field is not in the correct position.
the seach submit button-why there's a "text" on top of the button..?
the rounded corner (less important anyway)
please check the menu demo here.
<style>
.header-bg {
background: url(img/header-bg.jpg) repeat-x top;
height: 420px;
}
body {
background: url(img/page-bg.jpg) repeat;
font-family: Arial, Helvetica, sans-serif;
}
.top-wrapper {
background: none;
margin: -430px auto 270px;
min-height: 150px;
padding: 10px 27px 0 27px;
width: 980px;
clear: both;
overflow: hidden;
}
.top-wrapper .top-menu {
background: #f1faf4;
border-right: 1px solid #81b030;
border-bottom: 1px solid #81b030;
border-left: 1px solid #81b030;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
padding: 10px 35px 8px 35px;
float: right;
}
.top-wrapper .top-menu li {
float: left;
padding: 8px 14px 10px 0;
margin: 0 14px 0 0;
border-right: 1px dotted #282828;
}
.top-wrapper .top-menu li a {
color: #282828;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.top-wrapper .top-menu li a:hover {
text-decoration: underline;
}
.top-wrapper .top-menu li.search {
padding: 0 10px 0 0;
}
.top-wrapper .top-menu li.search input {
float: left;
border: none;
}
.top-wrapper .top-menu li.search input.search {
background: url(img/top-input-bg.png) no-repeat left;
width: 188px;
height: 34px;
font-size: 12px;
padding: 0 0 0 7px;
color: #9fa0a0;
}
.top-wrapper .top-menu li.search input.submit {
background: url(img/top-submit-bg.png) no-repeat left;
width: 27px;
height: 34px;
padding: 0;
text-indent: -9999px;
outline: none;
cursor: pointer;
}
.top-wrapper .top-menu li.fb-signin {
padding: 2px 0 0 0;
margin: 0;
border: none;
}
.top-wrapper .top-menu li.fb-signin a {
width: 90px;
height: 30px;
display: block;
outline: none;
cursor: pointer;
background: url(img/btn-fb-signin.png) no-repeat left;
text-indent: -9999px;
}
.top-wrapper .top-menu li.signedin {
padding: 2px 0 0 0;
margin: 0;
border: none;
}
.top-wrapper .top-menu li.signedin img {
display: inline-block;
margin: 0 10px 0 0;
vertical-align: top;
}
.top-wrapper .top-menu li.signedin a.menu {
display: inline-block;
margin: 10px 0 0 0;
}
/* REGULAR MENU DROPDOWN */
.top-wrapper .top-menu li ul {
display: none;
margin: 0;
padding: 10px 0 0 -50px;
margin: 0 0 0 -50px;
position: absolute;
top: 42px;
text-align: left;
width: 160px;
}
.top-wrapper .top-menu li ul li {
background: none repeat scroll 0 0 #F1FAF4;
border-bottom: 1px solid #b3c8ba;
border-right: none;
display: inline-block;
float: none;
margin: 0 0 0 -15px;
padding: 10px 0;
width: 160px;
position: relative;
z-index: 1000;
}
.top-wrapper .top-menu li ul li a {
color: #000 !important;
text-decoration: none;
padding: 0 0 0 15px;
}
.top-wrapper .top-menu li ul li a:hover {
text-decoration: underline;
}
.top-wrapper .top-menu li:hover > ul {
background: none repeat scroll 0 0 transparent;
display: block;
margin: 0 0 0 0;
padding: 10px 0 0;
}
/* USER MENU DROPDOWN */
.top-wrapper .top-menu li.signedin ul {
display: none;
margin: 0;
padding: 10px 0 0;
position: absolute;
top: 42px;
text-align: left;
width: 200px;
}
.top-wrapper .top-menu li.signedin ul li {
background: none repeat scroll 0 0 #F1FAF4;
border-bottom: 1px solid #b3c8ba;
border-right: none;
display: inline-block;
float: none;
margin: 0;
padding: 10px 0;
width: 125px;
position: relative;
z-index: 1000;
}
.top-wrapper .top-menu li ul li.first .corner-left {
background: url(img/menu-corner-left.png) no-repeat center;
width: 6px;
height: 6px;
position: absolute;
left: -6px;
top: 0;
}
.top-wrapper .top-menu li ul li.first .corner-right {
background: url(img/menu-corner-right.png) no-repeat center;
width: 6px;
height: 6px;
position: absolute;
right: -6px;
top: 0;
}
.top-wrapper .top-menu li ul li.last {
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
}
.top-wrapper .top-menu li.signedin ul li a {
color: #000 !important;
text-decoration: none;
padding: 0 0 0 10px;
}
.top-wrapper .top-menu li.signedin ul li a:hover {
text-decoration: underline;
}
.top-wrapper .top-menu li.signedin:hover > ul {
background: none repeat scroll 0 0 transparent;
display: block;
margin: 0 0 0 0;
padding: 10px 0 0;
}
/* SEARCH MENU DROPDOWN */
.top-wrapper .top-menu li.search ul {
display: none;
margin: 0;
padding: 10px 0 0;
position: absolute;
top: 42px;
text-align: left;
width: 222px;
}
.top-wrapper .top-menu li.search input.search:focus {outline: none; border: none;}
}
.top-wrapper .top-menu li.search ul li {
background: none repeat scroll 0 0 #F1FAF4;
border-bottom: 1px solid #b3c8ba;
border-right: none;
display: inline-block;
float: none;
margin: 0;
padding: 10px 0;
width: 222px;
position: relative;
z-index: 1000;
}
.top-wrapper .top-menu li.search ul li a {
color: #000 !important;
text-decoration: none;
padding: 0 0 0 15px;
}
.top-wrapper .top-menu li.search ul li a:hover {
text-decoration: underline;
}
.top-wrapper .top-menu li.search:hover > ul {
background: none repeat scroll 0 0 transparent;
display: block;
margin: 0 0 0 0;
padding: 10px 0 0;
}
</style>
ahh....

*:first-child+html .top-wrapper .top-menu li ul li
this will do the trick..
=)

Having trouble with clear: both:

At this Test Link I seek to install header and main site navigation on to the top of a blog script.
My clear:both; worked on the main site script but throws everything to the side now. Have tried numerous fixex without success! Thanks in advance for ant pointers to resolve. Clear:both; is in the footer.
/*/////////////////////MAIN SITE NAVIGATION BAR////////////////////*/
.dropnav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44; /*Navigation Active Background*/
border-top: 1px solid #ccf;
}
.dropnav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.dropnav li {
float: left; }
.dropnav li a {
display: block;
padding: 8px 25px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #fff; /*Active Text Color*/
border-right: 1px solid #ccf;
border-bottom: none;
}
.dropnav li:first-child a {
border-left: 2px solid #ccf; }
.dropnav li a:hover {
color: #000; /*Active Hover Color*/
background-color: #8db3ff; } /*Navigation Hover Background*/
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
/*//////////////////END MAIN SITE NAVIGATION////////////////////*/
#container {
width: 950px;
padding-left: 0px;
padding-right: 0px;
margin: 1px auto;
background: #fafafa;
}
#header {
width: 950px;
margin-top: 15px;
}
#content {
padding-left: 5px;
padding-right: `5px;
}
#footer {
clear: both;
background: #3b3b44;
color: #ccf; /*text*/
/*margin-top: 10px;*/
margin-bottom: 10px;
padding-top: 5px;
padding-left: 15px;
padding-bottom: 5px;
border-top: 2px solid #cc0;
line-height: 1.2em;
}

you have two id's with the same name as container. you id needs to be unique and also id fieldset and i guess all your tags are not closed properly very those.

you can put a clear div after you menu to clear out this row. It is the same principle use in the 960 grid sytem.
www.960.gs
But here is a link to see the code and the result.
http://jsfiddle.net/etienne_carre/9x2P3/
Thx