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;
}
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 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;
}
Hi I cannot figure out how to change the size of the child item of the CSS menu (The parent has an image background, the child should have a background color).
I tried something like:
ul > li > a:hover {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
but it is all mixed with other elements. Can you please help me figure it out?
HTML:
<div id="menu">
<ul>
<li><a id="menu1" href="#">Parent1</a></li>
<li>Parent2
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
<li>Parent3</li>
<li>Parent4</li>
<li>Parent5</li>
</ul>
</div>
CSS:
#menu {
position:absolute;
top:133px;
left:0px;
width:900px;
height:50px;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
/*padding: 5px 15px 5px 15px;*/
background-image: url(../images/menu1.png);
white-space: nowrap;
width:178px;
height:50px;
}
ul li a:hover {
background: #BBBBBB;
}
li:hover ul {
display: block;
position: absolute;
left:0px;
}
li:hover li {
float: left;
font-size: 11px;
}
li:hover a {
background: #3b3b3b;
}
li:hover li a:hover {
background: #CCC;
}
Thank you very much for your help in advance!
Hope following changes will work for you. Here is the fiddle link. Followings are your css chagnes
#menu {
/*position:absolute;
top:0;
left:0px;*/
width:900px;
height:22px;
background-color:#000;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
line-height:22px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
}
ul li {
display: block;
float: left;
position:relative;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
/*padding: 5px 15px 5px 15px;*/
background-image: url(../images/menu1.png);
white-space: nowrap;
width:178px;
line-height:22px;
}
ul li:hover a {
background: #BBBBBB;
}
ul li ul {
display: none;
widht:200px;
position:absolute;
left:0;
top:22px;
}
ul li ul li {
float: none;
font-size: 11px;
}
ul li ul li a {
background: #3b3b3b;
background-image:none!important;
}
ul li ul li a:hover {
background: #CCC;
}
ul li:hover ul {
display: block;
position: absolute;
left:0px;
}
To add a background color to your child sub menu:
ul li ul li {
// rules
}
You can also add class to your list items to make it more manageable. For example, you can add a class to the ul of your child menu:
<li>Parent2
<ul class="sub-menu">
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
Then you can simplify the css to:
.sub-menu li {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
It is good to retain the same width so that you can avoid that weird movement.
Try this
ul li ul li a:hover {
display:block;
background:#000;
float:left;
width:178px;
height:25px;
}
DEMO
I don't know how you want the result to look exactly but you could also use the + selector in your css like this:
ul > li > a:hover+ {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
The + selector as you see after a:hover means that the next element directly after the a:hover-tag will be selected and is this case it will be a ul
You can also specify the element with +ul if you want the ul to be a list and not a flat one like this:
ul > li > a:hover+ul {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
Like this you know that you will only affect the element next to the hovered one
Solution
ul > li:hover > li > a {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
It can be as per requirement
ul > li:hover li a { }
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;
}