Can some one help me align my navigation center please
http://sketchedneo.com/Example.php
I have tried
left: 25%;
align:center;
alignment-adjust: middle;
It just doesnt seem to want to go middle.
Any suggestions are greatly appreciated
div#navigation{ position: absolute;
padding-top:-100px;
border-radius: 4px;
}
#navigation ul {
padding:5px 1px 1px 1px;
margin: 0;
list-style: none;
float:left; text-align:left;
}
#pad{padding:0px 0px 0px 70px;}
#navigation li {
float: left;
position: relative;
}
#navigation ul li a{
display:block;
padding:5px 1px 1px 1px;
margin:0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
text-decoration: none;
white-space:nowrap;
}
#navigation ul ul{
position:absolute;
top:-99999px;
left:0;
opacity: 0; /* Hide sub level */
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
z-index:497;
background:#95cfff;
padding: 2px; border:1px solid #000000; border-top:1px solid #000000;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
}
#navigation ul ul ul {
position:absolute;
top:-99999px;
left:100%;
opacity: 0; /* Hide sub level */
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
z-index:497;
background:#a1e8dc;
padding: 2px; border:1px solid #000000;
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
}
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0; }
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#95cfff; }
#navigation a:link,#navigation a:visited, #navigation a:active {
color: #002b4f;
font-weight: normal;
text-align: center;
text-decoration: none;
}
#navigation a:hover {
color: #0059d2;
font-weight: normal;
text-align: center;
text-decoration: none;
} a.top:link, a.top:visited, a.top:active {
color: #002b4f;
font-weight: normal;
text-align: center;
text-decoration: none;
}
I have used this guy's technique in the past a few time and it works great:
http://pmob.co.uk/pob/centred-float.htm
Related
I am currently working on a menu bar that expands vertically upwards. When I change the overflow to visible rather than hidden, the menu expands in the correct place, however the whole menu is visible which I do not want to happen. With overflow:hidden; the menu expands but only when you hover over the partially expanded menu above where I would like it to expand. Can anyone help?
.HomeBottomMenu {
-webkit-font-smoothing:antialiased;
text-align: center;
text-align: justify;
position: fixed;
bottom: 6em;
z-index:9999;
}
.HomeBottomMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.HomeBottomMenu ul ul {
height: 0px;
}
.HomeBottomMenu ul ul:hover {
height:532px;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.HomeBottomMenu ul li{
position: relative;
line-height: 21px;
min-width: 220px;
text-align: center;/* Used to be left*/
background: #424242;
}
.HomeBottomMenu ul li a{
display: block;
padding: 8px 8px;
color: #fff;
text-decoration:none;
text-align: left;
font-family: 'BebasNeueRegular', Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
.HomeBottomMenu ul li a:hover{
color: #fff;
background: #25a0da;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.HomeBottomMenu ul li .dropdown{
background: #f2f2f2;
display: hidden;
position: absolute;
left: -0.01em;
overflow: hidden;
}
.HomeBottomMenu ul li:hover .dropdown{
/* Display the initial dropdown */
display: block;
bottom: 100%;
position: absolute;
background: #939393;
min-height: 50px;
}
.HomeBottomMenu ul li ul.dropdowndropdown {
position: relative;
height:100%;
display:inline-block;
bottom:100%;
}
.HomeBottomMenu ul li ul :hover .dropdowndropdown{
position: relative;
display:inline-block;
}
.HomeBottomMenu ul li ul.dropdowndropdown li{
display: inline-block;
/*Colour of level 1, level 2...*/
background-color: rgba(0, 90, 235, 0.33);
bottom: 100%;
}
.HomeBottomMenu ul li ul.dropdowndropdown li:hover{
position: relative;
}
.HomeBottomMenu ul li ul.dropdowndropdown li a{
color:#fff;
font-size:16px;
padding: 10px 10px;
text-align:center;
}
.HomeBottomMenu ul li ul .dropdowndropdown li a :hover{
color: #fff;
}
Changed the following and it works now:
.HomeBottomMenu ul li .dropdown{
background: #f2f2f2;
position: absolute;
left: -0.01em;
overflow:hidden;
display: none;
}
.HomeBottomMenu ul li:hover .dropdown{
display: block;
bottom: 0%;
position: absolute;
background: #939393;
min-height: 50px;
}
The padding around the link for my dropdown menu isn't clickable. When I mouse over the actual text, it changes color and becomes clickable. How can I make the padding clickable? I read that I should style it as an inline-block, but that didn't work. This is also my first post, so correct me for the countless things that I probably did wrong.
CSS:
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: left;
background-position:center;
background-image:url(sun.jpg);
}
a {
display:inline-block;
color: #6FF;
text-decoration: none;
}
a:hover {
color: #FFF;
}
ul {
color:#6FF
text-align: left;
display: inline-block;
margin: 0;
padding: 1px 1px 1px 0;
list-style: none;
}
ul li {
color: purple;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -10px;
position: relative;
padding: 20px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding:0;
position:absolute;
top: 54px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
ul li ul li {
background-color:#555;
color:#6FF;
display: block;
}
ul li ul li:hover { background: #555; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
You should put the padding to the link, no the list item because the link is what is clickable.
body {
font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: left;
background-position:center;
background-image:url(sun.jpg);
}
a {
padding: 20px 20px;
display:inline-block;
color: #6FF;
text-decoration: none;
}
a:hover {
color: #FFF;
}
ul {
color:#6FF text-align: left;
display: inline-block;
margin: 0;
padding: 1px 1px 1px 0;
list-style: none;
}
ul li {
color: purple;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -10px;
position: relative;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding:0;
position:absolute;
top: 54px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
ul li ul li {
background-color:#555;
color:#6FF;
display: block;
}
ul li ul li:hover {
background: #555;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
<li>First link
</li>
</ul>
I made my website responsive for tablet and smartphone. I used hover for desktop size, but on mobile size there's hover to. I want to change the hover on the mobile device to a touch without using javascript. I heard something about the no-touch modernizr to change hover to touch event?
nav{
margin-left: 2.7em;
}
nav ul ul {
display: none;
background: #5f6975;
border-radius: 0em;
padding: 0;
position: absolute;
top: 100%;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul {
background: #333333;
padding: 0 1em;
border-radius: 1em;
list-style: none;
position: relative;
display: inline-block;
}
nav ul li {
float: left;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
nav ul li:hover {
background: #555555;
}
nav ul li:hover a {
color: #ffffff;
}
nav ul li a {
font: 90% helvetica;
display: block;
padding: 1.7em 2em;
color: #ffffff;
text-decoration: none;
}
nav ul ul li {
float: none;
border-top: 0.1em solid #6b727c;
border-bottom: 0.1em solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 1em 2em;
}
nav ul ul li a:hover {
background: #292F41;
}
#media only screen and (max-width:40em)
What do i need to put here to disable the hover function for mobile and make it a touch?
http://profiledt.co.uk/SetTraining
the tag has the menu inside it, however I can't seem to get it to allow the drop down to appear infront of the slider in IE8.
.main-navigation {
width: 100% !important;
}
.main-navigation a {
font-size: 12px;
height: 50px;
line-height: 50px;
color: #fff !important;
padding: 0 25px;
text-decoration: none;
font-weight: 700;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.main-navigation a:hover {
color: #fff!important;
background: #008AE6;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.nav-menu {
/* background: #008AE6 !important; */
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-top: 1px solid #ededed;
display: inline-block !important;
text-align: left;
width: 100%;
/* CUSTOM CODE */
background: #1f4e9b;
/*border-bottom: 5px solid #eee; */
position: relative;
z-index: 103;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
background: ;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
.main-navigation li a {
border-bottom: 0;
color: #6a6a6a;
line-height: 3.692307692;
text-transform: uppercase;
white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation li {
//Margin makes nav out of place
margin: 0 40px 0 0;
/*margin: 0 2.857142857rem 0 0;*/
position: relative;
}
.main-navigation li ul {
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 200; /*importance*/
}
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation ul li:hover > ul {
border-left: 0;
display: block;
}
.main-navigation li ul li a {
background: #2989ff;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
.main-navigation li ul li a:hover {
background: #3d9dff;
color: #444;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight: bold;
z-index: 9999;
}
.menu-toggle {
display: none;
}
I'm using a Windows XP machine with Internet Explorer 8.
Thanks
z-index will not work on a static element (default). They must be relative or absolute.
Try to add positon:relative; on the elements with it.
When using my css dropdown menu only the text of the dropdown is active which makes it more difficult to select rather than the area which would be easier (especially with mobile devices).
CSS is:
#topMenu ul {
text-align: center;
display: inline;
margin: 0;
padding: 15px 20px 17px 20px;
list-style: none;
}
#topMenu ul li {
font: bold 12px sans-serif;
text-transform:uppercase;
color:#666;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 10px 40px;
background: #EEE;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#topMenu ul li:hover {
background: #EEE;
color: #000;
}
#topMenu ul li ul {
z-index: 5000;
padding: 0;
position: absolute;
top: 38px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#topMenu ul li ul li {
background: #EEE;
display: block;
color: #000;
border:solid 1px #999999;
}
#topMenu ul li ul li:hover { background: #EEE; }
#topMenu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Code may be a bit cumbersome.
Thanks
You can add display:block; to your anchor tag CSS to make it fill the li.
CSS:
#topMenu ul li ul a {
display: block;
}
HTML:
<ul id="topMenu">
<li>
<ul>
<li>
Link Text
</li>
<!-- more submenu items -->
</ul>
</li>
<!-- more topMenu items -->
</ul>
Try this <---> instead of use padding:10px 40px to determine the height use this:
line-height:30px <---- it replaces the padding top and bottom (20px) and add 10px of the font.
Then your CSS could be:
#topMenu ul li {
font: bold 12px sans-serif;
text-transform:uppercase;
color:#666;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 0px 40px;
line-height:30px;
background: #EEE;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
If you have a tags inside the li then make it block and the same line-height:
#topmenu ul li a {
display:block;
line-height:30px;
height:30px;
}