Code:
<div class="menu">
<ul class="top_thing">
<li class="one_one">Services</li>
<ul class="the_one">
<li class="second">Language 1</li>
<li class="second">Language 2</li>
<li class="second">Language 3</li>
<li class="second">Language 4</li>
<li class="second">Language 5</li>
</ul>
<li class="one_one">About Us</li>
<li class="one_one">Contact</li>
</ul>
</div>
For CSS: I am using display:none on .the_one. Now once the services tab is hovered I want to then display .the_one. How can I do this? I tried doing:
li.the_one:hover {
display:block;
}
But that doesn't work either.
Your HTML is not valid. <ul> must have only <li> as children (and that includes other <ul>. Once you fix that, add these rules:
.the_one {
display: none;
}
.one_one:hover .the_one {
display: block;
}
http://jsfiddle.net/xvEvj/
You need to target the the inner list in your css to make it appear.
Change your css as below:
li.the_one:hover ul.the_one
{
display:block
}
the "li.the_one:hover" states that this will occur when the li with the class "the_one" is hovered over, then it applies a display:block to the ul with the class "the_one" inside the list item with the class "the_one".
Hope this helps.
Cheers.
Your HTML is not valid.
<div class="menu">
<ul class="top_thing">
<li class="one_one">Services
<ul class="the_one">
<li class="second">Language 1</li>
<li class="second">Language 2</li>
<li class="second">Language 3</li>
<li class="second">Language 4</li>
<li class="second">Language 5</li>
</ul>
</li>
<li class="one_one">About Us</li>
<li class="one_one">Contact</li>
</ul>
The second unordered list should rest within a list item of the first unordered list.
Related
We have nested unordered lists with product data.
For
<ul class="data_holder">
we want odd/even background colors.
ul.data_holder:odd => background: #ccc
ul.data_holder:even => background: #FFF
Our whole structure looks like this (as you see, our ul.data_holder sits inside an "li" element of the parent unordered list:
<ul class="row_holder">
<li class="row">
<ul class="data_holder">
<li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
</ul>
</li>
<li class="row">
<ul class="data_holder">
<li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
</ul>
</li>
<li class="row">
<ul class="data_holder">
<li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
</ul>
</li>
<li class="row">
<ul class="data_holder">
<li class="data">Data 1</li><li class="data">Data 2</li><li class="data">Data 3</li>
</ul>
</li>
</ul>
Thanks for help
You need to apply a CSS to the li, not to the ul which is inside the li. Try Below CSS:
ul.row_holder li:nth-child(odd) ul{
background-color:red;
}
ul.row_holder li:nth-child(even) ul{
background-color:black;
}
You can use the following CSS structure, nth-child(odd/even). With this code, you'll be able to have different stylings for odd/even objects in a list like this unordered list. Since you have a first <ul> with <li> elements inside, I would suggest you do this selector on the .row elements in your HTML.
.row:nth-child(odd) {
background: #ccc;
}
.row:nth-child(even) {
background: #fff;
}
I am trying to write my article beside my vertical menu, but all my article going inside that menu. I want my menu to be fixed on that page on the left side and all my new articles or any pictures should come on after menu.
MY HTML
<nav id="wrapper-250">
<ul class="accordion">
<li id="one" class="files">
Health Beat
<ul class="sub-menu">
<li><em>01</em>Sub Menu 1
<ul class="sub-sub-menu">
<li><em>a</em>Sub Menu 2</li>
<li><em>b</em>Sub Menu 2</li>
<li><em>c</em>Sub Menu 2</li>
<li><em>d</em>Sub Menu 2</li>
<li><em>e</em>Sub Menu 2</li>
</ul>
</li>
<li><em>02</em>Sub Menu 1</li>
<li><em>03</em>Sub Menu 1</li>
<li><em>04</em>Sub Menu 1</li>
<li><em>05</em>Sub Menu 1</li>
</ul>
</li>
<li id="two" class="mail">
Mail
<ul class="sub-menu">
<li><em>01</em>Hotmail</li>
<li><em>02</em>Yahoo</li>
</ul>
</li>
<li id="three" class="cloud">
Cloud
<ul class="sub-menu">
<li><em>01</em>Connect</li>
<li><em>02</em>Profiles</li>
<li><em>03</em>Options</li>
<li><em>04</em>Connect</li>
<li><em>05</em>Profiles</li>
<li><em>06</em>Options</li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
</nav>
<div id="body-part">
<p>
</P>
</div>
http://codepen.io/anon/pen/XbXbqQ
Add a big padding-left to your #body-part:
padding-left: 500px; /* example */
Demo here: http://jsfiddle.net/baLq1d1k/
Or you can do it using jquery if the width of your #wrapper-250 changes:
$("#body-part").css("padding-left", ($("#wrapper-250").width() + 10));
I have a dropdown menu with a sub-menu, made up of lists:
<ul>
<li class="list_item">Item 1</li>
<li class="list_item">Item 2</li>
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
<li class="list_item">Item 3</li>
</ul>
My CSS changes the background-color of these items when hovered on.
What I want to do is keep Item 2's background color changed whilst hovering over any give Sub Item
Any simple way to do this?
CSS:
.list_item:hover {
background-color:green;
}
.sub_list_item:hover {
background-color:yellow;
}
Wrap item 2 around its <ul> tag
<ul>
<li class="list_item">Item 1</li>
<li class="list_item">Item 2
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
</li>
<li class="list_item">Item 3</li>
</ul>
You could use the direct child selector > to target a specific li as opposed any given li or ul.
jsFiddle here - menu I made a few weeks ago
Usage example:
#menu > ul > li:hover {
background: #2580a2;
}
Change the code and css
<ul class="item">
<li class="list_item">Item 1</li>
<li class="list_item">Item 2</li>
<ul>
<li class="sub_list_item">Sub Item 1</li>
<li class="sub_list_item">Sub Item 2</li>
</ul>
<li class="list_item">Item 3</li>
</ul>
CSS is
.item
{
color: #000000;
list-style-type: disc;
}
.item li:hover
{
color: #FFFFFF;
background-color: #336600;
}
.item ul li:hover
{
color: #FFFFFF;
background-color: #FF0000;
}
Enjoy ... and choose your color whatever you like
for more detail visit ..
http://www.mr-sudhir.com/blog/what-is-css.aspx
I have a menu structure, like this:
<nav id="main">
<ul id="nav-user">
<li class="user-name">
<span class="name">John Doe</span>
<ul class="submenu">
<li>Profile</li>
<li>Settings</li>
<li>Sign Out</li>
</ul>
</li>
</ul>
<ul id="nav-main">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
I'm having an issue with ul.submenu. It's overlaying ul#nav-main, but for some reason it's transparent:
http://jsfiddle.net/JvALU/
I don't want to see the ul#nav-main. How can I change that?
z-index can only be used with elements that are positioned relative, absolute, or fixed. Try adding position: relative; to ul.submenu.
Hope this helps.
How can I make the menu-category color attribute change to orange when hovered and NOT remain orange while hovering other child items? Is this too tricky or am I not being clear enough? Please let me know. Thank you for help.
jsFiddle: http://jsfiddle.net/LmWk2/
<nav class="main-nav">
<ul>
<li class="menu-category">Title 1
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
</ul>
</li>
<li class="menu-category">Title 2
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
<li class="menu-item">Item 5</li>
</ul>
</li>
<li class="menu-category">Title 3
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
<li class="menu-item">Item 5</li>
</ul>
</li>
<li class="menu-category">Title 4
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
</ul>
</li>
</ul>
</nav>
The simplest way would be to add another element that wraps only the title:
<li class="menu-category"><span class="menu-category-title">Title 1</span>
.menu-category-title:hover {
color: orange;
}
http://jsfiddle.net/ExplosionPIlls/LmWk2/1/ (for TITLE1)
My answer addresses the color-change-on-hover issue and the related issue of making the links behave like buttons (block like) instead of text links.
As pointed out by a previous post, it is a good idea to wrap the title tag in a container, I chose h4 but almost anything will do. Also, for semantic reasons, but the link tags inside the list-item tags:
<nav class="main-nav">
<ul>
<li class="menu-category"><h4>Title 1</h4>
<ul>
<li class="menu-item">Item 1</li>
<li class="menu-item">Item 2</li>
<li class="menu-item">Item 3</li>
<li class="menu-item">Item 4</li>
</ul>
</li>
...
...
...
</ul>
</nav>
The essential changes to the CSS are as follows.
For the title text:
.main-nav ul li.menu-category h4 {
margin: 0;
display: inline-block;
padding:5px 15px 8px 15px;
font-weight: normal;
}
.main-nav ul li.menu-category h4:hover {
color:#FB8521;
}
The trick here is to set display: inline-block to the element wrapping the title text. Because I chose to use h4, I needed to zero out the margin and set the font-weight to normal to keep with your previous styling. Also, add padding to make the text area large so you can trigger the hover effect without actually mousing over the text.
For the sub-menu items, set the a tags to have display: block, that way the link's active area fills up the width of the sub-menu panel. Add padding as needed.
.menu-category .menu-item a {
display: block;
padding: 5px 15px;
}
.menu-category .menu-item a:hover {
color:#FB8521;
}
You can see the working demo at: http://jsfiddle.net/audetwebdesign/jvgkG/
PS
There is flexibility in this layout with regards to how the hover works. I assumed that the title text reverts to white when you mouse onto the secondary menu items, but I could set it up so that the title remains orange as you move over the secondary menu.
Also, you can style the default link color as you see fit.