I want to achieve, that both layers the li elements are positioned horizontally
like this:
Case 1 (user hovers Home):
Home / Kontakt
Home-Sub1 / Home_Sub2
Case 2 (user hovers kontakt):
Home / Kontakt
Kontakt_Sub1 / Kontakt_Sub / Kontakt_Sub3
The css code of my navigation:
#navigation ul.menu {
list-style-type:none;
list-style:none;
/*overflow:hidden;*/
width:980px;
}
#navigation ul li.expanded {
list-style:none;
list-style-type:none;
padding:0;
float:left;
display:inline;
height:32px;
}
#navigation ul.menu {
width:100%;
height:32px;
border-bottom: 1px solid #cecbcd;
}
/* style list as navigation using float:left */
#navigation ul.menu li {
padding:0;
float:left;
display:inline;
height:32px;
position:relative;
}
/* set distance from left corner to the first li item */
#navigation ul.menu li:first-child {
margin-left:150px;
}
#navigation ul.menu li ul li:first-child {
margin-left:0px;
}
#navigation ul.menu li ul {
display:none;
position:absolute;
top:2em;
left: 1em;
float:left;
border:none;
}
#navigation ul.menu li:hover ul {
display:block;
}
#navigation ul.menu li ul li {
display:inline;
background-image:none;
}
#navigation ul.menu li a {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li ul li a {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li ul li a:hover,
#navigation ul.menu li ul li.active-trail a.active-trail {
/*background-color:#ffffff; */
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:underline;
color: #666666;
height: 32px;
background-image:none;
display:block;
padding-left:5px;
padding-right:5px;
float: left;
}
#navigation ul.menu li a:hover {
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
height: 32px;
background-image:url('../images/navi_active.png');
background-position:center;
background-repeat:no-repeat;
}
#navigation ul.menu li a.active,
#navigation ul.menu li.active-trail a.active-trail {
font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
text-decoration:none;
color: #ffffff;
height: 32px;
background-image:url('../images/navi_active.png');
background-position:center;
background-repeat:no-repeat;
}
use float:left or display:inline to style an li like this:
ul li {
float: left;
}
OR
ul li {
display: inline;
}
Related
What css do I need to centrally align the top level nav in my nav bar? I've been playing around with it for ages but can't get it sorted.
HTML Code
<ul id="nav">
<li class="level0 nav-1 first level-top parent">
<a href="#" class="level-top" > <span>Women</span></a>
<ul class="level0">
<li class="level1 nav-1-1 first"><a href="#" ><span>Tops</span></a></li>
<li class="level1 nav-1-2 last"><a href="#" ><span>Accessories</span></a>/li>
</ul>
</li>
<li class="level0 nav-2 level-top">
<a href="#" class="level-top" ><span>Men</span></a>
</li>
<li class="level0 nav-3 level-top">
<a href="#" class="level-top" ><span>Accessories</span></a>
</li>
</ul>
CSS Code
/********** < Navigation */
.nav-container {
background-color: #FFF;
border-color: #444;
border-top-style: solid;
border-bottom-style: solid;
border-width: 2px; width: 100%; margin:10px 0 0 0; height: 28px;position: relative;
}
.nav-container select { margin: 18px 0; }
.nav-container select { width: 100% }
#nav { float: left;
font-size: 15px;
margin: 0;
width: 100%;
}
/* All Levels */ /* Style consistent throughout all nav levels */
#nav li { position:relative;text-align:center; }
#nav li.over { z-index:998; }
#nav a,
#nav a:hover { display:block; text-decoration:none; text-transform:uppercase; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
/* 0 Level */
#nav li {
float: left;
padding: 4px 12px;
}
#nav li.active a { color: #999999; }
#nav a { color: #555555;
float: left;
font-weight: bold;
padding-right: 11px; font-family:Arial, Helvetica, sans-serif; }
#nav li.over a,
#nav a:hover { color: #999999; }
/* 1st Level */
#nav ul li,
#nav ul li.active,
#nav ul li.over { float:none; border:none; background:none; margin:0; padding:0; padding-bottom:1px; text-transform:none; }
#nav ul li.parent { }
#nav ul li.last { padding-bottom:0; }
#nav ul li.active { margin:0; border:0; background:none; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }
/* 2nd Level */
#nav ul,
#nav div { position:absolute; width:15em; top:30px; left:-10000px; border:1px solid #bbb; padding:3px 8px; background:#fcfcfc; }
#nav div ul { position:static; width:auto; border:none; padding:0; }
/* 3rd+ Level */
#nav ul ul,
#nav ul div { top:5px; }
#nav ul li a { padding:3px 0; color:#444 !important; }
#nav ul li a:hover { padding:3px 0;}
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { left:-1px; z-index:999; }
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { left:100px; }
.flex-direction-nav {display:none;}
/********** Navigation > */
EDIT
I was able to center the top level by changing to this code...
/* 0 Level */
#nav li { float: none; display:inline-block; }
But this made my second nav level items buch up together on one line?
change the css to this,
#nav {
font-size: 15px;
margin: 0 auto;
width:310px;
}
give #nav a fixed width and remove the float:left;
ul {text-align: center; width:100%}
ul li {display: inline-block; float: none;}
You should write your css like this.. I mean ul should be in full width and text-align:center property, its li should have display: inline-block property and it should not float to left or right;
It is not happening because ul has 100% width.
If you want ul to be in center, then its parent element must have fixed width and text-align:center.
Here is the fiddle.
I have this CSS for my horizontal menu:
.vertical-nav {
height:auto;
list-style:none;
margin: 20px 0 0 0;
}
.vertical-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
min-width: 125px; /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#F36F25;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 6px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
but the sub menu links are displaying horizontally rather than vertically...
whats the best way to change the CSS to make this to make the sub links display vertical rather than horizontal?
here is the HTML of the menu:
<ul class="vertical-nav">
<li>Link
<ul class="sub-menu">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</li>
</ul>
.sub-menu li
{
clear: both;
}
Add the above CSS. DEMO
Like this
DEMO
CSS
.vertical-nav {
height:auto;
list-style:none;
width: 400px; /******* MODIFIED ********/
margin: 20px 0 0 0;
}
.vertical-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
width: 200px; /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#F36F25;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 6px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
I have a CSS Menu with sub menu links but if there is text below the menu, the sub menu displays under the text and i cannot hover over the links
here is the CSS:
.vertical-nav {
height:auto;
list-style:none;
width: 100%; /******* MODIFIED ********/
margin: 20px 0 0 0;
}
.vertical-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
width: 100px; /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#F36F25;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.vertical-nav li:hover .sub-menu
{
display: table;
}
.sub-menu li
{
width: 100%;
min-width: 180px;
white-space: nowrap;
display:table-row;
}
.sub-menu li a
{
display:inline-block;
padding: 0 10px;
}
and a jsFiddle: http://jsfiddle.net/7z2sE/
how can i make the sub menu links display over any text that is below...
I've updated the fiddle http://jsfiddle.net/7z2sE/1/
add position:relative;z-index:1; to .sub-menu li
To do what you are after use absolute positioning and give the text a z-index that is higher than the element behind it.
i have this css:
.vertical-nav {
height:35px;;
list-style:none;
width: 100%; /******* MODIFIED ********/
margin-top:0;
margin-bottom:35px;
padding:0;
background:#03F;
}
.vertical-nav li {
height: 25px;
margin: 0;
text-align:center;
padding: 5px 0;
background-color: #03F;
border: none;
display: inline-block;
float: left;
width: 120px; /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#000000;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#000000;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.vertical-nav li:hover .sub-menu
{
display: table;
}
.sub-menu li
{
width: 100%;
min-width: 180px;
white-space: nowrap;
display:table-row;
z-index:1;
position:relative;
}
.sub-menu li a
{
display:inline-block;
padding: 0 10px;
}
the menu is 100% width of the page so i need to get the links centred in the page
here is a jsFiddle so you can see the HTML Too and the fully functional menu: http://jsfiddle.net/rspc3/
Move the text-align:center; rule from .vertical-nav li to .vertical-nav and remove the float: left; on .vertical-nav li
jsFiddle example
this will work perfectly
<ul id="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
Replace your CSS with:
.vertical-nav {
height:35px;;
list-style:none;
width: 100%; /******* MODIFIED ********/
margin-top:0;
margin-bottom:35px;
padding:0;
background:#03F;
text-align:center;
padding-top:10px;
}
.vertical-nav li {
height: 25px;
margin: 0;
text-align:center;
padding: 5px 0;
background-color: #03F;
border: none;
display: inline;
float: none;
margin:0px 30px 0px 0px;
width: 120px; /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#000000;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#000000;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.vertical-nav li:hover .sub-menu
{
display: table;
}
.sub-menu li
{
width: 100%;
min-width: 180px;
white-space: nowrap;
display:table-row;
z-index:1;
position:relative;
}
.sub-menu li a
{
display:inline-block;
padding: 0 10px;
}
this is what I have
http://jsfiddle.net/ftKw5/
/* CSS element classes */
#font-face {
font-family:'myriad-webfont';
src: url('webfont/myriad-webfont.ttf') format('truetype'), url('webfont/myriad-webfont.svg#myriad_webfont') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: myriad-webfont;
color: #000000;
background: url('img/silk_pat#2x.png');
letter-spacing: 2px;
}
h2 {
;
font-size: 3;
}
::-webkit-input-placeholder {
color:#222222;
opacity:0.1;
}
/* CSS element IDs */
#outer-wrapper {
width: 50em;
margin: 1em auto;
background-position:inherit;
border: 2px solid #dcdcdc;
border-radius: 1.5em;
position:relative;
background-color: #ffffff;
}
#surtitle {
border-bottom: 1px solid #dcdcdc;
text-align: center;
opacity: 0.3;
font-size:15px;
letter-spacing: 7px;
}
#topnavbar {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
opacity: 0.5
}
/* Dropdown */
.nav {
padding-top:-10;
height:36px;
background:#aaa;
color:#fff;
text-shadow:1px 1px #888;
z-index:400
}
.menu a {
float:right;
color:#eee;
text-decoration:none;
width:120px;
height:28px;
padding-top:8px
}
.menu span {
float:right;
color:#eee;
text-decoration:none;
width:120px;
height:28px;
padding-top:8px
}
.menu a:hover {
color:#fff
}
.menu {
list-style:none;
font:10px;
text-align:center;
width:600px;
margin:0;
}
.menu li {
position:relative;
float: right;
width:120px;
z-index:400
}
.menu ul {
margin:0;
padding:0;
outline:0;
display:none;
position:absolute;
font:10px;
top:36px;
left:0;
background:#aaa;
display:none;
list-style:none
}
.menu ul li {
float:none;
border-top:1px solid #ccc;
width:120px
}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px
}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {
background:#999;
color:#fff
}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
float:none;
display:block;
background:none;
height:22px;
padding-top:5px
}
.menu ul ul {
left:120px;
top:0
}
.menu li.submenu {
}
.menu li.noborder {
border-top:none
}
li.menuhover a, li.menuhover li.menuhover a {
color:#fff;
background:#999
}
li.menuhover span, li.menuhover li.menuhover span {
color:#fff;
background:#999
}
For some reason, when I run it, it won't hug the top etc. I added the jsfiddle so that it's a little better to read and you can see the html to go with it.
If i am understanding your questio0n correct the below css will help you.
CSS:
body {
font-family: myriad-webfont;
color: #000000;
background: url('img/silk_pat#2x.png');
letter-spacing: 2px;
padding:0; // it will remove padding from body tag
margin:0; // it will remove margin from body tag
}
Answer of new requirement in comments (Menu shoul be center of top bar ):
.menu {
list-style: none outside none;
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
width: 368px;
}
.menu li {
float: left;
width: 120px;
z-index: 400;
}