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;
}
Related
I'm currently working on my website and I have an existing navigation bar. The problem is that I have too much information to share on one page. That's why I'd like to implement a dropdown menu in the existing navigation bar. I've tried many many things but it all seems to screw up my lay-out of the css or it completely deletes the navigation bar.
I got an exisiting code for a dropdown menu but I simply am not able to blend it with the existing css code. I got this code from the internet, it is not my property.
My HTML:
<div id="menu">
<ul>
<li class="current_page_item">Home</li>
<li>Onze service</li>
<li>Ons team</li>
<li>Prijzen</li>
<li>Contact</li>
</ul>
</div>
My CSS:
#menu
{
position: absolute;
right: 0;
top: 1em;
}
#menu ul
{
display: inline-block;
}
#menu li
{
display: block;
float: left;
text-align: center;
line-height: 60px;
}
#menu li a, #menu li span
{
display: inline-block;
margin-left: 1px;
padding: 0em 1.5em;
letter-spacing: 0.10em;
text-decoration: none;
font-size: 1.0em;
text-transform: uppercase;
outline: 0;
color: #212121;
background: #ECECEC;
}
#menu li:hover a, #menu li.active a, #menu li.active span
{
}
#menu .current_page_item a
{
background: #E24E2A;
color: #FFF;
}
#menu .icon
{
}
Drop down menu:
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap 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
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
Thanks in advance!
Your navigation wrapper is menu whereas in the CSS from online it is primary_nav_wrap, so swap instances of these to menu.
In the html itself nested unordered list elements is used for the drop-downs, so add these under the list element where you need a drop-down.
Html:
<div id="menu">
<ul>
<li class="current_page_item">Home<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
<li>Onze service</li>
<li>Ons team</li>
<li>Prijzen</li>
<li>Contact</li>
</ul>
</div>
CSS:
#menu ul {
display:inline-block;
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#menu li {
display:block;
float:left;
text-align:center;
line-height:60px
}
#menu li a,#menu li span {
display:inline-block;
margin-left:1px;
padding:0 1.5em;
letter-spacing:.1em;
text-decoration:none;
font-size:1em;
text-transform:uppercase;
outline:0;
color:#212121;
background:#ECECEC
}
#menu .current_page_item a {
background:#E24E2A;
color:#FFF
}
#menu {
margin-top:15px
}
#menu 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
}
#menu ul li {
position:relative;
float:left;
margin:0;
padding:0
}
#menu ul li.current-menu-item {
background:#ddd
}
#menu ul li:hover {
background:#f6f6f6
}
#menu ul ul {
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#menu ul ul li {
float:none;
width:200px
}
#menu ul ul a {
line-height:120%;
padding:10px 15px
}
#menu ul ul ul {
top:0;
left:100%
}
#menu ul li:hover > ul {
display:block
}
Here is a jsfiddle of the code merged:
https://jsfiddle.net/o51pp5s6/
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.
Here it is:
http://gyazo.com/e94edf3c9b10bc33c2d9be8ed049583e
As you can see, the submenu works, and when I hover over something on the submenu, it creates a grey background. The problem is, once I get under "Sports Edition", the hover basically cancels and closes the submenu. It stops right where that blue line begins.
Here is the code:
HTML:
<div id="toprightunder">
<ul>
<li>
Content options
<ul>
<li>Default Homepage</li>
<li>News Edition li>
<li>Entertainment Edition</li>
<li>Sports Edition</li>
<li>Latino Edition</li>
</ul>
</li>
</ul>
</div>
CSS: (there is a lot because I was testing a lot)
#toprightunder {
margin-top:18px;
height:15px;
position:absolute;
width:200px;
right:0;
}
#toprightunder a {
text-decoration:none;
color:rgb(100, 100, 100);
margin-left:0;
padding-bottom:3px;
}
#toprightunder ul {
list-style:none;
margin:0 auto;
/*text-align:right;*/
position:relative;
display:inline-table;
margin-left:0;
padding-left:0;
}
#toprightunder ul li {
display:inline;
color:rgb(100, 100, 100);
font-family:"arial", times, sans-serif;
font-size:10px;
margin-top:13px;
text-decoration:none;
margin-left:0;
padding-left:0;
}
#toprightunder ul ul {
display:none;
}
#toprightunder ul li:hover > ul {
display:block;
}
#toprightunder ul ul {
position: absolute;
top: 100%;
padding-top:2px;
padding-bottom:7px;
margin-right:0;
right:0px;
background: white;
border: 1px solid #000;
overflow:hidden;
height:auto;
margin:auto;
}
#toprightunder ul ul li {
position:relative;
color:rgb(100, 100, 100);
font-size:13px;
display:block;
/*margin-bottom:10px;
padding-left:25px;
padding-right:4px;*/
white-space:nowrap;
height:auto;
margin:auto;
}
#toprightunder ul ul li a {
color:#fff;
text-align:left;
float:left;
margin-right:0;
position:relative;
}
#toprightunder a:hover {
background-color:transparent;
color:rgb(100, 100, 100);
}
#toprightunder ul li:hover > li {
background-color:transparent;
}
#toprightunder ul ul li:hover > a {
color:rgb(50, 50, 50);
background:rgb(240, 240, 240);
}
#toprightunder ul ul li > a {
color:rgb(100, 100, 100);
padding-bottom:7px;
padding-top:2px;
padding-left:25px;
width:100%;
}
#headbar a {
text-decoration:none;
color:white;
padding-bottom:2px;
padding-top:4px;
padding-left:8px;
padding-right:8px;
}
#headbar ul ul {
display:none;
}
#headbar ul li:hover > ul {
display:block;
color:green;
}
#headbar ul {
text-decoration:none;
list-style:none;
margin-top:1px;
padding:0;
position:relative;
}
#headbar ul li {
display:inline;
color: white;
padding-bottom:2px;
padding-top:3px;
font-family:"arial", times, sans-serif;
font-size:12px;
}
#headbar ul ul {
border-radius: 0px;
position: absolute;
top: 100%;
padding-top:6px;
}
#headbar ul ul li {
float:none;
position:relative;
color:rgb(100,100,100);
font-size:16px;
}
#headbar ul ul li a {
color:#fff;
}
#headbar ul ul li a:hover {
}
/*#headbar ul:after {
content: "";
clear:both;
display:block;*/
#headbar a:hover {
background-color:rgb(255,255,255);
color:rgb(100,100,100);
}
#headbar ul li:hover > a{
color:rgb(50,50,50);
background-color:transparent;
padding-top:8px;
}
#headbar ul ul li > a {
color:rgb(100,100,100);
padding-top:8px;
}
#headbar {
width: 100%;
height: 20px;
background-color: rgb(30,144,255);
text-decoration:none;
padding-top:129px;
text-align: left;
/*position:relative;*/
}
Add z-index: 2; to the #toprightunder selector and that should resolve your problem.
#toprightunder {
margin-top:18px;
height:15px;
position:absolute;
width:200px;
right:0;
z-index: 2;
}
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;
}