I'm trying to figure out with my drop-down list within my nav is not displaying. I
am also trying to understand how to i would render the drop-down list as a class and how it would be specified in the CSS to not get it confused with any of my of unordered lists. Can someone please help and possibly add a class to the dropdown list so i know how to display it?
Here is my code in Jfiddle:
https://jsfiddle.net/CheckLife/rzxxb2kb/4/
In your css you have:
/*Dropdown Nav */
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
position: absolute;
}
The problem here is that you're setting each individual "li" element to display none, so you're hiding each individual list item. If you show/hide the whole unordered list, then your elements will appear. Additionally, you probably want to remove position:absolute so that they stack vertically
/*Dropdown Nav */
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
EDIT:
In order to address the issue of the list pushing all content down, I recommend not using an ul. Instead you could put each a tag in a div and do the following:
HTML:
<li onmouseover="newText()">Players
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
CSS:
.dropdown-content {
display: none;
position: absolute;
// The below was copied from your other css
background-color: #3b63d3;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
}
li:hover .dropdown-content {
display: block;
}
https://jsfiddle.net/rzxxb2kb/5/
Its the position: absolute; on ul li:hover ul li change it to position: relative;
/*Dropdown Nav */
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
position: relative;
}
.clear {
clear: both;
}
W3Schools shows how to create Nav bars with drop down functionality
https://www.w3schools.com/css/css_dropdowns.asp
Related
When user clicks on my drop-down menu, it jumps the page back to the very top (like a page reload).
See this jsFiddle with stripped down code.
I know that if I remove the # in href="#", it should work, but that is not good practice.
How do I make it so it doesn't jump the page to top?
HTML:
<div class="nav">
<ul>
<li>
Drop
<ul class="nav-user nav-li-cont">
<li> Hello
</li>
<li> World
</li>
</ul>
</li>
</ul>
</div>
CSS:
div.nav {
display: inline-block;
margin-left:50px;
}
div.nav ul {
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}
div.nav ul li {
float:left;
}
div.nav ul li a {
text-decoration: none;
}
div.nav ul li ul {
display:none;
}
div.nav ul li:hover ul {
display: list-item;
position: absolute;
}
div.nav ul li:hover ul li {
float:none;
}
div.nav ul li ul li:hover {
float:none;
}
div.nav ul li ul li a {
text-decoration: none;
cursor: pointer;
float:left;
width:100%;
}
.nav-li-cont {
border-radius: 4px;
float: left !important;
padding: 10px !important;
}
That's because there's no js/jquery assigned to that link. And the browser will assume that this is a "link for a new page", and actually if you check the URL of the website, it's propably changed to this after you click on that button (you can't see this on jsfiddle): example.com/currentPage/#.
If you change this line
Drop
to this instead
Drop
it will not jump to the top anymore. The void operator is often used merely to obtain the undefined primitive value (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).
http://jsfiddle.net/3837z3b0/3/
Update
If you have multiple links using href="#" you can either exchange the links as I mentioned above to this href="javascript:void(0)" or you can add a class called noclick for example for every link that has href="#" and add the following:
$(".noClick").attr('href','javascript:void(0)');
http://jsfiddle.net/3837z3b0/4/
I have two small issues in CSS that I am unable to figure out. First is the ability to extend the area of the block on the drop down to fit the wording in properly. And secondly is the sub-menu, sub-menu placement. I have a fiddle setup here: fiddle
The only attribute from what I can tell is
display: inline-block;
This is the first issue: http://screencast.com/t/9GSbhMWe
And the second issue: http://screencast.com/t/TOAKiE5db
Could someone maybe assist if they could. What am I missing?
Thanks in advance.
Add this into your stylesheet. Or you'd better find and edit the related properties directly.
#nav .main-navigation .sub-menu {
background: url(images/background.jpg);
}
#nav .main-navigation .sub-menu li {
display: block;
}
#nav .main-navigation .sub-menu,
#nav .main-navigation .sub-menu li a {
width: auto;
}
#nav .main-navigation .sub-menu li a {
background: none;
}
To fix the 2nd issue, add this.
#nav .main-navigation .sub-menu .page_item_has_sub-menu {
position: relative;
}
I've created a custom theme based on a template and for some reason the CSS drop down menu that appears on every other page when you hover of 'Services' doesn't seem to work on the wordpress page.
I copied and pasted the code I created into the Header.php file along with the same styles.
Anyone have any ideas?
The website can be fond here...
http://www.globalpurchasingsolutions.co.uk/blog/
It should work as it does here...
http://www.globalpurchasingsolutions.co.uk/testimonials.html
Any help on this matter would be very much appreciated.
Here's what the CSS Code Is Like
nav {
margin-top:20px;
text-align:left;
float:right;
margin-right:10px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background:#FFF;
color:#336699;
list-style: none;
position: relative;
display: inline-table;
width:auto;
}
nav ul:after {
content: "";
clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
border-bottom:solid 2px #336699;
}
nav ul li a {
display: block;
padding: 15px 20px 15px 20px;
color: #2B66A2;
font-size:19px;
text-decoration: none;
}
I messed around with Firebug and wasn't able to solve this.
Have you tried using 'master.css' directly in the WordPress theme instead of 'header.css' and 'style.css'?
There are various combinations of things going on, and using different stylesheets will certainly complicate things now and moving forward.
I just tried removing header.css and style.css and replacing it with master.css with Firebug... there were some other issues going on, but the dropdowns started working.
I have this HTML code:
<nav id="menu">
<ul>
<li>
Item1
Item1
</li>
<li>
Item2
Item2
</li>
</ul>
</nav>
Demo page
As you can notice, it's a menu with 2 links for each item. The menu is horizontal, and the aim is to hide the "alt" link when the item is not hovered and to show it when it is hovered.
Each <li> element is therefore a box with a specific height (34px) and each link has a height of 34px as well, so that the "alt" link is below the main link, and is hidden.
When the item is hovered, a negative top margin of 34px is applied to the main link, making the "alt" one appear.
But when "hovering out" the top margin of 0 is not really applied back by Google Chrome as you can notice on the demo page I made. Just hover several times on the links and you will notice that elements are not put back to their correct positions.
How can I solve that? I need to keep 2 links (main and "alt") for more complex reasons, the demo being simplified.
For your information, here is the CSS:
nav#menu {
background-color: #e9e9e9;
}
nav#menu > ul {
margin: 0;
height: 39px;
display: block;
list-style-type: none;
}
nav#menu > ul > li {
display: inline-block;
height: 34px;
overflow: hidden;
width: 200px;
}
nav#menu > ul > li > a {
display: block;
height: 34px;
line-height: 34px;
}
nav#menu > ul > li > a:first-child {
margin-top: 0;
}
nav#menu > ul > li:hover > a:first-child {
margin-top: -34px;
}
nav#menu > ul > li > a.alt {
color: white;
background-color: #8d8d8d;
}
Sorry for all the comments. I was trying to get it to work and just thinking out loud. Here is the solution you are looking for...
You need to change two of the styles.
/* add the overflow: hidden; to the end of this tag set */
nav#menu > ul { .... overflow: hidden; }
/* replace the inline-block with float:left;*/
nav#menu > ul > li { float:left; height: 34px; overflow: hidden; width: 200px; }
Here is the working link jsFiddle
In my website, I am trying to get the rollover effects working.
Currently, on no mouse hover, the ul li item is displayed as text but on mouse hover, it has a rollover effect to show the image.
Instead of having text in the normal mouse non-hover state, I want to have images.
That means, mouse hover and non-mouse hover are both different images, and there's no text
I wanted to ask how do I get such a rollover effect working, in contrast to what I have currently. (non-mouse hover is text which I want to to change to images as well)
Here is the jsfiddle of how I currently have rollovers: http://jsfiddle.net/PF35v/7/
You have all of the images hidden by default so when you put an image inside the a tag, it is also hidden.
ul#nav li a img { display: block; }
This will make the images in links always visible but the others hidden by default. I think that's what you're asking for.
Here's two different approaches, I'm sure there are others:
HTML-Centric
<ul id="nav">
<li>
<a href="#">
<span>My Text</span>
<img src="http://goo.gl/tYsDU"/>
<img class="hover" src="http://goo.gl/UohAz"/>
</a>
</li>
...
</ul>
#nav,
#nav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li a img {
display: inline;
}
#nav li a img.hover,
#nav li a span {
display: none;
}
#nav li a:hover img {
display: none;
}
#nav li a:hover img.hover {
display: inline;
}
http://jsfiddle.net/RdRcj/1
CSS-Centric
<ul id="nav">
<li>
</li>
...
</ul>
#nav,
#nav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 128px;
height: 128px;
background-image: url(http://goo.gl/tYsDU);
}
#nav li a {
display: block;
width: 128px;
height: 128px;
padding: 0;
}
#nav li a:hover {
background-image: url(http://goo.gl/UohAz);
}
http://jsfiddle.net/RdRcj/
The first is probably the "best" from a flexibility standpoint; you don't have to hard-bake the dimensions in like you do the second. However, if they're unchanging, perhaps the second is preferable for your approach, it just takes targeting each li and a specifically, which can prove a little brittle.