This is the first time I am working with CSS hover in this way. But it does not work.
I am trying to show a navigation cloud when the user hovers a item in the navigation.
This is my current CSS
.menuBox li a:hover,.menuBox li.selected a { color: #fff; background-color: #068dda; }
.menuBox .cloudnav { display: none; position: absolute; width: 995px; height: 500px; background-color: #fff; z-index: 999999; border: 1px solid #4a4d4b;}
.menuBox li a:hover>.cloudnav { display: block; }
This is my current html
<nav class="menuBox">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="cloudnav">test</div>
</nav>
I even made a jsfiddle for you guys: http://jsfiddle.net/tAgEj/
I also tried .menuBox li a:hover + .cloudnav { display: block; } but that didn't work either.
What does?
It won't work with the a:hover. But in newer browsers you can work it out like this
.menuBox ul:hover + .cloudnav { display: block; }
But this will only work in newer browsers, because many IE's don't support hover for something else than <a>
.menuBox li a:hover>.cloudnav { display: block; } this won't work because the div.cloudnav isn't a direct child of the a element. This would work if it would be
something<div class="cloudnav"></div>
Related
I have built this Vertical Menu with hidden submenus however I cannot get the submenu to display when the user hovers. How could I go about doing this? Also how can I get the text to be formatted all the way left, since they are lists I can get rid of the bullets, however I cannot get the text to go where the bullets used to be. Also, I am wondering what the best way would be to set the width of the "main-nav". I don't want anything to be over the text except the logo. The body of the site would be next to the navigation. I want the side of the logo to also line up with the left side of the text, and I cannot figure out how to do this. The red border is just for testing purposes (obviously).
Here is the link to my codepen.
[BONUS] I am trying to create my own site from scratch with wordpress and a custom theme. How does one create it so that the logo image is taken from the site identity tab in the customize sidebar? And also just display text if no logo is chosen in the identity bar. Would it be some wordpress php function? Also, I would want the logo to be apart of the main-navigation by default. I have the register_nav_menu() function in my functions.php file and it assigns a menu to Main Navigation, also giving it a class main-navigation. How could I get the logo to by default appear above this menu? Any tips on this would be greatly appreciated. (Wordpress/coding noob here)
HTML:
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview</li>
<li>About</li>
<li>Submenu</li>
<ul class="sub-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<li>Contact</li>
</ul>
</nav>
CSS:
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li, .main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover, .main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation .sub-menu:hover {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
JS:
/* No JS */
I believe that this is your desired behaviour?
To do this, you need to place your ul submenu inside the li for the menu item that is displayed. This is the only change I made to the HTML.
You can then add a CSS rule so that when you hover over the li, its ul child becomes visible. i.e: .main-navigation li:hover {display: block; }.
The reason it didn't work when you did .main-navigation .sub-menu:hover is because when it is not being displayed, you cannot hover over it, so the hover state is never triggered. In the rule which I added, it is triggered when you hover over the containing li.
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li,
.main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover,
.main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation li:hover ul {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview
</li>
<li>About
</li>
<li>Submenu v
<ul class="sub-menu">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
EDIT: I may have made a mistake regarding WordPress, so I deleted that part of the answer so that I do not mislead anyone. E. Shio, however, found a link which explains it almost step by step. I'll summarise what this link says, just in case it someday gets deleted or the page url gets moved.
First, you check if there is a custom logo, for which you use has_custom_logo (). You then output that custom logo with the_custom_logo(). This is a relatively new feature to Wordpress though, so to maintain backwards compatibility, you should check if the function exists with function_exists( 'the_custom_logo' ). If there was no custom logo, you can output the text to display inside an else statement. Here's an example:
if( function_exists('the_custom_logo') ) {
if( has_custom_logo() ) {
the_custom_logo();
} else {
$blogname = get_bloginfo('name');
echo "<h1>$blogname</h1>";
}
}
If you have any questions about the CSS for the menu, I'm more than happy to help! (I'm no expert in Wordpress though, so I probably can't help with any Wordpress specific things, but I can try! XP)
I wonder if someone can help me or point me in the right direction so I can resolve my problem.
I have a list which has got class assigned
<ul class="link-list nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
The link-list nav looks as below:
.link-list {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
font-size: 12px;
}
.link-list > li {
display: inline-block;
}
.link-list > li > a {
display: block;
padding: .9em 1.6em;
/*margin: top right bottom left;
border: 1px solid white;*/
text-decoration: none;
color: white;
}
.link-list > li > a:hover { /* :hover, :focus, :blur */
color: pink;
}
.link-list.nav > li > a {
font-weight: bold;
}
So now the list is being formatted as it should be
Correct colors:
but when I am trying to make the first item of the list bigger by embedding span tags and changing above code to:
<ul class="link-list nav">
<li><span style="font-size: large">Menu 1</span></li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
The font become bigger but also all other formatting disappear
Incorrect colors:
I have been experimenting with defining another class which would inherit from link-list nav but unsuccessfully. Any suggestions please?
Thanks in advance,
Regards Tom.
you can put the span as child of a given your CSS (you are using the direct child selector >).
or
you can just use CSS selector first-child in li
or
or simply removing the >, making it a child (not direct one).
.link-list {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
font-size: 12px;
}
.link-list > li {
display: inline-block;
}
.link-list > li > a {
display: block;
padding: .9em 1.6em;
/*margin: top right bottom left;
border: 1px solid white;*/
text-decoration: none;
color: red;
}
.link-list > li > a:hover {
/* :hover, :focus, :blur */
color: pink;
}
.link-list.nav > li > a {
font-weight: 700;
}
/* use this */
.link-list.nav > li > a span {
font-size: 20px
}
/* or use this */
.link-list.nav > li:first-child > a {
color: blue
}
<ul class="link-list nav">
<li><span>Menu 1</span>
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
<li>Menu 4
</li>
</ul>
The selectors no longer match because the <a> is no longer a child of the <li>.
Use a descendant combinator (a space) instead of a child combinator (a >).
Alternatively, put the span inside the innermost element so that it doesn't disrupt the child combinators.
Alternatively, and probably the best option, don't add an extra element at all. You want to style all the text there, so apply your CSS to the whole element.
Thank you Quentin and dippas for your swift responses.
Out of both solutions, I have gone for creating:
.link-list.nav > li > a span {
font-size: 20px
}
and changing
<li><span>Menu 1</span>
to
<li><span>Menu 1</span>
This resolved my problem completely.
Clearly I need to reach out to articles about inheriting.
Thanks again and take care guys!
I've written the folloning code:
<ul>
<li>Text</li>
<li>text</li>
</ul>
and styles:
list-style-type: none;
padding: 5px;
display: inline;
background-color: #A9A9A9;
But i have spacing between two li elements like the following:
How can I remove this spacing?
By put them inline
<ul>
<li>Text</li><li>text</li>
</ul>
Js Fiddle Demo
If you float your li items, it should remove the margin between li output.
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
ul {
list-style-type: none;
}
ul li {
float:left;
padding: 5px;
display: block;
background-color: #A9A9A9;
}
Here are two common ways to avoid the space:
<ul>
<li>
one</li><li> <!-- use this to avoid the linebreak -->
two</li><li>
three</li>
</ul>
Or you can use Comments:
<ul>
<li>one</li><!--
--><li>two</li><!-- Comments so there is no white-space
--><li>three</li>
</ul>
You can check it in this Demo
You get the space because there is some space between the elements.
(Tabs, Newline count as space ). With this Minimized HTML it should work :)
You can read more about it here Examples at CSS-Tricks
try floats and use list-style-type for ul:
ul {
list-style-type: none;
}
li {
padding: 5px;
float:left;
background-color: #A9A9A9;
}
Just Add float:left in your Css
ul li {
background-color: #A9A9A9;
display: inline;
float: left;
padding: 5px;
}
Demo
There are many ways as mentioned above few of them..however you can achieve with another method. using font-size:0
ul
{font-size:0; /*This will remove the space totally*/
list-style-type: none;
}
li{
padding: 5px;
display: inline;
background-color: #A9A9A9;
font-size:16px; /*This is important line so the font come again in same shape*/
}
Here is the Demo.
I'm currently trying to create a drop-down menu from nested unordered lists. I have the menu working however I'm having some issues with regards to styling. The overall link that triggers the drop-down is clickable and needs to have a blue background with white text however, the drop-down elements need to have a grey background which is inherited from the overall navigation container. All I need to do is modify the text colour however whatever I method I try it always modifies the drop-down text colour as well as the heading link colour.
My CSS can be found below along with an example of the current display and the html used to generate the menu:
/*CSS*/
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: right;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
/*height: 2em;
line-height: 2em;
*/
/*padding: 0 1.5em;*/
text-decoration: none;
color: #ffffff;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu li:hover ul {
display: block;
}
.dropdown a li{
color: #124162 !important;
}
#style_me > li > a{
color: #124162 !important;
}
/HTML/
<nav id="navigation" class="navigation">
<ul>
<li class="current">Home</li>
<li>Who Are We?</li>
<li>Why Join Us?</li>
<li>Contact Us</li>
</ul>
/* This is the menu element that needs styling */
<ul id="coolMenu">
/* THis should be blue background white text */
<li>Login / Register
<ul id="style_me">
/* These should be grey background blue text */
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
</ul>
</nav>
Any help would be greatly appreciated. It's been a couple of years since I've had to do any CSS and my memory is a bit flakey!
This should do what you want:
#style_me li a {
color: #124162 !important;
}
(just spaces instead of >) And, perhaps, you won't need that !important.
Update: try even more specific CSS selector if what you posted is being overridden.
#coolMenu li #style_me li a {
color: #124162 !important;
}
Ok hey guys.
So what I try to acheive is to have a menu in the topnav of my site and when hovring the mouse over to show some stuff in a list under it.
so far I'm working on local on a test html file until I get it working.
so what i got so far is this menu:
<ul id="menu">
<li>Notifications
<ul>
<li id="foot-notify-954>
Xtesting left a comment for your blog 22 hours ago
</li>
<li id="foot-notify-953>
X
<p>testing left a comment for your blog <span>22 hours ago</span></p>
</li>
</ul>
</li>
and my css code:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A }
li:hover li a:hover { background: #95A9B1 }
I think the problem is that I'm having more than 1 <a> hyperlink inside the notifications <li>
id like each li notification to show in 1 line, as in the format, the X button at the start to remove it then the notification itself.
First, you have to check the html syntax:
list should looks like this:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li><a href='#'>Milk</a></li>
</ul>
This tool helps you find the errors (red highlighted):
http://jsbin.com/emowir/1/edit
Here is your example:
<ul id="menu">
<!-- type 1: NOT drop down-->
<li>Home</li>
<!--type 2: drop down-->
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
</ul>
What would you like to insert and where?
Your problem does seem to be bad code formatting. This is a clean and edited version of your code. The code "breaking" is an issue of CSS formatting. Using inline-blocks instead of blocks helps get things lined up properly, and shifting the background style to the <li> rather than the <a> makes it look better.
Your problem is the following:
ul li a {
display: block;
This makes every link you insert into the list a block. Try start to float things like in this example I made from your code, http://jsfiddle.net/xN8sc/1/