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.
Related
i am a newbie to CSS,HTML and trying to understand lists.however something confuses me .As you can see below my HTML i am trying to create a drop down navigation bar.what i don't understand is why would display property won't work on a single li element.
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}
.hidden {display:none;}
.home:hover .hidden{display:block;}
.hidden a:hover{background-color: #f1f1f1;}
<body>
<ul class="block1">
<li class="home">Home
<li class="hidden">
contact us
</li>
<li>about<li>
<li>Investor</li>
<li> what we do</li>
</li>
</ul>
</body>
Here is the new css you should use:
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}
.hidden{display:none;}
.home:hover + .hidden{display:block;}
li:hover{background-color: #f1f1f1;}
Then your html should look like this:
<body>
<ul class="block1">
<li class="home">Home</li>
<li class="hidden" >
contact us
</li>
<li>about</li>
<li>Investor</li>
<li> what we do</li>
</ul>
</body>
Nothing too wrong with your html, just a mismatch <li>, and the css you want to look at this post: Using only CSS, show div on hover over <a>
Here is the JSFiddle: Example of OP Code
i don't understand is why would display property won't work on a
single li element.
The div with class .home is not the parent of li tag with class hidden. Hence it will never trigger a hover over that. Whenever you trigger a hover over a parent container it trickles down and find its children and does some sort of styling.
In your case, you are trying to use display:none to hide a li and make it display by means of hover.
Consider the snippet below, whenever you hover over the parent container, the li tag is being displayed. (This approach below does not make a drop down menu for you but it is give you some insight how to make that display property change on hover)
.block1 {
background-color: #736570;
margin: 0px;
}
ul a {
color: white;
}
ul li {
list-style-type: none;
padding: 5px;
}
.hidden {
display: none;
}
.block1:hover .hidden {
display: block;
}
.hidden a:hover {
background-color: #f1f1f1;
}
.home
<html>
<body>
<ul class="block1">
<li class="home">Home
<li class="hidden">
contact us
</li>
<li>about
<li>
<li>Investor</li>
<li> what we do</li>
</li>
</ul>
</body>
</html>
I am trying to make a horizontal drop down menu in CSS. However, it appears vertically:
I want the two topmost menu items to be horizontal. What can I do, besides making a table with one row?
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
<ul>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
You can try floating the list items:
.root {
overflow: hidden; /* clear float */
}
.root > li {
float: left;
}
<ul class="root">
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>
abc
<ul>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
You can add submenu a class/id with
.inline-menu{
display: inline;
}
http://jsfiddle.net/dyaskur/fby9fan6/
The gist of your question is actually this: what is the difference between inline and block elements? This is a fundamental question that is important to understanding the basics of layout in CSS/HTML. There is a good write-up on this topic and some of the trade-offs of the various approaches at:
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Basically, <li> is block-level tag, meaning that it displays as its own "block" element: receives a layout (settable dimensions), by default takes the entire width of the parent element, and has a forced break after the rendered element (is on a line to itself).
So, that leaves us with a number of approaches for having your menu items sit side-by-side:
Use inline-level elements for your menu items
Use block-level elements and float them
Use block-level elements and style them as inline-block
All of these approaches are detailed in the above link. Personally, I prefer to use floated block elements. I have a fiddle with some rough css to give you an idea. Note that there are some considerations in how to display your submenus as well. You'll note that I've implemented these as having display: block, with no float, because we want them to stack vertically.
HTML
<ul class="menu">
<li>
foo
<ul class="submenu">
<li>subfoo1</li>
<li>subfoo2</li>
</ul>
</li>
<li>
bar
<ul class="submenu">
<li>subbar1</li>
<li>subbar2</li>
</ul>
</li>
</ul>
CSS
ul.menu {
list-style: none;
}
ul.menu > li{
float: left;
position: relative;
}
ul.menu li {
background-color: #cccccc;
padding: 5px 20px;
}
ul.menu > li + li {
border-left: solid black 2px;
}
ul.menu li:hover > ul {
display: block;
}
ul.menu li a,ul.menu li a:link, ul.menu li a:hover, ul.menu li a:visited {
color: black;
text-decoration: none;
}
ul.submenu{
display: none;
list-style: none;
position:absolute;
left: 0;
padding: 0;
}
ul.submenu li {
float:none;
display: block;
}
ul.submenu > li + li {
border-top: solid black 1px;
}
You can just remove some <li> tags:
<ul>
<li>
abc
<ul>
abc
abc
</ul>
</li>
<li>
abc
<ul>
abc
abc
</ul>
</li>
</ul>
I have a dropdown menu.I want the background and text color to get changed as soon as mouse hover is performed .At present background color is getting changed correctly whereas i am not able to change the text color ..
Here is the fiddle ...
Fiddle
and Here is the HTML...
<nav>
<ul>
<li>ABOUT US
<ul>
<li>Photoshop </li>
<li>Illustrator </li>
<li>DreamViewer </li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
</ul>
Please help me to solve this..
Just add this css color: #000; in class nav ul ul li a:hover .
nav ul ul li a:hover{
color: #000;(added css)
background: #e6e6e6;
}
Hope it'll help you.
nav ul ul li a:hover {
background: #e6e6e6;
color:#INSERT HEX;
}
you just need to add below code.
nav ul li ul li:hover > a {
color: #f00;
}
DEMO HERE
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>
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