Wordpress menu is centered, how to change that? - html

My website is
http://www.jokerleb.com
I want the right column to be on the right, and the left to be on the left. All columns must have the same margin between them. In summary I don't want the menu to be centered.
The menu itself is float: left I can't see any margin that is forcing it to the center, and I don't know what div is centralizing it. Any idea why it's centered?
The css of the menu
.header_menu_res ul,
.header_menu_res ul ul,
.header_menu_res ul ul ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.header_menu_res ul li.first {
padding-left: 0;
background: none;
}
.header_top .header_top_res p a{
color: #FDC300 !important;
}
/*menu font color*/
.header_menu_res ul li a {
color: #FDC300;
font-size: 17px;
font-weight: bold;
text-decoration: none;
}
.header_menu_res ul {
z-index: 99;
margin: 3px;
padding: 0;
list-style: none;
line-height: 1;
}
.header_menu_res ul a {
padding: 5px 10px;
position: relative;
color: #555;
z-index: 100;
display: block;
line-height: 18px;
text-decoration: none;
}
.header_menu_res ul li:hover a {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul li.current_page_item,
.header_menu_res ul li.current-menu-item,
.header_menu_res ul li.current-menu-parent a {
color: #555;
background: #f4f4f4;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul li li.current_page_item,
.header_menu_res ul li li.current-menu-item {
background: none;
}
.header_menu_res ul li.current_page_item a,
.header_menu_res ul li.current-menu-item a {
color: #555;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul.children li a {
background: #fff;
border-top: none;
border-left: none;
}
.header_menu_res ul li {
float: left;
/
font: normal 14px/1.2em Arial, Helvetica, sans-serif;
z-index: 999;
margin: 0 0 20px;
width: 25%;
}
.menu-item i._mi, .menu-item img._mi {
display: block;
float: left;
}
.menu-item span {
margin-top: 8px;
display: block;
margin-left: 60px;
}
.header_menu_res ul li ul {
margin-top: -2px;
background: #fff;
position: absolute;
left: -999em;
width: 180px;
border: 1px solid #dbdbdb;
border-width: 1px 1px 0;
z-index: 998;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu ul {
background-color: #FFF;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
}
.header_menu_res ul.menu ul ul.children {
background-color: #FFF;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
}
.header_menu_res ul.menu li ul li {
margin: 0;
padding: 0px;
}
.header_menu_res ul.menu li ul li a {
background: none;
padding: 7px 12px;
width: 156px;
color: #555;
font-size: 14px;
line-height: 18px;
}
.header_menu_res ul.menu li ul li a:hover {
text-decoration: underline;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul.menu li ul ul {
margin: -32px 0 0 181px;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu ul.sub-menu {
display: none;
position: absolute;
margin: -2px 0 0;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu li:hover ul.sub-menu {
display: block;
}
.header_menu_res ul.menu ul.sub-menu li ul.sub-menu {
display: none;
top: 2px;
left: 180px;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.header_menu_res ul.menu ul.sub-menu li:hover ul.sub-menu {
display: block;
}
.header_menu_res ul li:hover,
.header_menu_res ul li.hover {
position: static;
color: #555555;
}
.header_menu_res ul li:hover ul ul,
.header_menu_res ul li:hover ul ul ul,
.header_menu_res ul li:hover ul ul ul ul {
left: -999em;
}
.header_menu_res ul li:hover ul,
.header_menu_res ul li li:hover ul,
.header_menu_res ul li li li:hover ul,
.header_menu_res ul li li li li:hover ul {
left: auto;
}
.header_menu_res ul li img.dropdown {
padding: 2px 0 2px 8px;
border: none;
}
.header_menu_res ul.sub-menu {
width: auto;
}
.header_menu_res ul.sub-menu li {
clear: left;
margin: 8px 4px 0;
}
/* category menu */
div#adv_categories,
.header_menu_res ul.sub-menu {
margin: -2px 0 0 0;
padding: 0 0 8px;
position: absolute;
background: #fff;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
div#adv_categories {
display: none;
padding: 0 5px 8px;
}
#menu-header li:hover #adv_categories,
.header_menu .menu li:hover #adv_categories {
display: block;
}

Do the changes like this,
.header_top_res{
width:90%;
}

Related

Would like to add spaces between li items in nav bar

The css for my page goes for awhile. There are 2 files which are imported in the head section of my master page. One is the default.css page and the other is menu.css. I tried to add padding and my nav bar flickered over to the right for a split second, but it came right back. I have read in numerous posts about adding space to use padding between the list items but there is a lot of confusing css and classes. I"m not sure which sections of the css will fix the spacing between the menu items
If someone can help me figure this out, that would be terrific. Here is my .css code and html
<header>
<div class="container">
<div class="navbar navbar-static-top">
<div class="navigation">
<nav>
<ul class="nav topnav bold">
<li class="dropdown active">
HOME
</li>
<li class="dropdown">
RESOURCES<i class="icon-angle-down"></i>
<ul style="display: none;" class="dropdown-menu bold">
<li>REVERSE MTG FAQ</li>
<li>OTHER RESOURCES</li>
</ul>
</li>
<li class="dropdown">
OUR PROCESS<i class="icon-angle-down"></i>
<ul style="display: none;" class="dropdown-menu bold">
<li>LOAN PROPOSAL</li>
<li>PROCESSING</li>
</ul>
</li>
<li class="dropdown">
GET QUOTE
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</header>
.css
/* --- header -- */
header {
background: url(../img/menubackground.png) repeat;
margin: 0 0 0 0;
width: 762px;
padding: 10px 0 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
position: relative;
z-index: 2000;
text-align: left;
}
/* --- menu --- */
header .navigation {
float: left;
}
header ul.nav li {
border: none;
margin: 0;
}
header ul.nav li a {
border: none;
font-weight: 400;
}
header ul.nav li ul {
z-index: 1000;
margin-top: 1px;
}
header ul.nav li ul li ul {
margin: 1px 0 0 1px;
}
header ul.nav li a i {
color: #fff;
}
.container,
.navbar-static-top .container {
width: 750px;
}
.container {
margin-right: 0;
margin-left: 0;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
.dropdown {
position: relative;
}
.nav {
margin-bottom: 20px;
margin-left: 0;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
.navbar .nav a:hover {
background: #333333;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover {
font-weight: 600;
}
.navbar .nav > .active > a:active, .navbar .nav > .active > a:focus {
background: #333333;
outline: 0;
font-weight: 600;
}
.navbar .nav li .dropdown-menu {
z-index: 1000;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0px 10px 0 0;
}
.navbar .nav > li {
float: left;
}
.navbar .nav > li > a {
float: none;
padding: 2px 15px 2px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #333333;
text-decoration: none;
background-color: transparent;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
.navbar .nav > li > .dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar .nav > li > .dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.dropdown-menu {
*border-right-width: 0;
*border-bottom-width: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.dropdown-menu .dropdown i {
position: absolute;
right: 0;
margin-top: 3px;
padding-left: 20px;
}
.dropdown-submenu > .dropdown-menu {
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}
.navbar .nav {
border-right: none;
border-left: none;
}
.navbar .nav > li > a {
float: none;
font-size: 15px;
margin-left: 0px;
margin-right: 0;
text-decoration: none;
text-shadow: none;
border-right: none;
border-left: none;
color: #fff;
border: 2px solid transparent;
padding: 4px 5px 4px 5px;
background-image: none;
background: none;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
color: #dddddd;
background-color: none;
background-image: none;
background-repeat: repeat-x;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 2px solid #302f2f;
padding: 4px 5px 4px 5px;
background: #343434;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #555;
-webkit-box-shadow: inset 0 0 1px #555;
box-shadow: inset 0 0 1px #555;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #fff;
border: 2px solid #302f2f;
padding: 4px 10px 4px 10px;
background-image: none;
background: #343434;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #555;
-webkit-box-shadow: inset 0 0 1px #555;
box-shadow: inset 0 0 1px #555;
}
.navbar .nav > a i[class^="icon-"] {
color: #fdfdfd;
}
ul.nav li.dropdown a {
z-index: 1000;
display: block;
}
ul.nav li.dropdown ul li ul.dropdown-menu {
margin-left: 0px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
ul.nav li.dropdown ul li i {
margin-right: 50px;
}
select.selectmenu {
display: none;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 165px;
padding: 0;
margin: 2px 0 0;
list-style: none;
background: #386A57;
border: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 2px solid #302f2f;
border-top: none;
-webkit-background-clip: none;
-moz-background-clip: none;
background-clip: none;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.dropdown-menu li {
margin: 0;
padding: 0;
}
.dropdown-menu li a {
color: #ddd;
font-size: 15px;
padding: 5px 7px 5px 7px;
margin: 0;
text-shadow: none;
border-bottom: 1px solid #303030;
text-decoration: none;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #ffffff;
text-decoration: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-repeat:inherit;
filter: none;
}
.dropdown-menu .sub-menu-level1, .dropdown-menu .sub-menu-level2 {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: 0;
}
.dropdown-menu li:hover .sub-menu-level1 {
visibility: visible;
}
.dropdown-menu li li:hover .sub-menu-level2 {
visibility: visible;
}

HTML CSS (responsive drop down menu)

I've been trying to solve this problem for quite some time now. I need my navigation to be responsive. By responsive, i need my nav to still show its links when minimized and dragged to the very left. What my code does now is that the links disappear as if there is no nav bar at all when minimized. Thank you in advance!
Normal view (which is also how i need my nav to look like when minimized)
Current minimized window
Here is my drop down menu code for our CSS:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 800px;
margin: 60px auto;
margin-top: -30px;
margin-bottom: 10px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
background-color: #ffffff;/*bg color of drop down menu*/
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999; /* home my acct etc */
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}
#menu li:hover > a { /*font color of nav while hover */
color: #000000;
background: #FFE87C; /* blue */
}
*html #menu li a:hover { /* IE6 only */
color: #000000;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background:#FFE87C; /* bg color ng drop down yellow */
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: auto;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: black; /* font color of drop down */
}
#menu ul a:hover {
background-color: #EDDA74;/*hover of link blue*/
color:#000000;
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #D1D0CE;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #D1D0CE;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#media screen and (max-width: 600px) {
/* nav-wrap */
#menu-wrap {
position: relative;
}
#menu-wrap * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* menu icon */
#menu-trigger {
display: block; /* show menu icon */
height: 40px;
line-height: 40px;
cursor: pointer;
padding: 0 0 0 35px;
border: 1px solid #222;
color: #fafafa;
background-color: #111;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
/* main nav */
#menu {
margin: 0; padding: 10px;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
background-color: #48CCCD;
display: none;
box-shadow: none;
}
#menu:after {
content: '';
position: absolute;
left: 25px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
box-shadow: none;
}
#menu ul ul {
margin: 0 0 0 20px !important;
box-shadow: none;
}
#menu li {
position: static;
display: block;
float: none;
border: 0;
margin: 5px;
box-shadow: none;
}
#menu ul li{
margin-left: 20px;
box-shadow: none;
}
#menu a{
display: block;
float: none;
padding: 0;
color: #999;
}
#menu a:hover{
color: #fafafa;
}
#menu ul a{
padding: 0;
width: auto;
}
#menu ul a:hover{
background: none;
}
#menu ul li:first-child a:after,
#menu ul ul li:first-child a:after {
border: 0;
}
}
I think you should try to set the "html, body" tags in your CSS with min-width: x% / xpx, x being your choice, e.g. min-width: 700px or min-width: 75%

