On http://www.elitedeafpoker.com/dev/index.html on the navbar there is a little gray indicator icon underneath "PLAYERS" when I hover the (class) sub-menu area and it will not display the white indicator icon. http://www.elitedeafpoker.com/dev/img/indicator-hover.png is an image showing two icons in one image (you cannot see the white icon there).
CSS
.nav-collapse_ .nav > li.sub-menu:after {
position: absolute;
top: 100px;
left: 50%;
display: block;
margin-left: -4px;
width: 8px;
height: 3px;
background: url(../img/indicator-hover.png) 0 0;
content: '';
}
.nav-collapse_ .nav > li.sub-menu:hover {
background: url(../img/indicator-hover.png) 0 -10px;
}
HTML
<div class="nav-collapse nav-collapse_ collapse">
<ul class="nav sf-menu clearfix">
<li class="sub-menu">PLAYERS
<ul>
<li>EDPS PLAYERS</li>
<li>PLAYERS OF THE MONTH</li>
<li>PLAYERS OF THE YEAR</li>
</ul>
</li>
<li>SHOP</li>
<li>NEWS & EVENTS</li>
<li>FOUNDERS</li>
<li>CONTACT US</li>
</ul>
</div>
I believe your
.nav-collapse_ .nav > li.sub-menu:hover
Should be changed to
.nav-collapse_ .nav > li.sub-menu:hover:after
to fix this issue
Related
I'm a beginner in web developing, when I hover my mouse to the list of my menus the dropdown menu keeps on showing in every menu. What seems to be the problem?
I tried removing the so I can use "ul li ul li" directly in css but it doesn't work and also when I try ".site-header nav ul li:hover .sub-menu-about" there is no output but ".site-header nav ul:hover .sub-menu-about" I've got the same problem even when I use ".site-header ul:hover .sub-menu-about" still the same problem.
Here is my CSS code
.sub-menu-about{
display: none;
}
.site-header ul:hover .sub-menu-about {
display: block;
margin-top: 15px;
margin-left: -15px;
position: absolute;
}
.main-navigation ul:hover .sub-menu-about ul{
display: block;
margin: 10px;
}
and this is my html code
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li>Home</li>
<li>About</li>
<div class="sub-menu-about">
<ul>
<li><a href="#">History</li>
<li><a href="#">Vision</li>
<li><a href="#">Mission</li>
</ul>
</div>
<li>News</li>
<li>Events</li>
</ul>
</nav>
</div>
Once I hover on the about menu, a dropdown list of History, Mission, Vision will be shown. and when I hover on different menus there will be no dropdown menu will be shown
Error No. 1: The submenu should be located inside the <li> tag. Corrected
Error No. 2:
First, you hide the class .sub-menu-about through displays: none, and then you try to show not this class itself, but a list inside it. Corrected
Result
.sub-menu-about {
display: none;
}
.site-header ul:hover .sub-menu-about {
display: block;
margin-top: 15px;
margin-left: -15px;
position: absolute;
}
.main-navigation li:hover .sub-menu-about {
display: block;
margin: 10px;
}
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li>Home</li>
<li>About
<div class="sub-menu-about">
<ul>
<li><a href="#">History</li>
<li><a href="#">Vision</li>
<li><a href="#">Mission</li>
</ul>
</div>
</li>
<li>News</li>
<li>Events</li>
</ul>
</nav>
</div>
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!
The problem I have is when I go to the navigation menu and have the menu come down, instead of being one item per line it goes across the screen from left to right
I get [Item 1] [Item 2] [Item 3] instead of:
[Item 1]
[Item 2]
[Item 3]
I think it has something to do with the navigation bar with my drop down menu (or lack thereof) want to leave. Any suggestions?
#navbar {
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
width: 100%;
}
.nav {
width: 1800px;
height: 70px;
margin: auto;
position: absolute;
left: 0px;
top: 0px;
background-color: #DD0205;
}
.margin {
margin: 0;
display: inline-block;
}
#searchbox {
padding 5px;
font-size: 1em;
line-height: 100px;
}
#magnify-search {
text-indent: -99999px;
width: 25px;
height: 25px;
display: block;
background: transparent url(magnify.jpg) 0 0 no-repeat;
}
ul.cssMenu,
ul.cssMenu ul {
list-style: none;
margin: 1;
padding: 0;
position: relative;
}
ul.cssMenu ul {
display: none;
;
/*initially menu item is hidden*/
position: absolute;
}
/* Hover effect for menu*/
ul.cssMenu li:hover > ul {
display: block;
}
li {
display: inline;
}
<input type="search" id="searchbox" value placeholder="Search">
<div class="margin">
<input type="button" id="magnify-search" />
</div>
<ul class="cssMenu">
<li class="Eco-Fashion">
<b>Eco-Fashion</b>
<ul>
<li>Tops
</li>
<li>Bottoms
</li>
<li>Outwear
</li>
<li>Shoes
</li>
<li>Jewelry
</li>
</ul>
</li>
<li>    </li>
<li class="GreenBeauty">
<b>Green Beauty</b>
<ul>
<li>Soy Makeup
</li>
<li>Soy Blush
</li>
<li>Soy
</li>
</ul>
</li>
<li>    </li>
<li class="GreenLifestyle">
<b>Green Lifestyle</b>
<ul>
<li>Leaf Pants
</li>
<li>Coconut Bra
</li>
<li>Wilson Volleyball
</li>
</ul>
</li>
<li>    </li>
<li class="Sale">
<b>Sale</b>
</li>
</ul>
</div>
</div>
What happened?
You have specified <li> to display as inline elements. This rule force all <li> elements to behave like a normal text. It means that it will appear in one line and will have white spaces between element (like between words in a paragraph).
Where is that piece of code?
You have CSS rule that looks like this
li {
display: inline;
}
in a very bottom of your code snippet.
What to do?
If you want them to be under each other use display: block instead.
Anything else?
Yes. Your menu have very strange behavior and I'd recommend you to take a look at jQuery Accordion
I may seem really silly or outright wrong in the way I code. However, when I create a drop down menu in CSS the new li elements get pushed to the other side of the page and not in the container box. How would I fix this?
Here is the code:
<nav>
<div class="wrapper">
<div class="brand">
<img class="UKLogo" src="images/logo.png" alt="">
</div> <!-- brand -->
<div class="navigation">
<ul class="nav-ul">
<li> HOME </li>
<li> ABOUT </li>
<a href="#">
<li class="course-li">
COURSES
<ul class="drop-down">
<li class="list-item"> Driver CPC </li>
<li> First Aid </li>
<li> Other </li>
</ul>
</li>
<li> CONTACT </li>
<!-- <li> TESTOMONIALS </li> -->
<!-- <li> FAQs </li> -->
</ul>
</div> <!-- Navigation -->
</div> <!-- Wrapper -->
</nav>
nav {
margin: 0px;
padding: 0px;
height: 75px;
background-color: #FFF;
}
.brand {
margin: auto;
width: 960px;
}
.company-name {
padding: 0px;
margin: 0px;
}
.UKLogo {
padding: 0px;
margin: 0px;
position: relative;
top: 11px;
}
.navigation ul li {
display: inline-block;
margin: 10px;
position: relative;
left: 380px;
top: -46px;
}
.navigation ul a {
color: black;
margin-left: 40px;
text-decoration: none;
font-family: Lato;
font-weight: 300;
}
.navigation ul a:hover {
color: #169ec5;
font-weight: 300;
}
.course-li:hover .drop-down {
left: 0px;
}
.drop-down {
position: absolute;
left: -5px;
z-index: 1;
background-color: white;
left: -9999px;
}
Thank you ever so much for looking and helping. Always open to criticism whether its the way I code or anything else.
Here is a JSFiddle https://jsfiddle.net/vj41qLts/
Many Thanks!
You need to declare a position in the parent, for the child to reside in. An element with position: absolute; will position itself to the first parent with position: relative;. If there is no parent with position: relative;, it will use the browser window instead.
See fix example here: https://jsfiddle.net/vj41qLts/1/
I think there are two thing you need to change:
ul li will select everything li in the navigation even the dropdown, ul>li will only select the immediate child, instead of running down the nested elements.
you need to add position:relative; in your dropdown's parent.
One of the first issues I see is the fact that your markup for your main links isn't setup correctly. Following a structure more link the below should give make it work the way you want it to:
<nav>
<ul>
<li><a href="#">Home<a></li>
<li><a href="#">About<a></li>
<li>
<a href="#">Courses<a>
<div>
<ul>
<li>A link</li>
<li>A link</li>
</ul>
</div>
</li>
</ul>
</nav>
Then use CSS or JS to control showing and hiding the dropdown of links.
I'm trying to build a drop-down menu using CSS, and I've successfully hidden the drop down menu, but haven't been able to make it reappear. I'm pretty sure that the problem is with the :hover tag, which I've taken out of the css here because I haven't been able to make it work. Help with the CSS? PLEASE? Desperate.
HTML Code:
<div id="navigation">
<ul id="menu">
<li class="menu">Home</li>
<li class="menu">About Us</li>
<ul class="sub_menu">
<li>Our Mission Statement</li>
<li>How Funds Are Spent</li>
<ul class="sub_sub_menu">
The Founders
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</ul>
<li class="menu">What We Do</li>
<ul class="sub_menu">
<li>T-Shirt Designs</li>
<li>Future Design Ideas</li>
<ul class="sub_sub_menu">
Fact Sheets
<li>How Our Fact Sheets Work</li>
<li>Fact Sheet 1</li>
</ul>
</ul>
<li class="menu">Media</li>
<li class="menu">Contact Us</li>
</ul>
</div>
CSS is as follows:
ul {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 0px;
padding-bottom: 0px;
}
li.menu {
display: inline
}
a:link, a:visited {
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
background-color: #B4B7BD;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 20px;
padding-left: 20px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #B4B7BD
}
ul.sub_menu li {
position: relative;
display: none;
width: 100%;
}
ul.sub_sub_menu {
position: relative;
display: none;
}
ul.sub_sub_menu li {
position: relative;
display: none;
width: 100%;
left: 100%;
}
HTML issues
First of all
<ul class="sub_sub_menu">The Founders
It's illegal to have text inside an unordered list tag, if this is meant to the the title of the list, then the title needs to be the text/link in the list item that the unordered list is nested inside of.
Also, you've done this several times:
<li class="menu">About Us</li>
<ul class="sub_menu">
<li>Our Mission Statement</li>
<li>How Funds Are Spent</li>
</ul>
where your code needs to be:
<li class="menu">About Us
<ul class="sub_menu">
<li>Our Mission Statement</li>
<li>How Funds Are Spent</li>
</ul>
</li>
You can see, the unordered list is nested properly in the second example, however in the first on it's not, causing you issues.
Those are the HTML problems I think, now to the css.
CSS issues
You should only have to add code to your css to make that work, here is an example of how to make the first submenu show up when you rollover a menu item.
li.menu:hover ul li {
display: block;
}
Just repeat that for the various sub & sub-sub menues you have.
The last thing is your use of selectors is a little sketchy, if you have ".sub_menu" as a class, then you don't need to prefix it with the element type unless multiple types of elements with the class and you want to select a single one, which is something I can't see you doing with your site, so instead of:
li.menu
ul.sub_menu
ul.sub_sub_menu
just use the class as a selector:
.menu
.sub_menu
.sub_sub_menu
This practice is faster for rendering in modern browsers, and clearer to read in many ways.
And there you go! it should all work nicely now.