Select all Classes except children of ID - html

Here is my html:
<ul id="list1">
<li class="elem_tec">
<li class="elem_tec">
</ul>
<ul id="list2">
<li class="elem_tec">
<li class="elem_tec">
</ul>
<ul id="list3">
<li class="elem_tec">
<li class="elem_tec">
</ul>
I'd like to select all .elem_tec but the elem_tec elements in #list1.
I have tried: :not(#list1) .elem_tec but it does not work.
Could you help me?
Thanks


Try this:
CSS
ul:not(#list1) li.elem_tec{
color: red;
}
DEMO HERE


You should try like this and close li also -
ul:not(#list1) li{
color: green;
}
<ul id="list1">
<li class="elem_tec"> 90 </li>
<li class="elem_tec"> 90 </li>
</ul>
<ul id="list2">
<li class="elem_tec"> 90 </li>
<li class="elem_tec"> 90 </li>
</ul>
<ul id="list3">
<li class="elem_tec"> 90 </li>
<li class="elem_tec">90 </li>
</ul>

Related

Creating a Static/Fixed Nav Bar with Only HTML

hope you're doing well.
My boss recently asked me to rebuild the nav bar on our site.
He wants to move away from our current method of just having the nav code on each and every web page - so we can make edits to the nav bar periodically that will be automatically implemented across the website.
He built our website back in the early days of web dev, and as such it is basically an HTML animal that really just gets the job done (and has for years) but is not responsive or pretty.
He's adamantly against using any sort of PHP or JS, since my initial thought was a JQuery script to grab a nav.html file on each page. Bummer!
That being said, does anyone know how I can essentially create the same results? Having a singular file or block of code that can be changed and then reflected on all pages across our site , using only HTML?
Thanks in advance everyone!
Here is the code we currently have copied to all of our pages, which was created long ago:
<div id="navbox">
<!----BEGIN NAV----->
<!-- #BeginLibraryItem "/library/mainsite_nav.lbi" -->
<link href="css_files/nav_control_main2.css" rel="stylesheet" type="text/css" />
<ul id="nav_horiz">
<li class="navbar"></li>
<li class="navbar">Products
<ul>
<li class="navdrop">Underwater Lasers
<ul class="flyout">
<li class="navdrop">Underwater Scanners</li>
<li class="navdrop">Subsea Scanners</li>
<li class="navdrop">Nuclear Underwater Scanner</li>
<li class="navdrop">Laser Scanner PanTilt Arm</li>
<li class="navdrop">Angle/Distance Scanner</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Nuclear Inspection
<ul class="flyout1">
<li class="navdrop">Core Verification System</li>
<li class="navdrop">Nuclear Underwater Scanner</li>
<li class="navdrop">Inspector In-Tank Robot</li>
<li class="navdrop">Upper RPV Measuring Robot</li>
<li class="navdrop">Restricted Area Access Control</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Robotics<a href="robot_inspector_land.html">
<ul class="flyout2">
<li class="navdrop">Inspector In-Tank Robot</li>
<li class="navdrop">Surveyor Inspection Robot</li>
<li class="navdrop">Press Die Vision System</li>
<li class="navdrop">Upper RPV Measuring Robot</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Machine Vision
<ul class="flyout3">
<li class="navdrop">Line & Area Scanning</li>
<li class="navdrop">Non-Contact Gauging</li>
<li class="navdrop">Surface Defects</li>
<li class="navdrop">Pattern Matching</li>
<li class="navdrop">Assembly Verification</li>
<li class="navdrop"></li>
<li class="navdrop">FME Console</li>
<li class="navdrop">QuadCam Zoned Surveillance</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navbar">Industries
<ul>
<li class="navdrop">Nuclear Power</li>
<li class="navdrop">Oil and Gas</li>
<li class="navdrop">Marine</li>
<li class="navdrop">Automotive</li>
<li class="navdrop">Bottling & Canning</li>
<li class="navdrop">Aerospace</li>
<li class="navdrop">Other Industries</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navbar3">Technologies
<ul>
<li class="navdrop">Underwater Laser Scanning</li>
<li class="navdrop">Nuclear Core Validation</li>
<li class="navdrop">Inspector In-Tank Robot</li>
<li class="navdrop">Line & Area Scanning</li>
<li class="navdrop">Non-Contact Gauging</li>
<li class="navdrop">Surface Defects</li>
<li class="navdrop">Pattern Matching</li>
<li class="navdrop">Assembly Verification</li>
<li class="navdrop">Robotics<a href="robot_inspector_land.html">
<li class="navdrop"> </li>
</ul>
</li>
<li class="navbar">Newsroom</li>
<li class="navbar">About Us
<ul>
<li class="navdrop">Core Competence</li>
<li class="navdrop">Company Background</li>
<li class="navdrop">Academic Website</li>
<li class="navdrop">Careers at Newton</li>
<li class="navdrop"> </li>
</ul>
</li>
<li class="navdrop">Contact Us</li>
</ul><!-- #EndLibraryItem -->
</div>

add space between ul and li tag css inline

I've the following code with nested list items as shown below:
<ul style={{padding-top: '15px'}}>
<li style={{margin-left: '20px'}}>First Services</li>
<ul style={{margin-left: '30px'}}>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get4</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul style={{margin-left: '30px'}}>
<li>get6</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get7</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get8</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get9</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get10</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get11</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get12</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul style={{margin-left: '30px'}}>
<li>Workflow for someone </li>
</ul>
</ul>
My Goal:
I want some space between the following:
1) First Services and get1
2) get5 and Second Services
3) Second Services and get6
4) get13 and Workflows
5)Workflows and Workflow for someone
How should I go about it? Is adding an empty paragraph tag <p></p> a good idea between each of the above 5 things?