Level 2 submenu always visible

I have spent almost a whole day looking through various examples and still can't figure out a way of setting the 2 level submenu invisible. I got this template of the net and trying to customise it.
Here is the navigation bit from css file (I know it looks ugly ): )
#navigation { height: 35px; line-height: 35px; float: right; position: relative; z-index: 20; }
#navigation ul { list-style: none; list-style-position: outside; font-size: 13px; text-shadow: rgba(255,255,255,0.5) 0px 1px 1px; }
#navigation ul li { float: left; position: relative; padding-right: 2px; background: url(images/navigation-border.png) no-repeat right 0; }
#navigation ul > li.last { background: transparent; width: auto; float: left; padding-right: 0; }
#navigation ul > li.last a { border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -o-border-radius: 0px 5px 5px 0px; border-right: 1px solid #d7e1e8 !important; }
#navigation ul > li.first a { border-radius: 5px 0px 0px 5px ; -moz-border-radius: 5px 0px 0px 5px ; -webkit-border-radius: 5px 0px 0px 5px ; -o-border-radius: 5px 0px 0px 5px; border-left: 1px solid #d7e1e8 !important; }
#navigation ul li a { color: #324957; float: left; padding: 0 18px; border: 1px solid #d7e1e8; border-left: 0; border-right: 0; background: url(images/navigation.png) repeat 0 0; }
#navigation ul li a:hover,
#navigation ul li.active a { background: url(images/navigation-a.png) repeat 0 0; color: #3995d6; text-decoration: none; }
#navigation ul li a span { background: url(images/navigation-arr.png) no-repeat right 0; width: 10px; height: 6px; float: right; padding-left: 3px; margin-top: 14px; }
#navigation ul li ul { display: none; float: none; line-height: 28px; position: absolute; top: 35px; left: 0; width: 100%; background: #e1efff; border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; }
#navigation ul li:hover ul { visibility: visible; }
#navigation ul li ul li { display: block; float: none; padding: 0; background: transparent; }
#navigation ul li ul li a { float: none; display: block !important; padding: 0 18px; }
#navigation ul li ul li a:hover { float: none; display: block; background: transparent; background-color: #bdd7f4; }
#navigation ul li.last ul li a { padding: 0 18px !important; float: none; display: block; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}
#navigation ul li ul li.last { float: none; display: block; }
#navigation ul li ul li.last a { border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; -o-border-radius: 0px 0px 5px 5px; }
#navigation ul li ul li.first a { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}
#navigation ul li.first ul li a { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px;}
And here is how I am trying to write a sub-menu
<nav id="navigation">
<ul>
<li>Individual Patient Analysis</li>
<li>
Multiple Patient Analysis<span></span>
<ul>
<li>Gender</li>
<li>Age</li>
<li>Field Number</li>
<li>Occupation</li>
<li>Eye<span></span>
<ul>
<li>Left</li>
<li>Right</li>
</ul>
</li>
</ul>
</li>
<li>Upload File</li>
</ul>
</nav>
The problem here is the level 2 submenu for eye is always visible, without even hovering on the 'Eye' tab and I just cannot seem to fix it. I want the "Left" and "right" submenu to appear only when one hovers on the "Eye" tab. And another problem that I found in the fiddle is that the menu hides itself on hovering over Left or Right sub menu. How can it be fixed ?
Any help would be much appreciated !
You are hiding the dropdown menu initially using display:none and try to use visibility:visible on hover of the li item which doesn't shows the dropdown menu at all.
Change this
#navigation ul li:hover ul {
visibility: visible;
}
to below to display only the immediate child ul items of the parent li item.
#navigation li:hover > ul {
display:block;
}
DEMO
Check this, It may help you.
DEMO
CSS
ul, ul li {
list-style-type:none;
float:left;
padding:5px;
}
ul li a {
text-decoration:none;
}
li ul {
display:none;
position:absolute;
}
li ul li {
float:none;
}
ul li:hover ul {
display:block;
}
ul li:hover ul ul {
display:none;
}
ul li ul li:last-child:hover ul {
display:block;
}
http://jsfiddle.net/ZhWkP/10/
http://jsfiddle.net/ZhWkP/10/show
You used display:none to hide the second level ul and than use visibility set to visible on hover.
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#navigation ul ul ul {
float: none;
line-height: 28px;
position: absolute;
visibility: hidden;
width: 100%;
padding: 0 0 0 10px; /* allows to set padding to 100% element. */
}
#navigation ul ul li:hover ul {
visibility: visible;
}

