i created an HTML menu that has a submenu, however when i hover over the main menu and it shows the submenu, i cant get access to it. It disappears before i can move my mouse down to navigate to it. I dont know what i am doing wrong, maybe with my code someone can help out. thanks
#header ul { position: absolute; top: 88px; left: 0; }
#header ul li { display: inline;}
#header ul li a { font-size: 11px; text-decoration: none; text-transform: uppercase; margin-right: 20px; color: #fff; line-height: 2em;}
#header ul li ul{ position: static;display: none; z-index: 999;top:150%;}
#header ul li:hover a { font-weight:bold; color: #000000}
#header ul li:hover ul { display: block; position:absolute;}
Edited to show HTML
<ul>
<li>Home
</li>
<li>
HRMS
<ul>
<li>
Position
</li>
<li>
COA
</li>
<li>
Employee
</li>
<li>
Estate
</li>
</ul>
</li>
<li>
Employee Maintenance
</li>
<li>
Payroll
</li>
<li>
Data Transfer
</li>
<li>
Reports
</li>
<li>
Administration
</li>
<li>
Help
</li>
</ul>
The problem is a disconnect between the main and the children <ul>.
In your style ul li ul { position: static;display: none; z-index: 999;top:150%;}
The top:150%; creates the disconnect (so you hover over nothing instead of hitting the submenu's :hover logic when you hover from ul li to ul li ul). You can try using padding-top instead:
ul li ul{ position: static;display: none; z-index: 999; padding-top:10px;}
Edit: Here is a working nav menu example you can look at.
Edit 2: Looks like it works in Firefox and Chrome, but not IE.
You will need a direct child selector, somewhere along the line of:
li:hover > ul { display: block; (...) }
This means that the child <ul> in the list will be displayed when it's direct parent <li> has been hovered upon.
I wrote one article about Dropdown menu in Portuguese, but I guess it will help you with google translate or something like that.
Check it out: http://www.linhadecodigo.com.br/artigo/3474/menu-em-css-menu-dropdown-horizontal-com-html5-e-css3.aspx
Related
I got a problem with the CSS hover-event.
I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)
<div class="nav">
<ul>
<li> <a> Something </a>
<ul>
....
</ul>
</li>
....
</ul>
</div>
That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.
.nav ul li:hover { background: #BFBFBF; } - not working
.nav ul li:hover > a { color:#FFFFFF; } - working perfectly fine
.nav ul li:hover > ul { display:block; } - working perfect as well
.nav ul {
background: #404040;
list-style:none;
padding:0 20px;
margin: 0;
height: 30px;
text-align:left;
display:block;
}
I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working.
I tried using background-color instead of background, without success.
I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.
I am noob to css, maybe I'm missing some really simple detail.
Thanks in advance.
Rather than modifying the nav bar content, just try to change the animation for the thing which you are pointing at, I mean that rather than hovering the <li> component just make the text in it hovering
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .2s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
Try defining the <a> element and hovering it as the whole <li> won't hover with multiple overlapping CSS formats
See I created something in html. And your code is working.
Its good if you can paste your html
<head runat="server">
<title></title>
<style type="text/css">
.nav ul li:hover {
background: #BFBFBF;
}
.nav ul li:hover > a {
color: #FFFFFF;
}
.nav ul li:hover > ul {
display: block;
}
</style>
<nav class="nav">
<ul>
<li>
<a>Li 1</a>
</li>
<li>
<ul>
<li>Li 2
</li>
</ul>
</li>
<li>Li 3
</li>
</ul>
</nav>
I created the drop-down menu by using CSS and HTML.
I just can't figure out what am I making wrong. When I hover the mouse over the Social it doesn’t pop-up me the drop-down menu.
Entire fiddle here
Js Fidle Example
A part of code where I think its mistake.
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul{
display : block;
}
#nav ul ul {
display: none;
position : absolute ;
background-color: #333;
border: 5px solid #222;
border-top : 0;
margin-left: -5px;
}
youo have <li> Social</li> and it should be
<li> Social
<ul>
<li> Facebook</li>
<li> Twitter </li>
<li> Youtube </li>
</ul>
</li>
JSFIDDLE
You need to put the sub UL inside the li
<li> Social
<ul>
<li> Facebook</li>
<li> Twitter </li>
<li> Youtube </li>
</ul>
</li>
See fidde: http://jsfiddle.net/2j55uthz/1/
The reason is because in your CSS this line:
#nav ul li:hover ul {
display: block
}
Is target the UL element inside of the hovered li
The <ul> containing facebook, youtube, twitter needs to be within the social <li>. It works with that change.
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;
}
I suppose this one might be easy for you css gurus :)
I am trying to apply some css to a page that I am currently working on where I want to have a dropline menu.
I got the code from here and just did minor modifications (width of the outer ul, class instead of id for the outer ul and z-index instead of huge negative indentation)
As I see there is some misunderstanding, here is some more detail about how this menu should work:
There are two levels, one on the top and the other underneath.
The currently selected link from the top menu will have the css-class "current" attached to the li-element that contains that link. (I use the MVC SiteMapProvider for that, but this should not matter for this question)
The submenu that is associated with that "current" top menu should be displayed by default,
but it should be overlapped by another submenu if the user hovers over the link to another top menu.
(hope that clarifies it a bit)
This is the markup I am using:
<ul class="mainMenu">
<li>
Link1
<ul>
<li>
Sub1
</li>
<li>
Sub1
</li>
<li>
Sub1
</li>
</ul>
</li>
<li class="current">
Link2
<ul>
<li>
Sub2
</li>
<li>
Sub2
</li>
<li>
Sub2
</li>
</ul>
</li>
<li>
Link3
<ul>
<li>
Sub3
</li>
<li>
Sub3
</li>
<li>
Sub3
</li>
</ul>
</li>
</ul>
and it uses these styles:
* {
margin:0;
padding:0;
}
.mainMenu {
list-style:none;
height:3.8em;
position:relative;
line-height:1.4em;
}
.mainMenu li {
width:136px;
float:left;
text-align:center;
}
.mainMenu a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
background:#999;
}
.mainMenu li.current ul li.current a, .mainMenu li.current a div, .mainMenu a:active, .mainMenu a:focus, .mainMenu a:hover {
background:#777;
}
/* --------- Sub Nav --------- */
.mainMenu li.current ul {
left:0;
}
.mainMenu ul {
position:absolute;
left: 0;
z-index: 1;
width:408px;
list-style:none;
padding:.9em 0 0;
}
.mainMenu ul li {
width:auto;
margin:0 15px 0 0;
}
.mainMenu ul a {
font-size:80%;
height:auto;
padding:0 8px;
}
.mainMenu li.current ul, .mainMenu li:hover ul {
z-index: 10;
background:#fff;
}
See also here for a fiddle that includes both already.
In general this seems to work pretty well, BUT when I hover to the right (i.e. Link1) I cannot see the corresponding links from the submenu though it works when I hover to the right (i.e. Link3). Anyone got an idea why this is the case?
ps: I also do not know why the current node is not applying the style from
.mainMenu li.current ul
(at least I do not see it in firefox 17.0.1, though, when not in the fiddle itself I do not have that problem, so probably a minor issue and not my main question here)
Just add a bit of CSS :
.mainMenu ul {
display: none;
}
.mainMenu li:hover > ul {
display: block;
}
Example
EDIT
Just change or remove z-index in .mainMenu li.current:hover ul. Fiddle
You have set class="active" to second sub menu so the first menu is under (due to z-index set) the second menu. Add active class to first menu
<ul class="mainMenu">
<li class="current">
Link1
</li>
</ul>
DEMO
You miss place current class i.e. in second menu(LINK2). Remove it and place at first link(LINK1) as below
<li class="current">
Link1.......
</li>
<li> Link2 </li>
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/