if you mean horizontal space (white space), use: &nbsp ;
if you mean vertical space, try: (CSS property) line-height, padding
or margin.
you might want to remove this from being inline and use your linked stylesheet instead as it might cause issues with your styling.

You should use classes for this. Right now, the simplest way is to wrap a div around your whole list, apply a class to it (in my example I used parent_class) and use this selector: div.parent_class > ul >li It only selects the li elements of the first level ul:
div.parent_class > ul >li {
margin-top: 10px;
margin-bottom: 10px;
}
<div class="parent_class">
<ul style="padding-top:15px;">
<li style="margin-left:20px">First Services</li>
<ul style="margin-left:30px">
<li>get1</li>
</ul>
<ul style="margin-left:30px">
<li>get2</li>
</ul>
<ul style="margin-left:30px">
<li>get3</li>
</ul>
<ul style="margin-left:30px">
<li>get4</li>
</ul>
<ul style="margin-left:30px">
<li>get5</li>
</ul>
<li style="margin-left:20px">Second Services</li>
<ul style="margin-left:30px">
<li>get6</li>
</ul>
<ul style="margin-left:30px">
<li>get7</li>
</ul>
<ul style="margin-left:30px">
<li>get8</li>
</ul>
<ul style="margin-left:30px">
<li>get9</li>
</ul>
<ul style="margin-left:30px">
<li>get10</li>
</ul>
<ul style="margin-left:30px">
<li>get11</li>
</ul>
<ul style="margin-left:30px">
<li>get12</li>
</ul>
<ul style="margin-left:30px">
<li>get13 </li>
</ul>
<li style="margin-left:20px">Workflows</li>
<ul style="margin-left:30px">
<li>Workflow for someone </li>
</ul>
</ul>
</div>

.example-list {
margin:0px;
}
.example-list > li {
margin: 30px 0px;
}
<ul class="example-list">
<li>First Services</li>
<ul>
<li>get1</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get2</li>
</ul>
<ul style={{margin-left: '30px'}}>
<li>get3</li>
</ul>
<ul>
<li>get4</li>
</ul>
<ul>
<li>get5</li>
</ul>
<li style={{margin-left: '20px'}}>Second Services</li>
<ul>
<li>get6</li>
</ul>
<ul>
<li>get7</li>
</ul>
<ul>
<li>get8</li>
</ul>
<ul>
<li>get9</li>
</ul>
<ul>
<li>get10</li>
</ul>
<ul>
<li>get11</li>
</ul>
<ul>
<li>get12</li>
</ul>
<ul>
<li>get13 </li>
</ul>
<li style={{margin-left: '20px'}}>Workflows</li>
<ul>
<li>Workflow for someone </li>
</ul>
</ul>