how to make custom multi column drop down submenu

i already did a drop down menu in my wordpress site. its a common drop down menu. but now i need to make it as a multi column drop down submenu.
i went through so many sites and tried different css. nothing creates anything like in that reference site. please help me with customizing the existing css style to attain multicolumn submenu structure.
my current menu css:-
.menu{
width:941px;
max-width:100%;
height:47px;
margin-left:30px;
float:left;
background:url(../images/other.gif) repeat-x;
}
.menu ul{padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.menu li:first-child{
margin:0px 0px 0px 0px;
padding:16px 0px 0px 40px;
list-style:none;
background-image:url(../images/hom.gif);
background-repeat:repeat-x;
float:left;
height:47px;
}
.menu li{
margin:0px 0px 0px 0px;
padding:16px 0px 10px 30px;
list-style:none;
background-image:url(../images/nav_img.png);
background-repeat:no-repeat;
float:left;
height:47px;
}
.menu a{
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
color:#000;
letter-spacing:2px;
padding-right:10px;
text-transform: uppercase;
text-decoration:none;
transition: text-shadow 1s;
-moz-transition: text-shadow 1s; /* Firefox 4 */
-webkit-transition: text-shadow 1s; /* Safari and Chrome */
-o-transition: text-shadow 1s; /* Opera */
}
.menu a:hover{
text-shadow: 0 0 5px #006994;
color:#ccffff;
}
.menu .current-menu-item{
text-shadow: 0 0 5px #fff;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 64%; left: 0; z-index: 598; width:auto;}
#cssmenu ul ul li {float: none;background:#3891C9!important;border-bottom:1px solid #00569c;height:auto;}
#cssmenu ul ul ul {top:0; left: auto; right: -99.5%; width:100%;}
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;border-left:1px solid #00569c;}
#cssmenu ul ul a { display:block; line-height:1em; text-align:left; letter-spacing:0.5px;font-size:12px;}
#cssmenu ul ul li a:hover{ color:#ccffff; }
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
the menu structure is :
<div id="cssmenu" class="menu">
<ul class="menu">
<li>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
</ul>
</li>
</ul>
</div>
currently my menu like this http://jsfiddle.net/2wxje/
My CSS:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 480px;
margin: 10px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #FF0064;
background-image: linear-gradient(#FF0064, #FF0010);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #FF0064;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #FF0064;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
#menu li:hover > .no-transition {
display: block;
}
Javascript Code:
<script>
var $=jQuery;
$(document).ready(function(){
var location=window.location.pathname;
$("#menu a").each(function(){
if(location.lastIndexOf($(this).attr("href"))!=-1){
$(this).css({color:"white"});
}
});
});
</script>
PHP Code:
<?php wp_nav_menu(
array(
'title_li' => '',
'menu_id' => 'menu',
'menu_class' => '',
'theme_location' => 'primary-menu',
)
); ?>

HTML CSS Navigation Child Styling Error

I am having a hard time positioning my drop down menus within my Wordpress Theme Navigation. They are showing up no where near the nav bar and are near the top left corner of the screen when I hover over a ul li >.
My CSS Is Below:
#main-navigation {
clear: both;
float: left;
font-size: 17px;
margin-top: 30px;
width: 938px;
}
#main-navigation > ul { width: 105%; margin-left:auto; margin-right:auto; }
#main-navigation > ul > li {}
#main-navigation > ul > li:hover { transparent; }
#main-navigation > ul > li:first-child { border: medium none; }
#main-navigation > ul > li > a {
margin-right:20px;
border-bottom: 2px solid #6a6a65;
color: #181818;
display: block;
font-weight: bold;
height: 48px;
line-height: 48px;
padding: 0 29px;
// text-shadow: 0 1px 0 #AD581D;\
text-transform:uppercase;
}
#main-navigation > ul > li:first-child > a {
background: url("./assets/img/home.png") no-repeat scroll center 10px transparent;
// border: medium none;
color:#6a6a65;
border-bottom: 2px solid #6a6a65;
overflow: hidden;
padding: 0 25px;
text-indent: -999px;
width: 31px;
}
#main-navigation > ul > li:first-child > a:hover {
border-bottom: 2px solid #fa7d4c;
}
#main-navigation a:hover { text-decoration: none; border-bottom: 2px solid #fa7d4c;}
#main-navigation ul li:hover ul { display: block; }
#main-navigation ul ul {
border-bottom: 1px solid #333333;
display: none;
left: 0;
padding-top: 20px;
position: absolute;
top: 148px;
white-space: nowrap;
z-index: 1000;
background: url("./assets/img/dd-arrow.png") 33px 10px no-repeat;
}
#main-navigation ul ul li {
background: none repeat scroll 0 0 #3C3C3D;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
border-top: 1px solid #2C2C2C;
box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3), 0 1px 0 #444445 inset;
float: none;
font-size: 16px;
}
#main-navigation ul ul li:first-child {
border-top: medium none;
box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
}
#main-navigation ul ul a {
color: #FFF;
display: block;
height: 48px;
line-height: 48px;
padding: 0 29px;
text-shadow: 0 1px 0 #2D2D2E;
}
#main-navigation ul ul a:hover { color: #ccc; }
Any help would be greatly appreciated as I have spent a long time looking for the error its starting to frustrate me.
Thanks a bunch guys!
You need to tell childs to absolute position from main-navigation and not screen by defaut, Iguess since HTML code is missing :)
#main-navigation {
position:relative; /* tells absolute child to take coordonates from here */
clear: both;
float: left;
font-size: 17px;
margin-top: 30px;
width: 938px;
}