I am using a template and I am trying to center that navigation bar because I moved the logo. Here is the CSS
/* Menu */
.menu{float:right; padding:14px 20px 0 0;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {position:relative; float:left; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Marmelad', sans-serif;color:#2b2b2b; font-size:16px;}
.menu ul li.selected a{color:#e93139;}
.menu ul li a:hover{color:#e93139;}
<div class="menu">
<ul>
<li class="selected">home</li>
<li>about</li>
<li>competition</li>
<li>workshops</li>
<li>travel</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
How do I center this menu?
Remove
.menu {
float: right;
}
Add
.menu {
text-align: center;
}
.menu ul {
display: inline-block;
}
Demo.
text-align: center set on .menu applies to textual content of this element, but also to all it's inline or inline-block children. This is why we give display: inline-block to .menu ul.
Edit the first two lines of css like this:
/* Menu */
.menu{padding:14px 20px 0 0; text-align:center}
.menu ul {list-style:none; margin:0; padding:0px; display:inline-block;}
Use the following css on the menu class:
display: table;
position: relative;
margin-left: auto;
margin-right: auto;
That will center anything, even without specifying the Width.
Change your css to this
body{margin:0, padding:0;}
.menu{position:relative; left:15%; margin:auto;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {display:inline; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Marmelad', sans-serif;color:#2b2b2b; font-size:16px;}
.menu ul li.selected a{color:#e93139;}
.menu ul li a:hover{color:#e93139;}
Change the .menu class to this:
.menu{ padding:14px 20px 0 0; margin:auto; width:50%;}
Related
Hi There can anyone help me i try to create a dropdown submenu but it doesn't work for me.
I dont know how to reate a nice menu.
example:
When i hover over "massages" then the menu must come down and show the submenu.
css here
.menu{
width:821px;
height:42px;
margin:0px;
background:url(images/menu.gif) no-repeat left;
}
.menu ul{
list-style:none;
padding:0 0 0 15px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li ul{
display:inline;
}
.menu ul li a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
color:#fff;
line-height:42px;
font-size:14px;
}
.menu ul li.aktivni-active a{
float:left;
height:42px;
border:none;
padding:0 15px 0 15px;
text-decoration:none;
line-height:42px;
font-size:14px;
Html:
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li>Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
Can anyone explane me how to create a dorpdown submenu on "Massages"
Thnx
Check with the below link.
Fiddle
/* Menu Dropdown */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
}
ul#menu li ul.sub-menu a {
width:150px;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
/* Top Nav Background Hover */
ul#menu li a:hover {
background:#000;
}
ul#menu li ul li a:hover {
background:#999;
}
/* 3rd level nav */
ul#menu li ul.sub-menu li ul {
display:none;
position: absolute;
top: 0px;
left: 115px;
width: 100px;
}
/* show the 3rd level when the second is hover */
ul#menu li ul.sub-menu li:hover ul {
display:block;
}
/* Menu Dropdown */
You should change your markup, as far as I know submenu should be part of list item it refers to
<ul>
<li class="simple-item">item</li>
<li class="submenu">item
<ul class="submenu-goes-inside-li">
<li class="simple-item">item</li>
<li class="simple-item">item</li>
<li class="simple-item">item</li>
</ul>
</li>
</ul
In your case submenu is separated from list items.
Using the same structure you have just add class to the drop menu,
set ul inside the dropMenu to display none, then to display on however. You can use css3 or jquery to make it have a nice animation or toggle.
<div class="menu">
<ul>
<li class="aktivni-active">Home</li>
<li class="dropMenu">Massages</li>
<ul>
<li>Aanbiedingen</li>
</ul>
<li>Aanbiedingen</li>
<li>Prijzen</li>
<li>Agenda</li>
<li>Contact</li>
</ul>
</div>
CSS
.menu ul{
display:none
}
.menu:hover ul{
display:block;
}
if you want some better just use jquery http://api.jquery.com/toggle/
when I set the "width" attribute of the .topMenu li, the .subMenu width is too narrow, even though I set it's position to absolute. It also is horizontal instead of vertical. Why?
the html
<div id="navigation">
<ul id="navBlock">
<li>HOME</li>
<li class="topMenu">
ABOUT US
<ul class="subMenu">
<li>WELCOME</li>
<li>HISTORY</li>
</ul>
</li>
</ul>
</div>
the css
#navBlock{
margin: 0;
padding: 0;
list-style-type: none;
}
#navBlock li{
display: inline-block;
border:1pt solid #ccc;
width:20%;
text-align:center;
background:#fff;
position:relative;
}
#navBlock li:hover{
cursor:pointer;
background:orange;
}
.topMenu:hover .subMenu{
display:block;
position:absolute;
}
.subMenu{
display:none;
margin: 0;
padding: 0;
}
.subMenu li{
border:1pt solid #aaa;
background:#fff;
width:200px;
display: inline;
position:absolute;
}
.subMenu li:hover{
float:none;
}
http://jsfiddle.net/L28Lf3se/
The problem is one of specificity. Your CSS for .subMenu li is being overridden by the #navMenu li because it thinks it's more specific. That whole block isn't being used. Re-label the .subMenu li to #navBlock li ul li and you'll be good to go.
Change the width in px than %
#navBlock li{
display: inline-block;
border:1pt solid #ccc;
width:150px;
text-align:center;
background:#fff;
position:relative;
}
Everything will work smooth
#navBlock li(0-1-0-1) more specific than .subMenu li(0-0-1-1) that's why the width you set for .subMenu li are get overrided.
You shouldn't touch your #navBlock li width.
Change #navBlock li to #navBlock>li and magic will happen.
This is best you can do to solve your problem.
I'm currently designing a Nav menu that includes ul, li and a elements. I'm trying to produce an effect where hovering over an a tag will only change the background color near the text for the link itself instead of the whole li area around it.
HTML:
<nav>
<div class="full_menu">
<ul>
<li>Login</li>
<li>About</li>
<li>FAQ</li>
<li>Blog</li>
<li>Our Team
<ul>
<li>Bob</li>
<li>James</li>
<li>Tom</li>
</ul>
</li><!--End team dropdown -->
</ul>
</div>
CSS:
nav {
margin:0 auto;
text-align:center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display:block;
}
nav ul {
background: #17A74A;
padding:0px;
list-style:none;
position:relative;
display: inline;
border:0px;
}
nav ul li {
float:right;
margin-top:0px;
}
nav ul li a {
display:block;
padding:33px 40px;
color:#000;
text-decoration:none;
font-weight:bold;
font-size:18px;
}
nav ul li a:hover {
background-color:#2D6AF7;
color:#FFF;
}
nav ul ul {
background:#17A74A;
position:absolute;
top:71px;
}
nav ul ul li {
float:none;
border-bottom:1px solid #FFFFFF;
}
nav ul ul li a {
padding:15px 40px;
color:#FFF;
}
nav ul ul li a:hover {
background:#27BCDD;
}
nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
I thought that by using nav ul li a:hover would fix this problem but the whole li area is still changing its background color instead of just the immediate area around the link text.
Any help would be greatly appreciated!
Do you want to achieve following result? I've removed the padding from your <a> elements and added them to the <li> elements instead.
JSFiddle
You need to change the padding to a margin if you don't want the whole thing to change color. Try this:
nav ul ul li a {
margin:15px 40px;
color:#FFF;
}
I´m trying to make a submenu on hover for hours, read about ten tutorials or more and finally don't get it working.
I want it to show "Zimmer", "Reservierung" and "Preise" in a vertical menu if I hover "Hotel" and so on.
This is my code:
a {
text-decoration: none;}
nav {
height: 50px;
clear: both;}
nav ul {
padding: 5px 0px;
text-align: center;}
nav li {
margin: 0px;
display: inline;
padding: 0px;}
nav li a {
font-size: 18px;
color: #775923;
padding: 0px 20px;
margin: 0px;}
nav li a:hover, nav li a.current {
color: #775923;
padding: 0px 20px 14px 20px;
-webkit-padding-after: 15px;
box-shadow: 0 4px #b1d130;}
nav ul ul{
display: none;}
nav ul li:hover ul {
display: block;}
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel</li>
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
<li>Restaurant</li>
<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
<li>Anfahrt</li>
<li>Kontakt</li>
<ul>
<li>Team</li>
<li>Über Uns</li>
</ul>
</ul>
</nav>
Link: http://jsfiddle.net/AuJeF/445/
Hope you can help.
Thank you
You have the problem on your markup,
change as following-
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
(this is a simple dropdown menu)
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
<li>Restaurant<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
</li>
</ul>
</nav>
css
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li.current-menu-item
{
background:#ddd
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul ul li
{
float:none;
width:200px
}
nav ul ul a
{
line-height:120%;
padding:10px 15px
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
jsfiddle
the mistake in you html. ul > ul mast be insite li. But not outsideю
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
You're writing style - if ul inside li then ul display block. But inside li no ul it after him.
Will validator error, because tag ul inside >ul that's not true, there can be only >li
Think, I help U
(source: torrent-invites.com)
I want to make pure CSS multi level menu like the picture above. I have tried some tutorial but its not working for me. Menu "xxxxx" and "yyyyy" appear below menu "bbbbb" for my CSS code below.
What I want to make is 3 level menu like the picture above.
This is my HTML for the menu:
<span id="nav">
<ul>
<li>ssss
<ul>
<li>aaaaa</li>
<li>bbbbb
<ul>
<li>xxxxx</li>
<li>yyyyy</li>
</ul>
</li>
</ul>
</li>
<li>ttttt</li>
<li>uuuuu</li>
</ul>
</span>
And this is my minimized CSS code:
li {
list-style:none !important;
}
#nav, #nav ul {
list-style: none;
padding:0;
margin:0;
}
#nav li {
line-height:20px;
float:left;
}
#nav li ul{
display:none;
}
#nav ul li ul {
margin-top:-3em;
margin-left:7em;
}
#nav ul li:hover ul {
z-index:99999;
display:list-item !important;
position:absolute;
margin-top:2px;
margin-left:0px;
padding: 5px 15px;
background: #8ac312;
}
#nav ul li:hover ul li {
float:none;
padding: 2px 0px;
}
#nav ul li:hover ul li > a:before {
content: '» ';
}
Any help would be very appreciated to make my CSS code working like the illustration picture above. Thanks.
I think your problem is position relative and absolute. I remove your style and do on my own (simpler, uglier). Code is here jsFiddle
And the code is:
CSS:
ul { padding:0; margin:0; }
li { list-style:none; }
li > ul { display: none; }
li:hover > ul { display: block; }
.lvl1 li { margin-right: 10px; display: inline; position:relative; }
.lvl2 { position: absolute; }
.lvl2 li { position: relative; }
.lvl3 { position: absolute; top:0px; left: 50px; }
HTML:
<span id="nav">
<ul class='lvl1'>
<li>ssss
<ul class='lvl2'>
<li>aaaaa</li>
<li>bbbbb
<ul class='lvl3'>
<li>xxxxx</li>
<li>yyyyy</li>
</ul>
</li>
</ul>
</li>
<li>ttttt</li>
<li>uuuuu</li>
</ul>
</span>
I've edited your code a bit ... check this fiddle http://jsfiddle.net/kau5h/
li {
list-style:none !important;
position:relative;
}
#nav, #nav ul {
list-style: none;
padding:0;
margin:0;
}
#nav li {
line-height:20px;
float:left;
}
#nav li a {display:block;}
#nav li ul{
display:none;
z-index:99999;
/*display:list-item !important;*/
position:absolute;
/*margin-top:2px;*/
margin-left:0px;
background: #8ac312;
}
#nav li ul ul {left: 100%; top:0;}
#nav ul li ul {
/*margin-top:-3em;
margin-left:7em;*/
}
#nav ul li:hover > ul {
display: block;
}
#nav ul li:hover ul li {
float:none;
/*padding: 2px 0px;*/
}
#nav ul ul li {
padding: 5px 15px;
display: block;
}
#nav ul ul li > a:before {
/*content: '» '; */
}