I want to build CSS drop down menus.
I want to solve the problem of too long drop down items in UL. So I want to use DIV within a UL.
If you run this example, heading 3 will show you drop down UL items. I want the same for Heading 2 link. Because I put that UL in a DIV. So how can I do it?
CSS Code:
li{
list-style: none;
float: left;
}
li ul {
display: none;
background-color: #69f;
}
li:hover > div#mDiv {
display: block;
}
.menuDiv{
display: none;
}
li:hover > ul {
display: block;
}
Markup:
<ul>
<li>Heading 1</li>
<li>Heading 2
<div class = "menuDiv" id = "mDiv">
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
</ul>
</div>
</li>
<li>Heading 3
<ul>
<li>Subitem 4</li>
<li>Subitem 5</li>
<li>Subitem 6</li>
</ul>
</li>
</ul>
Get rid of the > combinator so the inner uls get picked up whether they're in a containing div or not:
li:hover ul {
display: block;
}
If the > in your rules is required change this rule:
li:hover > div ul, li:hover > ul {
display: block;
}
Your problem is that because of your css, the div is shown on :hover, but the inner ul is not.
So you can use #BoltClock's solution or change:
li ul {
display: none;
background-color: #69f;
}
to:
li ul {
background-color: #69f;
}
li > ul {
display: none;
}
Related
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 an HTML structure like this:
<div id="nav">
<ul>
<li>Home</li>
<li>Services Offered</li>
<ul>
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
</ul>
<li>Areas We Service</li>
<li><a id="quote" style="cursor: pointer">Request A Quote</a></li>
</ul>
</div>
and CSS styles like this:
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
top: 100%;
position: absolute;
display: block;
background: black;
}
The CSS code isn’t allowing the HTML nested <ul> to become visible on hover. I can understand this being a problem if the <ul> is a parent of the preceding <li> but its not, is it? How can I get this working without JS/jQuery?
Thanks!
You have an invalid tag in your markup. ul cannot contain another ul it should be with in li. Apart from this i just fixed css removed top:100% and it looks this way. Not sure hw you wanted it.
Demo
Css
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
position: absolute; /* Change this to position:relative and your menu will appear beneath its parent.*/
display: block;
background: black;
}
MarkUp Fixed
<div id="nav">
<ul>
<li>Home
</li>
<li>Services Offered
<ul>
<li>Residential
</li>
<li>Commercial
</li>
<li>Industrial
</li>
</ul>
</li>
<li>Areas We Service
</li>
<li><a id="quote" style="cursor: pointer">Request A Quote</a>
</li>
</ul>
</div>
The problem is that the ul element is not contained within the li element that is being hovered over. Try moving the ul element within the 'hovered' li element.
Here's a jsfiddle I created; only moving the ul element to be contained within the li and adding position:relative; to the parent li element: http://jsfiddle.net/BQHyq/1/
If you have any feel questions feel free to make an inquiry - I'd be happy to help.
Try this
Demo(Didn't add a toggle menu header)
Updated Demo
#nav ul li ul {
display: none;
}
#nav ul li:nth-of-type(3):hover ul {
display: block;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Services Offered</li>
<li>Toggle Me
<ul>
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
</ul>
</li>
<li>Areas We Service</li>
<li><a id="quote" style="cursor: pointer">Request A Quote</a></li>
</ul>
</div>
Note: You are having an invalid markup, you cannot nest ul directly
as a child under another ul element, you need to nest another ul
under an li element.
Also note that am purposely using nth-of-type here to select the 3rd li because if you want to nest another list under another li and you don't want to toggle that, than nth-of-type will come in action, else you want to toggle each nested list than using the below piece of selector will work as well
Demo
#nav ul li:hover ul {
display: block;
}
I doubt that you didn't give position: relative; to the parent. And the main issue is, <UL> is not inside <LI>. So :hover will not be triggered. You need to move the UL inside the LI for this.
Why not think of doing something like this. Why not try with this HTML/CSS structure?
HTML
<ul class="nav">
<li>
Menu 1
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
</ul>
CSS
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */
Fiddle: http://jsfiddle.net/vMuxA/ (Vertical Menu) http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)
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;
}
In css how would I change on hover the color of test 1 but not color of list 1, 2,3?
<ul>
<li>
test 1
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
One way is to specify the "default" color:
li:hover {
color:#f00;
}
li, li:hover li {
color:#000;
}
http://jsfiddle.net/D8dwt/1/
Another (cheat?) is to use more markup to wrap the content you want styled on hover:
li:hover span {
color:#f00;
}
<ul>
<li>
<span>test 1</span>
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
This is one way to go:
ul > li {
color: red;
}
ul > li:hover {
color: blue;
}
ul > li:hover > ul > li {
color: red;
}
Add test1 into a div element so that it is in a separate leaf.
css:
div:hover {
color: blue;
}
Although there may be a way to do this without modifiying the html..
Give it it's own class and define it in your CSS file.
<li class="yourclass">
Or put it in tags and define the link in your CSS
li.yourclass a:hover {
text-decoration: underline ;
}
I have a nested UL navigation list, with ul's contained inside some other li elements. here's the mark up:
<ul class="navigation">
<li>No Chidren</li>
<li>With Chilren
<ul>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
I tried styling it with some of the following CSS declarations:
.navigation {
//stylings
}
.navigation li{
//stylings
}
.navigation li a{
//stylings
}
.navigation li a:hover{
//stylings
}
but the .navigation li affects all of the list elements, including the children. is there a way to target the lis so that the styles are only applied to the top-level ones, and not the children?
As others have mentioned, the > selector will only select direct children. However, this doesn't work in IE 6.
If you need to support IE 6, you can add a class to child uls or lis, and use that to remove the styling cascading from the top li:
<ul class="navigation">
<li>No Chidren</li>
<li>With Chilren
<ul class="level1">
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
--
.navigation li{
background: url(bg.png);
}
.navigation .level1 li{
background: none;
}
Like this, the ">" states that the li must be a direct child of .navigation
.navigation {
//stylings
}
.navigation > li{
//stylings
}
.navigation > li a{
//stylings
}
.navigation > li a:hover{
//stylings
}
Yes, it is possible with child selectors.
.navigation>li>a{
//stylings
}
Code above will affect "No Chidren" and "With Chilren" link but not "child 1" element.
Here is working example: http://jsfiddle.net/VuNwX/
And here you can read more about selectors: http://css.maxdesign.com.au/selectutorial/index.htm