Converting vertical menu to horizontal menu - css

I have a vertical menu which I want to make horizontal. I have tried placing display:inline tag but it does not do the job. Please guide. Thanks.
#access div {
margin: 0;
width:140px;
}
#access {
clear: both;
display: block;
float: left;
}
#access ul {
font-size: 11px;
list-style: none;
margin: 0;
padding: 0;
}
#access li {
line-height: normal;
position: relative;
display:inline;
}
#access a {
color: #B25326;
display: block;
padding: 4px 0;
text-decoration: none; font-size: 10px;
text-align:right; text-transform:uppercase;
line-height: normal;
}
#access a:hover {
color: #000000 !important;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: none;
}
#access li:hover > a,
#access a:focus {
color: #000000;
}
#access ul li:hover > ul {
display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}

First take the width off from the div and then you can use:
#access li {
float:left;
}

Related

How can I center this main navigation

I have used text-align: center inside, but .main-nav was not effected. What is the best way to center this navigation?
/***** Navigation *****/
.main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
.main-nav li { float: left; position: relative; }
.main-nav li a { display: block; color: #333131; font-size: 16px; font-size: 1rem; line-height: 1; letter-spacing: 2.7px; padding: 12px 0; margin-right: 30px; }
.main-nav li a:hover { color: #000; }
.main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
.main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
.main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
.main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
.main-nav ul ul { display: none; position: absolute; left: -20px; }
.main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
.main-nav ul ul ul { left: 100%; top: 0; }
Your nav container should have below property to make it center: I have not tested. if you want exact solution create fiddler or share HTML code as well.
.navContainer{
width:100px; <!-- This value can be any -->
margin: 10px auto; <!-- first value of margin can be any -->
}

Make submenu dropdown wider than parent li

I did the job by make the submenu functioning, the problem is I can't get the submenu width wider than its parent.
when i hover, its messed up as you can see in fiddle links i provided below
please take a look at this http://jsfiddle.net/wR5L5/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
padding: 0;
}
.navigation ul li {
position: relative;
display: inline;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
there is a flexible menu .sub class http://jsfiddle.net/wR5L5/12/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
position: relative;
padding: 0;
}
.navigation ul li {
display: inline;
position: relative;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
float: left;
width: auto;
min-width: 100%;
background: #999;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
white-space: nowrap;
clear: both;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
display: block;
float: none;
width: 100%;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
Give width to the sub menu to get submenu wider than main menu.
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
width: 150px;
font-size: 13px;
}

CSS problems with the Sub menu on my site

I am having some problems with the Sub menu on my site... www.fastfoodforum.co.uk
If you hover over the "forums" item then you will see that the other content of my site jumps, and you will also see small gaps between each sub menu item.
Both of these are very much undesired and I would really appreciate any help in fixing them. I will post the CSS I currently have below, I have been experimenting and trying to fix this for some time so please excuse any messy/dodgy code.
Thanks everyone, really appreciate the help.
#access {
float: left;
margin: 91px 0 0 0px;
width: 550px;
display: block;
}
#access .menu-header, div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul, div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li, div.menu li {
float: left;
margin: 0;
padding: 9px 17px 0 0;
position: relative;
}
#access a {
color: #FFFFFF;
font-size: 13px;
font-weight: bold;
margin: 0;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 80px;
z-index: 99999;
padding-top: 0px;
}
#access ul ul li {
min-width: 80px;
padding-top: 0px;
padding-bottom: 0px;
}
#access ul ul ul {
left: 100%;
top: 0;
padding-top: 0px;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 8px;
width: 80px;
height: auto;
display: inline-table;
}
#access li:hover > a, #access ul ul :hover > a {
color: #fff;
}
#access ul li:hover > ul {
display: inline-table;
position: relative;
}
#access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover {
color: #fff;
}
Try to change this:
#access ul li:hover > ul {
display: inline-table;
position: relative;
}
to this:
#access ul li:hover > ul {
display: block;
}

Centering block menu `<li>` elements in a `<div>`

This should be an easy one - I'm just missing something simple, I'm sure.
I have a header and want a nested, centered horizontal menu.
#header {
background:url(images/headers/header.gif);
margin: 0 auto;
height: 207px;
width: 100%;
}
/* =Menu
-------------------------------------------------------------- */
#access {
background: transparent;
display: block;
text-align: center;
float: left;
margin: 150px auto 0;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 120px;
width: 766px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0 auto;
}
#access .menu-header li,
div.menu li {
background-color: #444;
margin: 0 auto;
float: left;
text-align: center;
width: 110px;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #444;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}
site: http://74.86.183.200/~riaharb/stage/
Thanks in advance!
That's not hugely tricky, this should work:
#parent_ul {
width: 80%;
text-align: center;
margin: 0 auto;
}
#parent_ul > li {
display: inline; /* or inline-block */
}

Making CSS Drop Down Menu 2 Columns

Long time lurker but posting for the first time. I've been searching around already and found a solution to what I'm looking to do but for some reason I'm getting a weird result.
Basically my menu has so many items that I would like to see them in 2 columns. By searching I found that I needed to make the "ul" twice as wide as the "li" and float the "li" left. It is working but now I'm getting a blank space in the 2nd row.
#cssmenu {
padding: 0;
margin: 0;
border: 0;
width: auto;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
z-index: 597;
}
#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: left;
width: 250px;
}
#cssmenu ul ul ul {
top: 0;
left: 250px;
width: 500px;
height: 20px;
}
#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;
}
#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
background: #333333;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
}
#cssmenu > ul {
*display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu ul {
text-transform: uppercase;
}
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #ffffff;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 100%;
padding: 8px 20px;
font-size: 12px;
}
#cssmenu ul ul ul {
border-top: 0 none;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu ul ul li:first-child > a {
border-top: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #ffffff;
}
#cssmenu ul 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;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 1px 0 #1b9bff;
-webkit-box-shadow: 0 1px 0 #1b9bff;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a {
-moz-border-radius: 0 0 0 3px;
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
background: #1b9bff;
color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
#cssmenu a {
background: #333333;
color: #CBCBCB;
padding: 0 20px;
}
#cssmenu > ul > li > a {
line-height: 48px;
font-size: 12px;
}
#cssmenu img {
vertical-align: middle;
}
Here's my jsFiddle: https://jsfiddle.net/b1hsakq2/1/
I'm missing something in the CSS....
Thanks for the help
The border-top on your first-child in list is causing the 3rd list item to not fit. See the revised fiddle here where I commented it out:
https://jsfiddle.net/b1hsakq2/3/
#cssmenu ul ul li:first-child > a {
/*border-top: 1px solid #0082e7;*/
}
The other option is to keep the above border-top on the first-child, but to even the height within the list, add a border-top to the other list items by adding this:
#cssmenu ul ul li > a {
border-top: 1px solid #0082e7;
}

Resources