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;
}
Related
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
So, I've tried to implement a two column menu into my wordpress, using this CSS code which I’ve found on the internet:
.sub-menu-columns .sub-menu{
display:inline-block;
width:500px !important;
background-color:#FFFFFF;
}
.sub-menu-columns .sub-menu li{
width:50% !important;
}
.sub-menu-columns .sub-menu li a:hover{
color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
float:right;
border-left:2px;
border-color: #404040;
}
I added .sub-menu-columns as a CSS class for the top-level-menu “Products” at which only!! the two column sub menu should be seen.
I managed to get this to work. Now is the problem, since the menu is bigger in width, that I need to move the sub-menu container to the left. I also managed to solve this issue with this code:
#mainnav ul li ul{
left:-400px;
}
Now is the only thing, that all other Menus with submenus are moved to the left too (as you can see with “Contact/Support”)
My logical approach would be to edit the previous code to:
#mainnav .sub-menu-columns .sub-menu ul li ul{
left:-400px;
}
In addition, adding border-left doesnt bring any border up.
Here is how it looks like:
And this is how it should look like:
My current custom CSS script for the menu (with double colums, moving to the left and the Bootstrap Arrow-up back to the righ which is the ::before):
.sub-menu-columns .sub-menu{
display:inline-block;
width:500px !important;
background-color:#FFFFFF;
}
.sub-menu-columns .sub-menu li{
width:50% !important;
}
.sub-menu-columns .sub-menu li a:hover{
color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
float:right;
}
#mainnav ul li a{
border-left:2px;
border-color: #404040;
}
#mainnav ul li ul{
left:-400px;
border-left:2px;
border-color: #404040;
}
#mainnav ul li ul::before{
left:450px;
}
However that is not working.
Any ideas maybe? Since I've heard many people use lately jsFiddle for helping out, I'm not sure if I've done it right, but this is what I could provide for you: https://jsfiddle.net/mve1wdfd/
Website: https://xs-sol.com/
Thank you for your help!
Update: I think the main issue is that I'm unable to combine the id=mainnav with other classes and ul's, il's a:hover's and so on.
Here is the entire code for my menu. I'm not posting it here again for clarity.
Some code explanation:
id="onlink" means the link is clicked. The page is active.
What I want is when MENU is onlink, its entire submenu (here both: submenu and submenu2) should become visible too (note we have not clicked any particular submenu).
Is it possible to establish such dependency in pure css?
So far the submenu only pops up on menu hover and disappears after it.
I think you are looking to get the submenus to be hovered as well even after the MENU is not ONLINK. Here is a solution. Hope this is what you are looking for. I used the opacity css property.
#menu li ul.sub-menu {
opacity: 0;
position:absolute;
}
#menu li ul.sub-menu a {
border: none;
background: none;
display: block;
}
#menu li:hover .sub-menu {
opacity:1;
width: 150px;
text-align: center;
}
here is a fiddle http://jsfiddle.net/Y8pnm/2/
Just expand your selector to include every .sub-menu which is after #onlink using the General sibling selector (~).
#menu li:hover .sub-menu,
#menu #onlink ~ .sub-menu {
display:block;
width: 150px;
text-align: center;
}
jsFiddle Demo
You could make MENU and it's submenu share the same class and then use
.class:hover {
// Your CSS code
}
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 cant post all of my code, so please check the url.
http://www.bierhauschina.com/shekou/kulinarium/
here is css:
http://www.bierhauschina.com/menu/menu_style.css
The problem is a css menu. my menu shows all lists of menu under the first menu. i don't know where is problem, but it is exactly in css. where.. i can't got it.
Add position: relative to .nav li in your CSS.
Add position: relative; to .nav .select, .nav .current, making it like this:
.nav .select, .nav .current {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
position: relative;
}
This style:
.nav .select *:hover .select_sub, .nav .current .show
Sets position to absolute. Set it to relative. Also you are loading menu_style.css twice, remove the second reference.