Created a navigation menu with one drop menu. For some reason I am unable to get the correct CSS dropping the menu on "Main 3." Would someone mind looking at my CSS to see if there is something I may have missed.
HTML
<ul class="navmenu">
<li>Main 1</li>
<li>Main 2</li>
<li>
Main 3
<ul>
<li>Sub 1</li>
<li>Sub 2 </li>
<li>Sub 3</li>
<li>Sub 4</li>
</ul>
</li>
<li>Main 4</li>
<li>Main 5</li>
<li>Main 6</li>
<li>Main 7</li>
</ul>
CSS
.navmenu{
background: #510E2A;
height: 35px;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
text-align: justify;
}
.navmenu li{
float: left;
}
.navmenu li a{
display: block;
padding:9px 20px;
text-decoration: none;
font-family: THCFontSemiBold;
color: #f3ac3f;
font-weight: bold;
}
.navmenu ul{
list-style-type: none;
position: absolute;
z-index: 1000;
left: -9999em;
}
.navmenu li:hover{
position: relative;
}
.navmenu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.navmenu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:red;
}
.navmenu li:hover ul li a:hover { background:#005555; }
Fiddle is here
Just remove overflow from navmenu
.navmenu{
background: #510E2A;
height: 35px;
margin: 0;
padding: 0;
list-style-type: none;
text-align: justify;
}
Updated Fiddle
Related
I wonder if there is a way to lower opacity (on hover) to all of the 'li's' except the one I'm actually hovering? Something similar to this picture:
.main-navigation {
margin: 0;
padding: 20px 0px 25px;
list-style: none;
background-color: #ffffff;
text-align: center;
display:block;
font-size:1.1em;
}
.main-navigation li.hvr a.lvl1:link,
.main-navigation li.hvr a.lvl1:visited
{
display: block;
padding: 5px 2px 5px 3px;
color: #000;
text-decoration: none;
text-align:center;
}
.main-navigation li.hvr a.lvl1.active {
background: #eeeeee;
color:#000000;
}
.main-navigation li.hvr a.lvl1:hover
{
background-color: #E6E6E6;
color:#666666;
}
.main-navigation li.hvr {
float: left;
position: relative;
width:191px;
margin:0;
font-family: 'Open Sans', sans-serif;
}
.main-navigation li.hvr:hover {
background-color: #E6E6E6;
}
.main-navigation ul {
display: none;
position: absolute;
top:100%;
left: 0;
z-index: 9999;
background-color: #777;
margin: 0;
padding: 0;
min-width:100%;
text-align:left;
}
.main-navigation li.hvr:hover ul { display: block; }
.main-navigation li.hvr ul li {
margin: 0;
padding: 0;
list-style: none;
}
.main-navigation li.hvr ul li a:link,
.main-navigation li.hvr ul li a:visited
{
display: block;
padding: 5px 20px;
color: #fff;
text-align: center;
}
.main-navigation li.hvr ul li a:hover,
.main-navigation li.hvr ul li a:active
{
display: block;
padding: 5px 20px;
color: #fff;
background-color:#cccccc;
}
<ul class="main-navigation clearfix">
<li class="hvr ">
<a class="lvl1 active" href="">Title 1</a>
<ul>
<li>Sub title 1</li>
<li>Sub title 2</li>
<li>Sub title 3</li>
</ul>
</li>
<li class="hvr ">
<a class="lvl1" href="">Title 2</a>
<ul>
<li>Sub title 1</li>
<li>Sub title 2</li>
<li>Sub title 3</li>
</ul>
</li>
<li class="hvr ">
<a class="lvl1" href="">Title 3</a>
<ul>
<li>Sub title 1</li>
<li>Sub title 2</li>
<li>Sub title 3</li>
</ul>
</li>
<li class="hvr ">
<a class="lvl1" href="">Title 4</a>
<ul>
<li>Sub title 1</li>
<li>Sub title 2</li>
<li>Sub title 3</li>
</ul>
</li>
</ul>
You lower the opacity of all alements except the hovered one with CSS.
The point is to lower the opacity of all <li> elements when the parent (ul) is hovered and to reset the opacity to 1 on the hovered li element like this :
ul:hover li { opacity:0.5; }
ul li:hover { opacity:1; }
Here is a simple demo :
li{
float:left;
width:33.33%;
line-height:50px;
background:grey;
list-style-type:none;
}
ul:hover li{
opacity:0.5;
}
ul li:hover{
opacity:1;
}
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
I have created my nav bar which was working fine but now i tried to add sub menu in my navbar and its not showing sub menu on hover. kindly check and correct me.
First I added <ul> in my <li> tag then I added css to hide nested <ul> then I tried to show <ul> on hover <li>
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
</nav>
Looks like your <li> wrap is incorrect!
here is the fiddle
After Privacy Policy you have created another <li> that shouldn't be needed. you have to wrap the sub-menus with in privacy policy tag not a new one that is one of the reason why the css was not showing data as expected and you were almost there regarding CSS I just fixed it for you! hope it helps.
* {
margin: 0;
padding: 0;
}
nav {
height: 30px;
}
nav ul {
display: block;
position: relative;
z-index: 100;
}
nav ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li ul {
display: none;
}
nav ul li a {
width: 100px;
height: 30px;
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
nav ul li a:hover {
background-color: red;
}
nav ul li:hover ul {
position: absolute;
top: 30px;
display: block;
width: 100px;
}
nav ul li:hover ul li {
display: block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
</nav>
Why don't you start from this working snippet and try to change data according to your needs :)
HTML Sub-Nav
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
test
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
You have to add an anchor tag in the sub nav you have created. Because currently those sub-tabs are created but are not associated with any super-tab.
Subnav
So add this above your sub-nav code. You are good to go.
I'm trying to create a nested dropdown menu that may potentially be very long and overflow off the page.
What I'd like to do is, when the menu is too long it will display a scroll bar. I'm doing this with overflow: auto. However, when I do this, it traps any submenus within the same 'scroll space' as defined by the first scroll bar.
I've also tried various iterations of overflow: none with the :not(:hover) selector, but nothing I've tried seems to work.
What I'd like it to do is show the scrollbar on each level, only if necessary (i.e. that submenu would scroll off the page). Each submenu should 'pop' out of the previous scroll bar, if any, as if it was not there.
I'd like to do this in all CSS, but I'm open to a JS solution as well.
I have a code pen showing the issue here:
https://codepen.io/mcmurphy510/pen/ZyGLKd
I'm not sure if I'm understanding your question correctly, but try isolating your desired element by using ID or CLASS. See the third level 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;
height: 200px;
}
#primary_nav_wrap ul li ul li:not(:hover) {
}
/* ul li ul li ul li {
overflow: auto;
} */
#subdeep {
overflow: auto;
height: 50px !important;
}
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul id="subdeep">
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
Probably you could use the proposed solution as the elements are positioned relative to each other and therefore the menu can set up some branches, you would "just" require to ensure that the parent element(s) remain visible
Mouse over on item "Link 3" will shows its sub-menu on the right side of it and then mouse over on "Link 31" for further sub menu.
.menu {
position: relative;
}
ul {
width: 200px;
margin: 0;
color: black;
list-style:none;
padding:0;
max-height:100px;
overflow-x: hidden;
overflow-y: auto;
}
li {
padding:0.5em;
}
li:hover{
background-color:blue;
color:white;
}
li .menu {
position: absolute;
z-index: 10;
background-color:lightgrey;
opacity: 0;
transition: opacity 0.5s;
}
li:hover > .menu,
.menu:hover {
opacity: 1;
}
li.parent {
cursor: pointer;
}
.level2 {
top: 0px;
left: 200px;
}
<div class="menu">
<ul>
<li>Link1</li>
<li class="parent">Link3...
<div class="menu level2">
<ul>
<li class="parent">Link31...
<div class="menu level2">
<ul>
<li>Link 311</li>
<li>Link 312</li>
<li>Link 313</li>
<li>Link 314</li>
</ul>
</div>
</li>
<li>Link 32</li>
<li>Link 33</li>
<li>Link 34</li>
</ul>
</div>
</li>
<li>Link2</li>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
I'm making a wordpress theme and I have some problems with the menu codification. My menu has sub-menus but they are displaying in the wrong way, And I don't know what to do to make them look like a Drop-Down menu. Here's the link to my site.
Would you mind giving me a CSS code (only) for a really simple dropdown menu? In my website, the menu with sub-categories is 'TV Shows' and the Subcategories are 'Pretty Little Liars', 'Resurrection', and 'Chasing Life'. I need a CSS to make them drop-down from 'Tv Shows'.
This is my CSS Code for the links
#menu {
height:55px;
background-color: #000;
width:100%;
top:0px;
left:0px;
z-index:101;
text-align:center;
text-transform:uppercase;
position:relative;
}
.menulinks {
float:right;
}
#menucontainer {
margin: 0 auto;
width:900px;
font-family: 'Open Sans', sans-serif;
}
#menucontainer a {
color:#fff;
}
#menucontainer a:hover {
color:#fff;
}
#menucontainer ul {
list-style: none;
padding:7px;
color:#A4A4A4;
}
#menucontainer ul a {
color:#848484;
}
#menucontainer li a {
color:#848484;
}
#menucontainer li {
display: inline;
margin-right:3px;
margin-left:3px;
padding:3px;
color:#848484;
}
Try This. fiddle here
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border: 1px solid;
}
ul li {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
}
ul li:hover {
background: #262222;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #262222;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
background: #a1a1a1;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>Home</li>
<li>Menu1</li>
<li>Menu2
<ul>
<li>Sub Menu</li>
<li>Another Sub Menu</li>
<li>And Anthor Sub Menu</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
The answer is more than just CSS. You have to make sure the HTMl is built to accept both. You have to have a ul tag within a ul tag to cause the secondary drop down.
Here is a codepen link for exactly what your looking for I think:
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</nav>
Good luck!
How can I create a drop down menu like the one in this picture:
What I already tried:
Check out this jsfiddle
I really can't get it to work, sorry for this noobish question and the code in the JSFiddle is all I have.
CSS:
#import url(http://fonts.googleapis.com/css?family=Homenaje);
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;;
color: #666666;
font-size: 14px;
background: url(../img/header.jpg) repeat-x;
margin: 0;
}
/*=============================*/
/*===== Functionality =====*/
/*=============================*/
/*===== Parents =====*/
#navMenu,
#navMenu ul,
#navMenu li {
display: block;
color: black;
font-size: 12px;
}
#navMenu ul {
line-height:30px;
}
#navMenu li {
list-style:none;
float:left;
position:relative;
width: 120px;
height:45px;
}
#navMenu ul li a {
line-height:45px;
display:block;
background-color: #333333;
margin-left: auto;
text-align: left;
color: white;
padding-left: 10px;
}
#navMenu ul li a:hover {
background-color: #03A6CF;
}
/*end Parents*/
/*===== Children =====*/
#navMenu ul ul {
position:absolute;
visibility:hidden;
margin-left: -13px;
}
#navMenu ul li:hover > ul {
visibility:visible;
}
/*end children*/
/*==========================*/
/*===== Prettyness =====*/
/*==========================*/
#navMenu ul li a {
text-decoration:none;
}
What about something like this? http://fiddle.jshell.net/Egg4t/
#navMenu ul,
#navMenu li {
display: block;
font-size: 12px;
margin: 0;
}
#navMenu {
position: relative;
}
#navMenu ul {
line-height:30px;
}
#navMenu li {
list-style:none;
float: left;
padding-right: 20px;
padding-left: 10px;
font-size: 14px;
}
#navMenu li li {
line-height: 25px;
color: #03A6CF;
float: left;
}
#navMenu li li li {
float: none;
display: block;
}
#navMenu ul li a {
display: block;
font-size: 12px;
line-height: 25px;
margin-left: auto;
text-align: left;
}
#navMenu ul ul {
position:absolute;
left: 0;
padding: 0;
width: 500px;
background-color: #333333;
visibility:hidden;
}
#navMenu ul ul ul {
position: static;
display: inline;
}
#navMenu ul li:hover ul {
visibility:visible;
}
<div id="navMenu" class="last-topnav">
<ul>
<li> Menu 1
<ul>
<li> Menu 1 Column 1
<ul>
<li>item 1</li>
<li>item 2</li>
<li> Level 2
<ul>
<li>item 2</li>
<li>item 2</li>
</ul>
</li>
</ul>
</li>
<li> Menu 1 Column 2
<ul>
<li>
item 1
</li>
<li>item 2</li>
<li>item 3<li>
<li>item 4<li>
</ul>
</li>
</ul>
</li>
<li> Menu 2
<ul>
<li> Menu 2 Column 1
<ul>
<li>item 1</li>
<li>item 2</li>
<li> Level 2
<ul>
<li>item 2</li>
<li>item 2</li>
</ul>
</li>
</ul>
</li>
<li> Menu 2 Column 2
<ul>
<li>
item 1
</li>
<li>item 2</li>
<li>item 3<li>
<li>item 4<li>
</ul>
</li>
<li> Column 3
<ul>
<li>
item 1
</li>
<li>item 2</li>
<li>item 3<li>
<li>item 4<li>
</ul>
</li>
</ul>
</li>
</ul>
</div>