I would do the following (or something similar - keep in mind it's not good practice to have <ul> as a child of another <ul> - you can validate here: http://validator.w3.org/). Remove the inline styles, you'll deal with A LOT of headaches later if you write you CSS as you have. Set classnames for the bits you want extra space for (you can edit the {{20px}} below for how much space you want (or if you want left/right margins, you can edit the whole rule).
<style>
.title {
margin-left: 20px;
}
.top-list {
padding-top: 15px;
}
.top-list .spacer-top {
margin-top: {{20px}};
}
.top-list > li > ul {
margin-left: 30px;
}
</style>
<ul class="top-list">
<li class="title">First Services</li>
<li class="spacer-top">
<ul>
<li>get1</li>
</ul>
</li>
<li>
<ul>
<li>get2</li>
</ul>
</li>
<li>
<ul>
<li>get3</li>
</ul>
</li>
<li>
<ul>
<li>get4</li>
</ul>
</li>
<li>
<ul>
<li>get5</li>
</ul>
</li>
<li class="title" class="spacer-top">Second Services</li>
<li class="spacer-top">
<ul>
<li>get6</li>
</ul>
</li>
<li>
<ul>
<li>get7</li>
</ul>
</li>
<li>
<ul>
<li>get8</li>
</ul>
</li>
<li>
<ul>
<li>get9</li>
</ul>
</li>
<li>
<ul>
<li>get10</li>
</ul>
</li>
<li>
<ul>
<li>get11</li>
</ul>
</li>
<li>
<ul>
<li>get12</li>
</ul>
</li>
<li>
<ul>
<li>get13 </li>
</ul>
</li>
<li class="title spacer-top">Workflows</li>
<li class="spacer-top">
<ul>
<li>Workflow for someone </li>
</ul>
</li>
</ul>

use li element as a button

I have ul elements like below in my html
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
</ul>
Now I want to use a button just below this ul. But when I put something like the code below it breaks.
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</input>
So is there any way I can put my button as a li element in order to get the exact same look(CSS).
Here's the fiddle for the same. The button should look like the ul element

Here is the code just add a button in a "li" element and remove bullet.
<ul class="nav" id="loadCategories">
<li class="sub-menu">
Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">
Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="no-bullet">
<button type="button" class="signout_btn" id="btnSignOut">Sign Out</button>
</li>
</ul>
Also make the list-style-type to none
.no-bullet{
list-style-type: none
}
Here is a fiddle check it out.Hope it helps!! link

Did you try width=100% and height=100% with set parameters for the list?

you can try this
<ul class="nav" id="loadCategories">
<li><input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</li>
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
</ul>

<input> elements are empty (you shouldn't use end tags). I prefer to use <button> elements:
<button class="signout_btn" id="btnSignOut">Sign Out</button>

Could you please check with this code?
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">
<button class="signout_btn" id="btnSignOut" style="background: none;border:none;color: #fff;margin-left: 20px;">Sign Out</button>
</li>
</ul>
The output will be:

Please try below code snippet..
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">
</ul>
CSS:
.signout_btn{
text-transform: uppercase;
outline: none;
border: 0;
background-color: #673a9a;
line-height: 40px;
color: #fff; display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
JAVASCRIPT:
$( ".menu" ).click(function() {
$('.slide-menu').addClass('active');
$('.slide-wrapper').addClass('active');
});
$( "li.sub-menu" ).click(function() {
$(this).toggleClass('act');
$(this).find('ul').slideToggle();
});

CSS/HTML menu not showing correctly

I'm trying to create a 2-level menu where level 1 is displayed horisontally and level 2 is displayed vertically. No fancy folding, just a plain sitemap'ish menu.
How it looks now:
How I would like it to look:
my html:
<nav class="menu">
<ul class="lvl1">
<li class="lvl1">Lorem</li>
<ul class="lvl2">
<li class="lvl2">Vino</li>
<li class="lvl2">Fino</li>
<li class="lvl2">Dolce</li>
<li class="lvl2">Vita</li>
<li class="lvl2">Mamma Mia</li>
</ul>
<li class="lvl1">Ipsum</li>
<ul class="lvl2">
<li class="lvl2">Vino</li>
<li class="lvl2">Fino</li>
<li class="lvl2">Dolce</li>
<li class="lvl2">Vita</li>
<li class="lvl2">Mamma Mia</li>
</ul>
<li class="lvl1">Dolor</li>
<ul class="lvl2">
<li class="lvl2">Vino</li>
<li class="lvl2">Fino</li>
<li class="lvl2">Dolce</li>
<li class="lvl2">Vita</li>
<li class="lvl2">Mamma Mia</li>
</ul>
<li class="lvl1">Sit</li>
<ul class="lvl2">
<li class="lvl2">Vino</li>
<li class="lvl2">Fino</li>
<li class="lvl2">Dolce</li>
<li class="lvl2">Vita</li>
<li class="lvl2">Mamma Mia</li>
</ul>
<li class="lvl1">Amet</li>
<ul class="lvl2">
<li class="lvl2">Vino</li>
<li class="lvl2">Fino</li>
<li class="lvl2">Dolce</li>
<li class="lvl2">Vita</li>
<li class="lvl2">Mamma Mia</li>
</ul>
</ul>
</nav>
my css:
.menu ul {list-style: none; }
ul.lvl1 {display: table; }
li.lvl1 {display: table-cell; font: bold 1.8em BlenderHeavy; color: white; }
ul.lvl2 {display: block; }
li.lvl2 {display: block; font: normal 1.2em BlenderHeavy; color: silver; }
This is simple, I suppose, but I am a css rookie.

Your HTML is invalid.
Try it:
.menu ul {
list-style: none;
}
ul.lvl1 {
display: table;
}
li.lvl1 {
display: table-cell;
font: bold 1.8em BlenderHeavy;
color: white;
}
ul.lvl2 {
display: block;
}
li.lvl2 {
display: block;
font: normal 1.2rem BlenderHeavy;
color: silver;
}
ul ul {
padding: 0;
}
<nav class="menu">
<ul class="lvl1">
<li class="lvl1">Lorem
<ul class="lvl2">
<li class="lvl2">Vino
</li>
<li class="lvl2">Fino
</li>
<li class="lvl2">Dolce
</li>
<li class="lvl2">Vita
</li>
<li class="lvl2">Mamma Mia
</li>
</ul>
</li>
<li class="lvl1">Ipsum
<ul class="lvl2">
<li class="lvl2">Vino
</li>
<li class="lvl2">Fino
</li>
<li class="lvl2">Dolce
</li>
<li class="lvl2">Vita
</li>
<li class="lvl2">Mamma Mia
</li>
</ul>
</li>
<li class="lvl1">Dolor
<ul class="lvl2">
<li class="lvl2">Vino
</li>
<li class="lvl2">Fino
</li>
<li class="lvl2">Dolce
</li>
<li class="lvl2">Vita
</li>
<li class="lvl2">Mamma Mia
</li>
</ul>
</li>
<li class="lvl1">Sit
<ul class="lvl2">
<li class="lvl2">Vino
</li>
<li class="lvl2">Fino
</li>
<li class="lvl2">Dolce
</li>
<li class="lvl2">Vita
</li>
<li class="lvl2">Mamma Mia
</li>
</ul>
</li>
<li class="lvl1">Amet
<ul class="lvl2">
<li class="lvl2">Vino
</li>
<li class="lvl2">Fino
</li>
<li class="lvl2">Dolce
</li>
<li class="lvl2">Vita
</li>
<li class="lvl2">Mamma Mia
</li>
</ul>
</li>
</ul>
</nav>

edited your code in this Fiddle
use float:left will resolve your problem
hope this will help

SlickNav not correctly reading my nested structure

I'm using slickNav and its not properly reading my nested list.
This page is a repository for NPCS for a Table top RPG.
The top level is general information and organizes NPCs by location.
The second level organizes NPCs by rarity level
and the third level is the NPC's themselves.
Now interestingly, slickNav displays levels 1 and 2 just fine, but level 3 opens up to invisible text. I say invisible text because the amount of space that is revealed by the dropdown is correct.
This GIF shows what i'm talking about.
Observe how I click on Domestic animals, according the code below you can this is a long list of NPCs. The space SlickNav drops down is large.
Then observe how I click under Eol, this part of the site is undeveloped still, and so its only list item is " coming soon". Accordingly slickNav only drops down a little to make enough space for that.
According to http://slicknav.com/, it seems ive correctly nested my structure and labeled the menu as class="menu".
Its worth noting that on other parts of the site this menu works fine, but the menu's on those parts of the site are maximum of two levels deep.
Here is my HTML: Warning this is a big menu
<div class ="menu_wrap">
<nav id = "navMenu">
<ul class = "menu clearfix">
<li>Home
<ul class='subMenu1'>
<li id="instr">Instructions</li>
</ul>
</li>
<li>General
<ul class="subMenu1" >
<li>Domestic Animals
<ul class="subMenu2">
<li id="da1">Camel</li>
<li id="da2">War Camel</li>
<li id="da3">Druldon</li>
<li id="da4">Donkey</li>
<li id="da5">Pony</li>
<li id="da6">Draft Horse</li>
<li id="da7">Saddle Horse</li>
<li id="da8">Light War Horse</li>
<li id="da9">Heavy War Horse</li>
<li id="da10">Chariot Horse</li>
<li id="da11">Voran War Horse</li>
<li id="da12">Elven Narathi</li>
<li id="da13">Mountain Ram</li>
<li id="da14">War Elephant</li>
<li id="da15">War Mammoth</li>
<li id="da16">Dovashi Mastiff</li>
</ul>
</li>
<li>Common NPCs
<ul class="subMenu2">
<li id="guard1">Guard: Dovashi</li>
<li id="guard2">Guard: Dwarven</li>
<li id="guard3">Guard: Elven</li>
<li id="guard4">Guard: Gamoran</li>
<li id="guard5">Guard: Salatai</li>
<li id="guard6">Guard: Voran</li>
<li id="guard7">Guard: Dark Elf</li>
<li id="c5">Gnoll</li>
<li id="c6">Grimlock</li>
<li id="c11">Roper</li>
<li id="c12">Skeleton</li>
<li id="c13">Giant Spider</li>
<li id="c15">Zombie</li>
</ul>
<li>Uncommon NPCs
<ul class= "subMenu2">
<li id="uc5">Fire Child</li>
<li id="uc6">Ghoul</li>
<li id="uc11">Rakasa</li>
</ul>
</li>
<li>Rare NPCs
<ul class= "subMenu2">
<li id="r1">Adherer</li>
<li id="uc24">Arcane</li>
<li id="r3">Bane Dead</li>
<li id="r5">Fire Lord</li>
<li id="eleGen">Generic Elementalist</li>
<li id="necGen">Generic Necromancer</li>
<li id="illGen">Generic Illusionist</li>
<li id="cleGen">Generic Cleric</li>
<li id="r8">Radasai Warrior</li>
<li id="r9">Elemental(Fire)</li>
<li id="r10">Elemental(Water)</li>
<li id="r11">Elemental(Earth)</li>
<li id="r12">Elemental(Air)</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="subMenu2">
<li id="vr1">Arch Shadow</li>
<li id="vr3">Gorgon</li>
<li id="vr4">Illithid</li>
<li id="new3">Vampire</li>
<li id="new4">Were Wolf</li>
</ul>
</li>
</ul>
</li>
<li id ="world_drop"> Wol
<ul class ="subMenu1" >
<li>Common NPCs
<ul class="subMenu2">
<li id="c1">Cave Bear</li>
<li id="c2">Dire Wolf</li>
<li id="c3">Echuyan</li>
<li id="c4">Goblin</li>
<li id="c7">Voran Raider</li>
<li id="c8">Dovashi Ronin</li>
<li id="c9">Naga</li>
<li id="c10">Orc</li>
<li id="c14">Umber Hulk</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="subMenu2">
<li id="uc1">Ant (Giant)</li>
<li id="uc2">Alaghi</li>
<li id="uc3">Centaur</li>
<li id="uc4">Dire Boar</li>
<li id="uc7">Ogre</li>
<li id="uc8">Orc(Black)</li>
<li id="uc9">Orc (Shaman)</li>
<li id="uc10">Owl Bear</li>
<li id="uc12">Rastipede</li>
<li id="uc13">Troll</li>
<li id="new1">Young Black Wyvern</li>
</ul>
</li>
<li>Rare NPCs
<ul class="subMenu2">
<li id="r2">Ant Lion( giant)</li>
<li id="new2">Adult Black Wyvern</li>
<li id="r4">Basilisk</li>
<li id="r6">Hill Giant</li>
<li id="r7">Naga Elite</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="subMenu2">
<li id="vr2">Dray</li>
<li id="vr5">kalin</li>
<li id="vr6">Naga Queen</li>
<li id="vr7">Minotaur</li>
</ul>
</li>
</ul>
</li>
<li> Nol
<ul class="subMenu1">
<li>Common NPCs
<ul class="subMenu2">
<li id="c16">Abrian</li>
<li id="c17">Cave Bear (Polar)</li>
<li id="c18">Dwarven Bandits</li>
<li id="c19">Ettin</li>
<li id="c20">Frost Orc</li>
<li id="c21">Tus'Khul</li>
<li id="c22">Icemaw Raiders</li>
<li id="c23">Kenku</li>
<li id="c24">Kobold</li>
<li id="c25">Tundra Stag</li>
<li id="c26">Wight</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="subMenu2">
<li id="uc14">Bainligor</li>
<li id="uc15">Ettin (Mage)</li>
<li id="uc16">Blue Orc</li>
<li id="uc17">Goatmen</li>
<li id="uc18">Ice Golem</li>
<li id="uc19">Rogue ClockWork</li>
<li id="uc20">Snow Serpent</li>
<li id="uc21">Ice Wyvern(Young)</li>
<li id="uc22">Voldun</li>
</ul>
</li>
<li>Rare NPCs
<ul class="subMenu2">
<li id="r13">Aviarag</li>
<li id="r14">Crystal Hydra</li>
<li id="r15">Dark Hood</li>
<li id="r16">Derro Warrior</li>
<li id="r17">Frost Giant</li>
<li id="r18">Gargoyle</li>
<li id="r19">Ice Wyvern(Adult)</li>
<li id="r20">Mammoth</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="subMenu2">
<li id="vr8">White Dragon</li>
<li id="vr9">Pit Horror</li>
<li id="vr10">Frozen Men</li>
<li id="vr11">Vaporighu</li>
</ul>
</li>
</ul>
<li id ="indie_drop"> Sol
<ul class="subMenu1">
<li>Common NPCs
<ul class="leftSubMenu2">
<li id="c27">Cistern Fiend</li>
<li id="c28">Dire Crocodile</li>
<li id="c29">Dire Lion</li>
<li id="c30">Gamoran Exiles</li>
<li id="c31">Giant Scorpion</li>
<li id="c32">Myconid</li>
<li id="c33">Sand Bones</li>
<li id="c34">Salatai Bandits</li>
<li id="c35">Shissai half Breed</li>
<li id="c36">Tus-Kowah</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="leftSubMenu2">
<li id="uc23">Amiq-Rasol</li>
<li id="uc25">Beholder-Kin</li>
<li id="uc26">Gremlin</li>
<li id="uc27">Lesser Salamander</li>
<li id="uc28">Mummy</li>
<li id="uc29">Scrab</li>
<li id="uc30">Spell-Sword Merc.</li>
<li id="uc31">Shissai Pure Blood</li>
<li id="uc32">Will-O-Wisp</li>
</ul>
</li>
<li>Rare NPCs
<ul class="leftSubMenu2">
<li id="r21">Assimar</li>
<li id="r22">Elephant</li>
<li id="r23">Hattori</li>
<li id="r24">Roc</li>
<li id="r25">Sand-Men</li>
<li id="r26">Skordi</li>
<li id="r27">Tortle</li>
<li id="r28">Winged Snake</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="leftSUbMenu2">
<li id="vr12">Beholder</li>
<li id="vr13">Black Dragon</li>
<li id="vr15">Djinn</li>
<li id="vr14">Mummy Lord</li>
<li id="vr16">Sand Hydra</li>
</ul>
</li>
</ul>
</li>
<li> Eol
<ul class="subMenu1">
<li>Common NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
</li>
<li>Rare NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
</li>
<li>Very Rare NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
This is all the CSS associated with the Menu.
Note: This is a simple CSS menu, the submenus are set to display:none and on hover the display is set to block.
All my menus work the same way on other parts of the site. But display being set to none is the only thing I can think of.
#navMenu{
margin:0;
padding: 0;
position: absolute;
line-height: 2em;
top: 28%;
left: 5.1%;
width: 100%;
font-size: 1.2vw;
font-family: verdana,arial,serif;
cursor: pointer;
z-index: 3;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 2vw;
}
#navMenu li{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #999;
padding:.5em;
}
#navMenu ul li {
text-align: center;
text-decoration: none;
height: 1.875em;
width:13.5vw;
display: block;
color: #e0e0da;
background: black;
border-color: #99cdde;
border: 1px solid #99cdde;
}
.subMenu1,.subMenu2{
position: absolute;
display: none;
top: 100%;
left: -.25%; /*this fixes a menu alignment problem */
cursor: pointer;
}
.subMenu2{
position: absolute;
left: 100%;
top: 0%;
overflow-y: auto;
overflow-x:hidden;
height: 30vh;
}
.leftSubMenu2{
position: absolute;
right: 100%;
top: 0%;
overflow-y: auto;
overflow-x:hidden;
height: 30vh;
display: none;
}
#navMenu ul li:hover>ul {
display: block;
}
#navMenu ul li:hover{
transition:all linear .15s;
color: #99cdde;
}