Basically I've made a really nice navbar and all, however the dropdown I made isnt working, it shows on hover over my Community tab, but dissappears when i try and hover onto it :(
Does anyone know how i can fix it?
Here is my code:
<div class="navigation">
<ul class="navigation_items">
<li class="active">Home</li>
<li>What we do</li>
<li>
<a>Community</a>
<ul>
<li><a>Forums</a></li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
Check the css code in the jsfiddle
http://jsfiddle.net/8a92u/
Push the sub menu bit over the main li so it retains the menu on hover.
Add margin-top:-10px to sub menu ul and padding-top: 10px to get it back to the same UI out look.
.navigation_items ul {
background-color: rgb(28, 28, 28);
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
margin-top: -10px;
padding-top: 10px;
}
DEMO
Use this:
.navigation_items li:hover > ul,
.navigation_items li > ul:hover {
display: block;
margin-top: -10px;
}
instead of this:
.navigation_items li:hover > ul {
display: block;
}
.navigation_items ul {
display: none;
margin-top: -10px;
}
Related
I'm new here and new at HTML and CSS.
I've been trying to create a dropdown menu, and while the drop down menu shows up upon menu hover, it also shows up without menu hover. As soon as I move my cursor within where the dropdown should be appearing, it appears. Do you know what I'm doing wrong and how I should correct it? I hope I'm making sense...
Also, I am aware that the width of my menu expands as I expand the window size. Please ignore that, it doesn't do that in the main code I'm working on.
Thanks in advance!
.top-menu>ul {
background-color: #78a1bb;
font-size: 150%;
padding-left: 0px;
padding-right: 0px;
}
.top-menu>ul>li {
list-style: none;
display: inline-block;
padding: 5px 124px;
position: relative;
}
.top-menu>ul>li:hover {
background-color: #d6e2ea;
}
ul.sub-menu {
position: absolute;
width: 290px;
background-color: #d6e2ea;
list-style: none;
padding-left: 0px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
font-size: 80%;
padding-top: 10px;
padding-left: 25px;
padding-bottom: 10px;
}
.top-menu li:hover .sub-menu {
opacity: 1;
left: 0px;
}
<nav class="top-menu">
<ul>
<li> A
<ul class="sub-menu">
<li>Sub a </li>
<li>Sub b </li>
<li>Sub c </li>
</ul>
</li>
<li> B </li>
<li> C </li>
</ul>
</nav>
Instead of use opacity to hide your sub-menu. You can use display: none to hide and display: block to show again.
If you just change the opacity, the element remains "under your mouse" and the CSS try to show and hide many times (your sub-menu is "flicking").
Using display: none the sub-menu disappears and your mouse doesn't hover it "forever".
I created a plunker with the right code. https://embed.plnkr.co/TZ7U0m19WijN0kIe6Xgl/
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 have a CSS dropdown menu that works perfectly in Mozilla/Chrome/Safari. However it is a bit iffy if IE10 (but works) but does not work at all in IE9.
I have tried to figure out what is causing this as there are websites that use CSS dropdown menus that function perfectly in IE.
Please see here for fiddle: http://jsfiddle.net/xZuDC/
The images are as follows:
Normal Menu in chrome
Menu in IE
List:
<ul class="ulrRight">
<li><a onclick="your_name">Your Account</a>
<ul id="your_name">
<li>Details</li>
<li>Password</li>
</ul>
</li>
</ul>
I made a few changes and as far as I can tell it works in IE9.
This was the only thing I found to cause the fiddle to not work, <ul class="ulrRight"> <--- had an extra r after ul
jsfiddle doesn't seem to work in IE 8 and under, at least in the console's browser view.
Here is the fiddle with the updates I made
fiddle
I would suggest just writing this a little cleaner like so:
<div class="dropDown">
<ul>
<li>Your Account
<ul>
<li>Details</li>
<li>Password</li>
</ul>
</li>
<li>Help
<ul>
<li>Support</li>
<li>Contact Us</li>
<li>Client FAQ's</li>
<li>Haulier FAQ's</li>
</ul>
</li>
<li>Logout</li>
</ul>
</div>
CSS
.dropDown {
width: 500px;
height: 60px;
margin: 0 auto;
background: mediumSeaGreen;
}
.dropDown > ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.dropDown > ul > li {
float: left;
width: 33.3333%;
line-height: 60px;
text-align: center;
}
.dropDown > ul > li:hover {
background: #1b1b1b;
color: #fff;
}
.dropDown > ul > li:hover > ul {
display: block;
}
.dropDown > ul > li > ul {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
fiddle for code
I am doing a website for school, and it's been going well. The only problem I am stuck on is this: The navbar changes size on different sized screens. It's most readily apparent when zooming out, but it is slightly off on different screens.
Here is a screenshot of what I mean:
https://docs.google.com/a/g.ccsd.net/file/d/0B_Sda_-LouAKbnVKVHhMSW5yeXc/edit?usp=sharing
Please note that the left side, which is the problem, moves around a lot depending on the scale. The above image is only one example.
This is my CSS:
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
z-index: 150;
/* min-width: 739px;
max-width: 739px; */
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 26.45px 30px 26.45px; /*top right bottom left*/
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
This is my HTML:
<ul id="menu">
<li>Showcase</li>
<li>Contact</li>
<li>FAQ</li>
<li>Faculty
<ul>
<li>Mrs. Rosarita Olvina</li>
<li>Mrs. Christine Pavesich</li>
<li>Mr. Francisco Virella</li>
<li>Mrs. Susan Williams</li>
</ul>
</li>
<li>Program Areas
<ul>
<li>Graphic Design</li>
<li>Photography</li>
<li>Video Production</li>
<li>Animation</li>
<li>Art</li>
</ul>
</li>
<li>About
<ul>
<li>What We Do</li>
<li>Where We Go</li>
</ul>
</li>
<li>Home</li>
</ul>
Thank you for any help.
***I tried first answer, it didn't work, but I may be doing it very wrong.
The problem is not necessarily within the menu. Rather the whole menu (or its container) needs to be placed properly.
As far as I can tell from the code you've given, the floats may also play a part in fixing this. The whole menu and nested ULs are floating. My suggestion would be to avoid these floats and work with "display: inline-block" instead to get the horizontal arrangement.
After streamlining the menu entries like that, you can properly position your whole menu container in the surrounding HTML.
In case you don't already use it: Firebug or Chromebug plugins are really handy for identifying errors like this.
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/