I have created a side drop down menu and everything is positioned however every time I go to move my cursor onto the menu it disappears, I have a feeling this is something to do with the :hover I have used but I cannot seem to get it stop disappearing Can anyone help?
my html is :
<div class="navBar">
<ul>
<li class="navText">L1</li>
<li class="navText dropdownTrigger">L2</li>
<ul class="dropdown">
<li>L6</li>
<li>L7</li>
<li>L8</li>
<li>L9</li>
<li>L10</li>
</ul>
<li class="navText">L3</li>
<li class="navText">L4</li>
<li class="navText">L5</li>
</ul>
</div>
my css is :
* {
padding:0px;
margin:0px;
}
body {
background-color:rgba(17,17,17,1);
background-size:cover;
}
.navBar {
position:fixed;
width:70px;
height:100%;
padding-top:100px;
background-color:rgba(255,255,255,0.5);
text-align:center;
}
.navBar > ul > li,
.navBar > ul > li > a {
margin-top:70px;
text-decoration:none;
display:block;
color:black;
font-family:"Constantia";
font-size:30px;
}
.navBar > ul > ul > li,
.navBar > ul > ul > li > a {
display:block;
list-style-type:none;
text-decoration:none;
color:black;
font-family:"Duan Penh";
font-size:24px;
}
.navBar a:hover,
.navBar li:hover {
background-color:rgba(0,0,0,0.5);
color:white;
font-weight:bold;
}
.navBar > ul > ul {
background-color:rgba(255,255,255,0.5);
width:200px;
height:auto;
margin-left:70px;
margin-top:-35px;
position:absolute;
display:none;
}
.dropdownTrigger:hover ~ .dropdown {
display:block;
}
Try this
.dropdownTrigger:hover ~ .dropdown, .dropdown:hover {
display:block;
}
jsFiddle : https://jsfiddle.net/ojf32faz/
Related
I was hoping if you can help me with my little problem. I am just updating one of my developers style sheets. I am a beginner in CSS so I am having difficulties adding the second level submenu in it.
Here's the link DEMO PAGE
This is my HTML
<div id="sidebar"><i class="icon icon-home"> </i>Dashboard<ul style="display: block;">
<li class="active"><i class="icon icon-home"></i> <span>Dashboard</span> </li>
<li> <i class="icon icon-signal"></i> <span>Charts & graphs</span> </li>
<li><i class="icon icon-th"></i> <span>Tables</span></li>
<li><i class="icon icon-fullscreen"></i> <span>Full width</span></li>
<li class="submenu"> <i class="icon icon-th-list"></i> <span>API</span> <span class="label label-important">4</span>
<ul>
<li>
boom
<ul>
</ul>
</li>
<li>% of National Roads Paved</li>
<li>Process</li>
<li>Regional Profiles</li>
</ul>
</li>
</ul>
</div>
and this is my CSS
/* Top user navigation */
#sidebar{ width:100%; background:#252125; position:absolute; clear:both; top:62px;}
#sidebar > ul{ margin:0px; padding:0px; width:100%; display:block; z-index:999;}
/*Border right sidebar */
#sidebar > ul > li { list-style-type:none; float:left; display:block; margin:0px; border-right:1px solid #464652; position:relative; padding:10px; cursor:pointer}
/*Border right */
#sidebar > ul > li a{ padding:12px 0;}
#sidebar > ul > li:hover ul { display:block;}
/*#sidebar > ul > li:hover { background-color:#41bedd;} */
/*On hover menu */
#sidebar > ul > li:hover { background-color:#464652;}
/*On hover menu */
#sidebar > ul > li:hover a{ background:none;}
/*Modules color */
#sidebar > ul li ul { margin:0px; padding:0px; display:none; z-index:999; position:absolute; left:0px; top:40px; background:#464652; min-width:200px;}
/*Modules color */
#sidebar > ul li ul li { list-style-type:none; margin:0px; font-size:12px;line-height:30px; }
#sidebar > ul li ul li a { display:block; padding:5px 10px; color:#fff; text-decoration:none; font-weight:bold; }
/*Modules color on hover */
#sidebar > ul li ul li:hover a{ background-color:#5A5A69;}
/*Modules color on hover*/
#sidebar > ul li span { cursor:pointer; margin:0px 2px 0 5px; font-weight:bold; color:#fff; font-size:11px; }
#sidebar > ul li a i{ background-image: url("../img/glyphicons-halflings-white.png"); margin-top:4px; vertical-align: top;}
I know this post has been posted from different threads. I really cant understand them. Hope you understand. Thanks in advance.
First of all, in your sample HTML, you don't have any lis in your tertiary level. Put some in there.
As for your CSS, it's presently set up to handle the showing and hiding of UL's below the top level one on hover. We need to get more specific so that it excludes the 3rd level--as well as then get more specific to and add a second level hover style.
Where you have this:
#sidebar > ul > li:hover ul { display:block;}
Change it to this:
#sidebar > ul > li:hover > ul { display:block;}
The first will show ALL child ULs of the LI on hover. The latter will show only the direct child of the LI on hover.
Now we need to add a trigger for the 3rd level:
#sidebar > ul > li > ul > li:hover > ul { display:block; top: 0; left: 200px}
While we're at it, we included a new set of positioning so that it appears to the right of the current hover rather than below (which would cover up the second level navigation.
Working example: http://jsfiddle.net/wS9t3/
(Hopefully) quick question:
I have an unordered list set to display:table and li set to display:table cell, as I want the list to take up entire width of container div regardless of how many list items there are. The problem is I want a nested drop-down list to have a block display, so the items are under each other. I've done the drop-down before by setting parent list to Block, floating left, then setting the nested list to float:none.
I've tried a few things to set the nested list from table to block, but it's not doing it for me!
And I missing something simple, or is this going to work the way I want?
Here's the HTML
<div id = "headernavcontainer">
<div id = "headernav">
<ul id = "mainnav">
<li><a class = "mainnav" href="index.html">Home</a></li>
<li><a class = "mainnav" href="#">Company</a>
<ul>
<li><a class = "subnav" href="index.html">About Us</a></li>
<li><a class = "subnav" href="#">Location</a></li>
<li><a class = "subnav" href="#">Services</a></li>
</ul>
</li>
<li><a class = "mainnav" href="#">Employment</a></li>
<li><a class = "mainnav" href="#">Gallery</a></li>
<li><a class = "mainnav" href="#">Contact Us</a></li>
</ul>
</div>
</div>
And here's the CSS:
#headernavcontainer
{
width:100%;
height:50px;
background-color:gray;
margin:0;
padding:0;
}
#headernav
{
position:relative;
margin:0 auto;
padding:0;
width:960px;
background-color:gray;
}
#mainnav
{
list-style:none;
//float:left;
width:100%;
position:relative;
margin:0 auto;
padding:0;
display:table;
font-family:Century Gothic, sans-serif;
font-weight:bold;
font-size: .8em;
}
#mainnav li
{
//float:left;
margin:0;
padding:0;
position:relative;
line-height:50px;
margin-right:0;
display:table-cell;
border-right:1px #000 solid;
}
#mainnav li:nth-child(10)
{
border-right:none;
}
#mainnav a.mainnav
{
display:block;
color:#000;
background:#333;
text-decoration:none;
text-align:center;
//vertical-align:middle;
}
#mainnav a:hover
{
color:#fff;
background:red;
}
#mainnav ul
{
display:block !important;
//overflow:hidden;
background:#fff;
list-style:none;
position:absolute;
left:-9999px;
//vertical-align:middle;
background:green;
}
#mainanv ul li
{
//float:none;
//display:block;
display:block !important;
}
#mainnav li:hover ul
{
left:0;
//display:block;
}
And here's a jfiddle to help illustrate what I'm up to! http://jsfiddle.net/cEw5k/
Thanks.
Jsfiddle: http://jsfiddle.net/cEw5k/1/
CSS:
#mainnav li:hover ul
{
left:0;
width:100%;
display:block;
padding-left:0;
}
#mainnav li ul li {
display:block;
}
#mainnav li ul li a {
display:block;
width:95%;
padding-left:10px;
}
I'm looking for some advice on this issue.
I went through a tutorial a while back to build a CSS drop down menu and can't seem to change the default color of the sub menus – it always matches the default red color for the a tag.
I've been messing around with this for a while now and can't seem to find a solution. Can someone help me out with this please?
Here is the html:
<nav>
<ul>
<li><a class="selected" href="index.html">Home</a></li>
<li>Clothing</li>
<li>Gear</li>
<li>Brand
<ul>
<li>XXXXXX</li>
<li>XXXXXX</li>
</ul>
</li>
<li>Fighters
<ul>
<li>XXXXXX</li>
<li>XXXXXX</li>
</ul>
</li>
<li>My Account</li>
</ul>
</nav>
And here is the CSS:
nav {
position:relative;
float:right;
font-size:14px;
margin-top:35px;
font-weight:bold;
padding-right:178px;
z-index:4;
}
nav ul ul {
display:none; /* hide sub menus */
}
nav ul li:hover > ul {
display:block; /* show sub menus on hover */
}
nav ul {
float:right;
font-size:14px;
margin-top:-3px;
text-transform:uppercase;
list-style:none;
position:relative; /* position sub menu according to nav */
display:inline-table; /* condense with of sub menu to fit */
}
nav ul:after {
content:"";
clear:both;
display:block; /* clear floats on other list items */
}
nav ul li {
float:left;
}
nav ul li:hover a {
color:#ee1f3b;
text-decoration:none;
-webkit-transition-property:color;
-webkit-transition-duration:0.2s, 0.2s;
-webkit-transition-timing-function:linear, ease-in;
-moz-transition-property:color;
-moz-transition-duration:0.2s, 0.2s;
-moz-transition-timing-function:linear, ease-in;
}
nav ul li a {
padding:4px 11px;
text-decoration:none;
color:#000000;
display:block;
text-decoration:none;
}
nav ul ul {
background:#cacaca;
position:absolute;
top:25px; /* sub position */
}
nav ul ul li {
float:none;
border-bottom:1px solid rgba(0, 0, 0, 0.2);
position:relative;
}
nav ul ul li:last-child {
border-bottom:1px solid rgba(0, 0, 0, 0.2);
}
.selected {
color:#ee1f3b;
}
nav ul ul li a:hover {
color:#000000;
}
Thanks for your time.
From the above code for changing the color of submenus, you have not targeted the child elements of the main menus. For that you need to target them and add new rules to specifically target that element and change the color. Here is the solution.
On hover of the items with submenus, the color change for instance here green color on display of the submenus.
nav ul li:hover ul li a{color:green;}
On hover of the submenus, change of color from green to yellow for instance.
nav ul li:hover ul li a:hover{color:yellow;}
To elaborate this,
The HTML:
<nav>
<ul>
<li><a class="selected" href="index.html">Home</a></li>
<li>Clothing</li>
<li>Gear</li>
<li>Brand
<ul>
<li>XXXXXX</li>
<li>XXXXXX</li>
</ul>
</li>
<li>Fighters
<ul>
<li>XXXXXX</li>
<li>XXXXXX</li>
</ul>
</li>
<li>My Account</li>
</ul>
</nav>
The CSS:
nav {
position:relative;
float:right;
font-size:14px;
margin-top:35px;
font-weight:bold;
padding-right:178px;
z-index:4;
}
nav ul ul {
display:none; /* hide sub menus */
}
nav ul li:hover > ul {
display:block; /* show sub menus on hover */
}
nav ul {
float:right;
font-size:14px;
margin-top:-3px;
text-transform:uppercase;
list-style:none;
position:relative; /* position sub menu according to nav */
display:inline-table; /* condense with of sub menu to fit */
}
nav ul:after {
content:"";
clear:both;
display:block; /* clear floats on other list items */
}
nav ul li {
float:left;
}
nav ul li:hover a {
color:#ee1f3b;
text-decoration:none;
-webkit-transition-property:color;
-webkit-transition-duration:0.2s, 0.2s;
-webkit-transition-timing-function:linear, ease-in;
-moz-transition-property:color;
-moz-transition-duration:0.2s, 0.2s;
-moz-transition-timing-function:linear, ease-in;
}
nav ul li a {
padding:4px 11px;
text-decoration:none;
color:#000000;
display:block;
text-decoration:none;
}
nav ul ul {
background:#cacaca;
position:absolute;
top:25px; /* sub position */
}
nav ul ul li {
float:none;
border-bottom:1px solid rgba(0, 0, 0, 0.2);
position:relative;
}
nav ul ul li:last-child {
border-bottom:1px solid rgba(0, 0, 0, 0.2);
}
.selected {
color:#ee1f3b;
}
nav ul ul li a:hover {
color:#000000;
}
nav ul li:hover ul li a{color:green;}
nav ul li:hover ul li a:hover{color:yellow;}
Hope this helps.
Another method is to give the ul a id in the submenu something like this
<li>Brand
<ul id="submenu">
<li>AAAAAA</li>
<li>BBBBBB</li>
</ul>
</li>
CSS
#submenu li a
{
color:green;
}
See the full Jsfiddle here
I'm trying to make a horizontal menu layout in CSS. I was using the guide listed here:
http://www.devinrolsen.com/pure-css-horizontal-menu/
I've got a css file looking like this, called navigation.css:
.navigation{
width:100%;
height:30px;
background-color:lightgray;
}
.navigation ul {
margin:0px;
padding:0px;
}
.navigation ul li {
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
}
.navigation li a {
color:black;
text-decoration:none;
}
.navigation li a:hover {
color:black;
text-decoration:underline;
}
.navigation li ul {
margin:0px;
padding:0px;
display:none;
}
.navigation li:hover ul {
display:block;
width:160px;
}
.navigation li li{
list-style:none;
display:block;
}
and in my actual php page, I have this
<div class="navigation">
<ul>
<li>
something
<ul>
<li>Hello</li>
<li>hello2</li>
</ul>
</li>
<li>
Browse database
<ul>
<li>test</li>
<li>Test2</li>
<li>Search</li>
</ul>
</li>
</ul>
</div>
For reasons I cannot determine, their is no drop-down menu effect. Consequently, if I change navigation to an id instead of a class by replacing .navigation with #navigation, then none of the layout affects the HTML.
In case you're still having the problem, have you tried changing:
.navigation li li{
list-style:none;
display:block;
}
To:
.navigation li li{
list-style:none;
display:none;
}
.navigation li:hover li{
display:block;
}
Maybe somebody has seen this before? When you hover over the "First List" and "Second List" text, the text pops a couple pixels to the left. This only happens in Webkit browsers. Tested in Chrome on Linux and Mac, Safari on Mac, and Android browser. Here's the code. I also made a fiddle: http://jsfiddle.net/XzVLt
#navigation {
line-height:30px;
height:30px;
clear:left;
text-align:left;
position:relative;
}
#navigation li {
padding:0 5px;
margin-left:-1px;
width:100px;
text-align:center;
float:left;
display:inline;
}
#navigation ul ul {
display:block;
position:absolute;
}
#navigation li ul {
margin-left:-5px;
padding-right:10px;
}
#navigation li ul li {
margin-right:-2px;
text-align:left;
line-height:15px;
padding:5px;
clear:both;
width:100%;
}
#navigation ul li {
list-style:none;
}
#navigation ul li {
float:left;
list-style:none;
}
#navigation li ul {
display:none;
}
#navigation li:hover ul {
display:block;
}
#navigation a {
font-size: 0.8em;
}
#navigation li li a {
display:block;
margin-left:10px;
text-indent:-10px;
}
<div id="navigation">
<ul>
<li>
First list
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li>
Second list
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</div>
I'm guessing that it has something to do with your margins and padding that comes into play as soon as you change the drop-down from display:none to display:block
I use the suckerfish method for drop-downs; you can easily implement this in your method as well. Just change how you phase in the drop-down content as follows:
Replace ...
#navigation li ul {
display:none;
}
#navigation li:hover ul {
display:block;
}
... with ...
#navigation li ul {
position:absolute;
left:-999em;
}
#navigation li:hover ul {
left:auto;
}
Quick tests in Firefox and Safari - it works just fine ... you'll need some JS to create an element to replace the li:hover pseudo or it won't work in IE.
Read more about the method here http://htmldog.com/articles/suckerfish/dropdowns/