I have created a drop down menu however i have an issue with some of the sub menu items inheriting the CSS of the parent menu item.
In particualr, the sub menu items are inheriting the blue border of the parent, and the light blue background colour when hovering over the sub menu item.
I have added a red border, and can see that, but the blue still appears, also, i have added a 'red' hover class but this is not being triggered.
Here is my fiddle: http://jsfiddle.net/oampz/W2zrn/
HTML:
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<ul id="main-nav">
<li class="menu-nav--home">
</li>
<li id="nav-dropdown" class="drop-down"> <a>Link 1</a>
<ul class="visuallyhidden">
<li>
Link Two Sub One
</li>
<li>
Link Two Sub Two
</li>
<li>
Link Two Sub Three
</li>
</ul>
</li>
<li><a>Link 2</a>
</li>
</ul>
</ul>
</nav>
To remove the sub menu items inhering the blue border of the parent, change this
.menu-nav li li a, .menu-nav a {
border-right: 1px solid #0d63ba;
}
to
.menu-nav > li a {
border-right: 1px solid #0d63ba;
}
What this does is apply the blue border only to the anchor tags of the immediate child elements(li items) of the ul menu-nav.
For the red background hover to happen change this
.drop-down ul li:hover {
background-color: red;
}
to
.drop-down ul li:hover a {
background-color: red;
}
check out this i have updated your fiddle
http://jsfiddle.net/W2zrn/5/
added small code
#nav-dropdown li a {
border: medium none;
padding: 0 0 0 10%;
width:100%;
}
#nav-dropdown li {
width: 100%;
border: none;
}
Related
Could you tell me how to bring menu's black background in front of the body text on the image below.
Here is JSFiddle link:
https://jsfiddle.net/johnking/j58cubux/6/
When you scroll down, the menu is not properly visible
<body>
<div class="uppersection">
<div class="menu" id="home">
<ul>
<li>
Home
</li>
<li class="drop">
About
<ul class="haha">
<li>Who am I?</li>
<li>Accomplishments</li>
<li>Academic Work</li>
<li>Future Plans</li>
</ul>
</li>
<li>
Resume
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<div class=textupper>Hello, I am John <br><br>Welcome To My Website!<br> <br>Feel Free To Navigate Around</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Hi</body>
How can I fix the problem using css?
Thanks.
You need to add background for a too in case if parent li is hovered:
.menu ul li:hover a {
background-color: #00AFF0;
}
Demo: https://jsfiddle.net/j58cubux/7/
Or better solution is to set a background color to transparent by default:
.menu ul li a {
text-decoration: none;
color: white;
font-size: 21px;
text-align: center;
font-family: Segoe UI Local;
background-color: transparent; /* make it transparent */
}
Demo: https://jsfiddle.net/j58cubux/8/
Your menu a has a black background that is showing up above the blue background of the li.
Just remove that black background (remove this line):
background-color: black;
from your .menu ul li a definition.
JSFiddle: https://jsfiddle.net/j58cubux/10/
use the property "z-index: 1000;" in ".menu". So fix the menu at the top regardless of the scrolling content.
.menu {
background-color: black;
min-height: 77px;
width: 100%;
position: fixed;
z-index: 1000;
}
See you later!
I created the drop-down menu by using CSS and HTML.
I just can't figure out what am I making wrong. When I hover the mouse over the Social it doesn’t pop-up me the drop-down menu.
Entire fiddle here
Js Fidle Example
A part of code where I think its mistake.
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul{
display : block;
}
#nav ul ul {
display: none;
position : absolute ;
background-color: #333;
border: 5px solid #222;
border-top : 0;
margin-left: -5px;
}
youo have <li> Social</li> and it should be
<li> Social
<ul>
<li> Facebook</li>
<li> Twitter </li>
<li> Youtube </li>
</ul>
</li>
JSFIDDLE
You need to put the sub UL inside the li
<li> Social
<ul>
<li> Facebook</li>
<li> Twitter </li>
<li> Youtube </li>
</ul>
</li>
See fidde: http://jsfiddle.net/2j55uthz/1/
The reason is because in your CSS this line:
#nav ul li:hover ul {
display: block
}
Is target the UL element inside of the hovered li
The <ul> containing facebook, youtube, twitter needs to be within the social <li>. It works with that change.
my Menu is something like this:
<section class="top-bar-section">
<ul class="left">
<li class="menu-item menu-item-main-menu menu-item-cine-suntem has-dropdown not-click" id="menu-item-60">TopLevel Menu
<ul class="dropdown">
<li class="menu-item menu-item-main-menu menu-item-misiuneviziune" id="menu-item-66">SubLevel Menu</li>
</ul>
</ul>
And the CSS that ads a black arrow when I hover over the TopLevel Menu
.top-bar-section .has-dropdown > a:hover:after{
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: #000 transparent transparent transparent;
border-top-style: solid;
margin-top: 22px;
z-index:999;
}
How do I get that arrow to stay visible, when I hover the child element of that menu item, because now as soon as I start hovering the child, the arrow from the parent item disappears.
Use the hover for list-item i.e li:hover to achieve what you are looking for, as that will select the parent to have the hover that is visible on hover only for the child elements.
PS: Your above markup as provided is jagged and not correct. You need to correct it for the code to work properly.
Change
.top-bar-section .has-dropdown > a:hover:after{...}
.top-bar-section li a:hover, .top-bar-section .dropdown li a:hover{background:#c1212e;}
to
.top-bar-section .has-dropdown:hover > a:after {...}
.top-bar-section li:hover a, .top-bar-section .dropdown li:hover a{background:#c1212e;}
Note:
Closing tags are missing in your HTML markup. Which is a bad practice.
DEMO here.
I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. Usually I am just copy paste existing code and try to make some adjustments to what I want. Anyway I am working on a navigation menu on a one-page website. So till now that works. However, I want to have a sub-menu. I tried some things, but I cannot really get what I want. What I want is when I click on a menu item, the sub-menu opens and activate the first sub-menu item.
I found an example: http://inthe7heaven.com/fb-john-doe/dark/
The photo section. I tried to replicate that, but I think the sub-menu is connected to the filtering function of the photogallery.
Can anybody give me some guidance in this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services</li>
<li class="photos">
Photos
<div id="filter" class="category_filter_list">
<span class="active_link" id="all">All</span>
<span id="cookies">Cookies</span>
<span id="bread">Bread</span>
<span id="baking">Baking</span>
</div>
</li>
<li class="">Classes</li>
<!--<li class="">Testimonials</li>-->
<li class="">Contact</li>
</ul>
</nav>
CSS
nav {
position: absolute;
z-index: 999;
right: 0;
top: 0;
width: 158px;
height: 600px;
display: block;
overflow: hidden;
behavior: url(js/PIE.htc);
}
nav.on_caption {
background: rgba(20,11,19,.6);
-pie-background: rgba(20,11,19,.6);
}
nav.on_caption a {
color: #d0ced0;
}
nav.off_caption {
background: rgba(20,11,19,.08);
-pie-background: rgba(20,11,19,.08);
}
nav.off_caption a {
color: #524b51;
}
nav a {
font-size: 1.143em;
text-transform: uppercase;
}
nav > a {
padding-left: 24px;
}
ul.pagination {
margin: 0;
padding: 0;
padding-bottom: 8px;
list-style:none;
}
ul.pagination li {
margin: 0px 0px 0px 0px;
clear: both;
padding: 8px 10px 0px 24px;
list-style: none;
}
ul.pagination li:first-child {
padding-top: 25px;
}
nav > a:hover,
nav ul.pagination li a:hover,
nav ul.pagination li.current a {
color: #90705B;
}
So I got this code based on the website I provided above. I want the same effect as in the photo section only then for a normal menu item that is not connected to a filter. That is, when the menu item is clicked, the menu gets extended with the sub-menu and the page goes to the first item in the sub-menu. In addition, the sub-menu item gets active.
I managed to get the sub-menu expand and collapse in jsfiddle using a tree-menu. I tested it in jsfiddle and there it works. However, it doesn't work in my website. The menu doesn't expand. The website I am using it in is a single page website. So the menu items are pointing to a section on the page. So, I guess that my href="sub-1" is not working because it's pointing at the 3rd section of the page.
Is there a simple work-around for this? I don't need any fancy jquery effects, it just needs to open.
Furthermore, when the parent item is clicked, the sub-menu needs to expand and needs to activate the first sub-item. How can I do this?
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
.pagination > li ul:target {
display: block;
}
Made some progress.
HTML
<nav class="on_caption">
<ul class="pagination">
<li class="home current">Home</li>
<li class="">About EJ</li>
<li class="">Services
<ul id="sub-1">
<li class="">Test</li>
<li class="">Test</li>
</ul>
</li>
<li class="">Photos</li>
<li class="">Classes</li>
<li class="">Contact</li>
</ul>
</nav>
CSS
.pagination > li ul {
display: none;
}
jQuery
jQuery(
function($)
{
$('.pagination a').click(function(){$(this).next('ul').toggle();});
}
);
This works now. When I click the menu item, the sub-menu gets expended. However, how do I let the sub-menu collapse again when another menu item is clicked? And how do I let the page automatically go to the first sub-menu item by default when the menu item is clicked?
I had in my mind that it would not be hard to add an anchor tag that, when hovered or clicked, would cause a CSS flyout with more links in it to appear.
As it is now, a set of normal anchor tags are inside of a span which is inside of an li. I want to add this hover flyout link to be in the same location, the same as one of the links but instead of being a normal link, do the flyout. I found all kinds of code online but none of it seems to work in this location:
<li>
Introduction to Something
<span>
<a target="_blank" href="http://http...file.html">Watch Slideshow</a>
View File
<a target="_blank" href="http://file....pdf">Print</a>
FLY OUT MENU ITEM
</span>
</li>
I've posted a demo, that's not hugely different to #jeffkee's answer, over at jsbin, to show how deep it's possible to go with flyout menus and how simple they can be.
The (x)html is copied below (with notes):
<ul>
<li>home</li>
<li>products
<ul>
<li>CPUs
<ul>
<li><a href="#">AMD<a>
<ul>
<li>AM2</li>
<li>AM3</li>
</ul>
</li>
<li>Intel</li>
</ul>
</li>
<li>Motherboards</li>
<li>PSUs</li>
<li>Hard drives
<ul>
<li>HDD</li>
<li>SSD</li>
</ul>
</li>
</ul>
</li>
<li>Tracking</li>
</ul>
The CSS is as below:
ul {list-style-type: none; width: 8em; border: 1px solid #000; padding: 0;}
/* just to set the base-line for the ul, but note the width. It's important. */
ul li {position: relative; border-top: 1px solid #000; margin: 0; padding: 0; }
/* the position: relative is used to allow its child elements to be absolutely positioned */
ul li:first-child {border-top: 0 none transparent; }
/* to avoid a two-pixel border on the first li (1px li-border + 1px ul-border) */
ul li:hover {background-color: #f90; }
/* just to aid visually */
ul ul {position: absolute; top: -1px; left: 8em; display: none; }
/* sets up all ul elements beneath the parent ul, the -px is to counter the movement forced by the border, bear in mind that the li:first-child doesn't *have* a border, so adjust to taste */
ul > li:hover > ul {display: block; }
/* makes the nested list appear if the parent-li is hovered */
I don't really see how the fly out is structured. Flyouts are generally set within a link so that when the mother link is hovered, the child shows up..
Check out the most recent flyout menu I did on http://www.feelfabulous.ca/oldindex.php and break down the HTML/CSS. You can do it without any javascript etc. Here's hte HTML structure I have (simplified):
<ul id="menu">
<li>Home</li>
<li>About
<div class="submenu_container">
<ul>
<li>our story</li>
<li>meet our team</li>
<!--<li>press</li>-->
</ul>
</div>
</li>
<li>Spa Menu</li>
<li>Party Packages</li>
<li>Beauty Kits</li>
<li>Goody Bags</li>
</ul>
So .submenu_container is set to display:none, and then #menu li:hover .submenu_container is set to display:block. that's the basic idea of a flyout tyep fo menu. And of course the .submenu_container is absolute positioned so it doesn't affect the shape and form of the page when it pops up.