CSS Navbar Menu 4th level

HTML & CSS
1

I need help with a navigation bar, I have been trying to work on a navigation bar, however I have run into a problem, I have a 3 level Navigation bar, however I cannot add a 4th level, can anyone help me out, I can’t figure it out,
CSS coding:

#nav {
        float: left;
        font: bold 12px Arial, Helvetica, Sans-serif;
        border: 1px solid #121314;
        border-top: 1px solid #2b2e30;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
}

#nav ul {
        margin:0;
        padding:0;
        list-style:none;
}

#nav ul li {
        float:left;
}

#nav ul li a {
        float: left;
        color:#d4d4d4;
        padding: 10px 20px;
        text-decoration:none;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
        background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav li ul {
        background:#3C4042;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        -webkit-border-radius: 0 0 10px 10px;
        left: -999em;
        margin: 35px 0 0;
        position: absolute;
        width: 160px;
        z-index: 9999;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
        border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 120px;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
}
#nav ul li a:hover,
#nav ul li:hover > a {
        color: #252525;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover, 
#nav ul li li:hover > a  {
    color: #2c2c2c;
        background: #5C9ACD;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
        background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
        background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
        border-bottom: 1px solid rgba(0,0,0,0.6);
        border-top: 1px solid #7BAED9;
        text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}



#nav li:hover ul {
        left: auto;
}


#nav li li ul {
        margin: -1px 0 0 160px;
        -webkit-border-radius: 0 10px 10px 10px;
        -moz-border-radius: 0 10px 10px 10px;
        border-radius: 0 10px 10px 10px;
        visibility:hidden;
}

#nav li li:hover ul {
        visibility:visible;
}
#nav ul ul li:last-child > a {
        -moz-border-radius:0 0 10px 10px;
        -webkit-border-radius:0 0 10px 10px;
        border-radius:0 0 10px 10px;
}

#nav ul ul ul li:first-child > a {
        -moz-border-radius:0 10px 0 0;
        -webkit-border-radius:0 10px 0 0;
        border-radius:0 10px 0 0;
}

HTML5 Coding:

    <!DOCTYPE html>
    <html>
    <head>
    <!--
    Author: Austin Davis
    Period: 4th
    Table: Table 3
    -->
    <title>Aircraft of the World</title>
    <meta charset="UTF-8"/>
    <link href="navigationbar.css" type="text/css" rel="stylesheet"></link>
    <link href="design.css" type="text/css" rel="stylesheet"></link>
    </head>
    
    <body>
    <div id="nav"> 
    <ul style="margin-width:0px; margin-height:0px;"> 
    	<li><a href="#">Home</a></li> 
    	<li><A href="#">WWI</a>
    		<ul>
    			<li><a href="WWI.html">German</a>
    				<ul>
    					<li><a href="#">Fockre Wolfe</a></li>
    					<li><a href="head.html#meta">Mechershmittz</a></li>
    				</ul>
    		</ul>
    	<li><a href="#">WWII</a>
    		<ul>
    			<li><a href="#">United States</a>
    				<ul>
    				</ul>
    			</li>
    			<li><a href="#">British</a></li>
    			<li><a href="#">Germany</a></li>
    			<li><a href="#">Italy</a>
    				<ul>
    				</ul>
    			</li>
    			<li><a href="#">Japan</a></li>
    			<li><a href="#">Russia</a></li>
    		</ul>
    	<li><a href="#">Cold War</a>
    		<ul>
    			<li><a href="#">United States</a></li>
    			<li><A href="#">Russia</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Modern Day</a></li>
    </ul> 
    </div> 
    </body>
    </html>

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

2

Can you put this on a jsfiddle? Easier to play with. I’m on a chromebook and can’t easily code.

I do question why you need 4 levels of dropdown but I assume you know what you are doing.

1 Like
3

I would, however it says to insert external css, I need a url, the CSS isn’t uploaded to a server yet. The 4 th level is this is going to be an aircraft website, First level, the era, second level the Country Third level the Company 4th level the plane.

4

You don’t need to upload any files. Copy and paste the HTML/CSS in the respective planes.

5

Alright, here is the link to the coding HTML and CSS

6

I enjoy jsfiddle collab :slight_smile: . I fixed it yet you seem to have ran off as soon as I did it. I have to head to bed now so unless you come back in a minute or two, I’ll be off. It’s all working now. Your issue was not specifying the different levels of hover (and resetting the previous hovers upon that.)

7

Any possible way, you can send me the CSS code that is updated, allowing for a 4th level?

8

It’s in the CSS pane of hte JSfiddle. Copy it.

1 Like
9

Alright, it works fine, thank you for the help :smile:

10

Glad I could be of some help :slight_smile: . You had the concept of it but I guess you got mind-effed when you thought about how to apply it to more layers. You got 2 layers down!

Goodluck.

1 Like
11

Yeah, I got a little stressed, truth be told I’m new to CSS and HTML5, I am only in highschool, and I’m taking a class on html5 and css, but again thank you for the help :smiley: if you want, when and if I ever upload this site to a server, I can give you a little credit in helping me in the development of the navbar.

12

I started in high school (15. I’m 23 now). Definitely a great time to start. Keep at it. I love doing web coding for a living. Keep at it if you like it. Make a career out of it. I strayed from web development as a career for about 2 years but I came back and never looked back. Love every day of my job.

No need to give me credit. It was such minor work that I don’t want any credit. Besides, I give help on these forums (along with 99% of other members) because we just want to help others with their issues. It’s frustrating not being able to solve a code problem and you want it fixed ASAP. I know that feeling. So I lend a hand :slight_smile: .

Alright now I’m REALLY headed to bed.

1 Like
13

Hello again, I’m really sorry to bother you, but my flashdrive went corrupt, and even though I could have sworn I had a back up folder of it, I can’t find it, so I lost the updated, CSS, I need your help again with correcting it…|

14

You need to understand the concepts that I tried teaching earlier. You need to specify rules for each level of dropdown. Please take this code and understand what level of dropdown this is selecting with each rule

#nav li:hover li ul{left:-999rem;}
#nav li li:hover ul{left:0;}
#nav li:hover li li ul{left:-999rem;}
#nav li li:hover li ul{left:-999rem;}
#nav li li li:hover ul{left:0;}
15

Lets see, we were talking about this in class not too long ago
the rule is the entire line
The selector is the #Nav li:hover li ul, etc.
The Declaration is the left:#;
The property is left
The value is the number,
I understand the concept, and all, I can’t really explain it, I’m bad at explaining…
But again, thank you for helping me again :smile:

16

Ah, ok it appears you are still in the process of learning CSS. Dropdowns are slightly complicated for beginners, and adding FOUR levels to it certainly does not help.

I’d revisit this when you become more comfortable with CSS. Perhaps attempt this yourself.

Long story short, your CSS is targeting ALL menus. Something like

#nav li ul{}

You can see why this targets every level of the dropdopwn? All this code needs to run is a random ul inside of a random li inside of #nav . It doesn’t matter if it’s #nav li li ul or #nav li ul or #nav li li li li li li li ul, this code will still run.

Good luck with your training, young tadpole.

1 Like
17

I think I understand, so as I stated earlier, the # nav li ul is the selector part, so basically the CSS targets every Unordered list and list item as long as it is inside a nav, and thank you, I should be taking the final class of Web coding next year in which at the end I’ll end up taking the CIW certification, I’m going for 3 different certifications, the CIW, the Engineering Certification, and the A+ Certification which deals with networking and Hardware of Computers, I’ll be taking the tests for the Engineering and A+ this year, the a+ is in two weeks, and the Engineering is sometime in May.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.