I have a problem with the HTML and the CSS, where I nested the Salads, Fresh and the Smoothies in Recipes. But hover last one to show and choose to click over them (to choose specific salad or fresh etc.), they have been fleeing me (they show, but I can't click on them), so I can't open the hyperlinks which they contain.
This is the HTML code:
<div id="nav">
<ul class="nav-list">
<li>Home</li>
<li>
Tips for health
<ul class="sub-nav-list">
<li>The healing properties</li>
<li><a href="5%20vajni%20podpravki.html"5 important spices that you should include in your diet</a></li>
<li>Bad habits and their removal</li>
<li>Water as a source of life</li>
</ul>
</li>
<li>
Recipes
<ul class="sub-nav-list">
<li>Salads</li>
</ul>
<ul class="sub-sub-nav-list">
<li>Lettuce</li>
<li>French salad</li>
<li>Red Beet Salad</li>
</ul>
<ul class="sub-nav-list">
<li>Fresh</li>
</ul>
<ul class="sub-sub-nav-list">
<li>Sweet fresh</li>
<li>Fresh detox</li>
<li>Citruc fresh</li>
</ul>
<ul class="sub-nav-list">
<li>Smoothies</li>
</ul>
<ul class="sub-sub-nav-list">
<li>Chocolate smoothie</li>
<li>Tropical smoothie</li>
<li>Smoothie with banana and pineapple</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</div>
And this is the CSS code:
.sub-nav-list {
display: none;
}
.sub-sub-nav-list {
display: none;
}
ul.nav-list li:hover > ul.sub-nav-list {
display: block;
padding-left: 50px;
}
ul.nav-list li ul.sub-nav-list:hover + ul.sub-sub-nav-list {
display: block;
padding-left: 100px;
}
<li>The healing properties</li>
<li><a href="5%20vajni%20podpravki.html"5 important spices that you should include in your diet</a></li>
it should be
like this
<li>5 important spices that you should include in your diet</li>
right ?
Related
I am trying to activate my sub-menu when hovering on the anchor tag in my ul. It seems to only work when hovering on the li the anchor tag is in. I don't want to restrict the width of my list-items just to get that effect. I've tried several methods like:
a:hover, nav .collapsable a:hover, and removing the "display-block" attributes. Any help will be very appreciated! Thanks
Here is my html:
<nav>
<ul class="collapsable" style="margin-left:-5px; margin-top:-10px;">
<li>Licensing
<ul>
<li>Corporate</li>
<li>Individual</li>
<li>TBA/DBA</li>
<li>Nonresident</li>
<li>Name approval</li>
<li>CSRs</li>
<li>Who needs a license</li>
<li>Duties an unlicensed person can do</li>
<li>Continuing education</li>
</ul>
</li>
<li>Business planning
<ul>
<li>Business plans</li>
<li>Marketing plans</li>
<li>Perpetuation plans</li>
<li>Disaster plans</li>
<li>Local Chambers of Commerce</li>
<li>Dos and don'ts of starting your own agency</li>
</ul>
</li>
<li>Financial planning
<ul>
<li>Accounting</li>
<li>Taxes</li>
<li>Insurance for the agency</li>
<li>E&O</li>
<li>Agency financing</li>
<li>Premium financing</li>
<li>Trust accounts</li>
</ul>
</li>
<li>Sales and marketing
<ul>
<li>Advertising</li>
<li>Agency Marketing Tool Kit, calendar</li>
<li>Signage and business cards</li>
<li>Local community services</li>
<li>Consumer content</li>
<li>PIA Creative Services</li>
<li>Markets</li>
<li>Niche marketing</li>
</ul>
</li>
<li>Office organization
<ul>
<li>Physical space/layout</li>
<li>Furniture</li>
<li>Equipment</li>
</ul>
</li>
<li>Personnel management
<ul>
<li>Job descriptions</li>
<li>Hiring</li>
<li>Testing</li>
<li>Personality and aptitude assessment</li>
<li>Managing</li>
<li>Compensation benefits</li>
<li>Group health, dental, life and long-term disability</li>
<li>Contracts</li>
<li>Employment law</li>
<li>Employee handbook</li>
<li>Time management</li>
</ul>
</li>
<li>Internal workflow
<ul>
<li>Procedures manual</li>
<li>E&O</li>
<li>Coverage checklists</li>
<li>Carrier workflow</li>
<li>Binding authority</li>
<li>Underwriting</li>
<li>Workflow</li>
<li>Privacy</li>
<li>Files</li>
<li>Storage/security</li>
<li>Notices</li>
<li>Cyber insurance</li>
<li>Policy writing/proposal template</li>
</ul>
</li>
<li>Technology issues
<ul>
<li>Agency management systems</li>
<li>Computer hardware</li>
<li>Software</li>
<li>E-mailing/faxing/ electronic filing</li>
<li>Real Time utilization</li>
<li>Emerald Website Design service</li>
<li>Agency Revolution Internet marketing</li>
</ul>
</li>
<li>Reference resources
<ul>
<li>PIA website—<em>Think PIA first </em></li>
<li>PIA National</li>
<li>Insurance Department websites</li>
<li>Department of Motor Vehicles</li>
<li>National Traffic Safety Council</li>
<li>Glossaries of insurance terms</li>
</ul>
</li>
</ul>
</nav>
Here is the CSS:
nav li>ul {
/*display: inline-block;*/
margin: 0;
padding: 0;
}
nav .collapsable li>ul {
display: none;
}
nav li>ul::before {
content: " ";
}
nav li>ul::after {
content: " ";
}
nav li:hover>ul {
display: inline-block;
}
nav li>ul>li {
/*display: inline-block;*/
}
nav li>ul>li+li::before {
content: " ";
}
I want to display 7-9 html links in one line, but whenever I add another link, the last link goes down and forms another row. I want to put them in one line.
like
<link1> <link2><link3><link4><link5><link6><link7>
<li>HOME
<li>Check In</li>
<li>Check Out</li>
<li>Re-Issue</li>
<li><!--movies er drop down-->
Student<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Approve</li>
<li>Fine</li>
<li>Check List</li>
<li>Department</li>
</ul>
</li>
<li>Faculty<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Books issued</li>
<li>Search</li>
</ul>
</li>
<li> SEARCH<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Student</li>
<li>Faculty</li>
<li>Books</li>
<li>History</li>
</ul>
Use these styles:
ul {
white-space: nowrap;
}
li {
vertical-align: top;
display: inline-block;
padding: 0em 0.5em;
}
.sub-menu li {
display: block;
}
Fiddle
In the list that you put them in make a class and then in css add to the class: display:inline;
example: http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/
<ul class="links">
Google
Google1
Google2
Google3
</ul>
Following is my listing:-
<div class="box">
<div class="box-heading">Menu</div>
<div class="box-content">
<ul>
<li>My Account</li>
<li>Edit Account</li>
<li>Password</li>
<li>Contact Admin</li> <!--display none-->
<li>Address Books</li><!--display none-->
<li>Emails & Notifications</li><!--display none-->
<li>Order Now</li>
<li>Order History</li><!--display none-->
<li>Pending Orders</li>
<li>Current Orders</li>
<li>Completed Orders</li>
<li>Downloads</li>//display none
<li>Newsletter</li>//display none
<li>Logout</li>
</ul>
</div>
</div>
I dont want to display the following list they are:-
Contact Admin
Address Books
Emails & Notifications
Order History
Downloads
Newsletter
using css how can i display the above list as none
THanks in advance.
The most flexible solution is to add a class to the list items you want to hide, e.g.:
<li>My Account</li>
<li>Edit Account</li>
<li>Password</li>
<li class="foo">Contact Admin</li> <!--display none-->
<li class="foo">Address Books</li><!--display none-->
<li class="foo">Emails & Notifications</li><!--display none-->
<li>Order Now</li>
<li class="foo">Order History</li><!--display none-->
<li>Pending Orders</li>
Then
.foo {
display: none;
}
Live Example
But if you can't do that, you pretty much have no choice but to use :nth-child (counting starts with 1, unlike most programming stuff):
ul li:nth-child(4),
ul li:nth-child(5),
ul li:nth-child(6),
ul li:nth-child(8) {
display: none;
}
Live Example
That would, of course, hide those list items in every list, so you'll want to lock that down a bit more specifically.
The problem with doing it this way is, of course, that if you modify the list later, you have to change those indexes. It's fragile. Using a class is more robust.
CSS:
.hidden
{
display:none;
}
HTML:
<li class="hidden">Contact Admin</li> <!--display none-->
<li class="hidden">Address Books</li><!--display none-->
<li class="hidden">Emails & Notifications</li><!--display none-->
<li>Order Now</li>
<li class="hidden">Order History</li><!--display none-->
If you want to use in-line css you should add a style to your ul element:
<li style="display:none;">
otherwise you use a class and setting the property display:none;
<style>
.hide{
display:none;
}
</style>
<li class="hide">
I have a question about my sitemap if you look at the code you see ul and li. But every UL is below the other and i want it to be side by side. Every new UL side by side. How doe i do this? Working with first-child? ( the sitemap is inside my )
Sitemap
<ul>
<li>Opleiding</li>
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul>
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
This is my CSS
footer{
width: 100%;
position: absolute;
top: 317%;
left: -10%;
background: lightgrey;
margin:10%;
padding: 2%;
}
Try display inline-block or float left on the ul's you want side by side. I recommend adding classes to make the styling easier
HTML:
<ul>
<li>Opleiding</li>
<ul class="sitemap">
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul class="sitemap">
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul class="sitemap">
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul class="sitemap">
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
CSS:
footer .sitemap {
display: inline-block;
OR
float: left;
}
Well, for starters your markup is invald. If you want to nest ULs inside of another UL, it needs to be inside of an LI
<ul>
<li>Title
<ul>
<li>Sub-Title</li>
</ul>
</li>
</ul>
From there, you probably just need something like this:
footer > ul > li {
float:left;
width:50%;
}
http://jsfiddle.net/fTCY5/
I'm redoing a html table into a list.
It now looks like this:
<ul>
<li>Some fruits
<ul>
<li>2013
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>2012
<ul>
<li>Banana</li>
</ul>
</li>
<li>2011
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>2009
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm trying to figure out how to make the first entry in the sublist to align horizontally with the year. Like this:
2011 Lemon
Orange
Plum
The nested elements are doing my head in and I'm stuck. I have a feeling this will involve the display type of the elements and some floating. Any ideas? Fiddle here: http://jsfiddle.net/HUH62/4/
Thanks.
If I understood correctly, here's the same fiddle modified according to what you are trying to accomplish: fiddle.
I added some classes in order to make the CSS more readable and wrapped the "subtitle" of each section in a div so that floatiing could be applied to them.
I also removed the colors, since I interpreted they were added only for visualizing the elements.
CSS
h4 {
margin: 0px;
padding: 0px;
float:left;
}
ul {
list-style: none outside none;
padding: 0;
}
ul li ul li ul {
float:left;
margin-left: 10px;
}
ul li {
clear:both;
}
HTML
<ul>
<li>Some fruits
<ul>
<li>
<h4>2013</h4>
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>
<h4>2012</h4>
<ul>
<li>Banana</li>
</ul>
</li>
<li>
<h4>2011</h4>
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>
<h4>2009</h4>
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>