I am working on a private project to enhance my knowledge of HTML and CSS. I'm working on creating drop down menus for hyperlinks I have link style, but the drop down list does not appear when I hover over the selection.
- I am using a link from a class which I am taking in school because I have access to the server, they are hosted and I have no server for me.
This first section is HTML for my lists.
& lt; Nav> & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "http://webdev.spsu.edu/~cmilam/public/index.html" & gt; Home page & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Lab 1 link & lt; / A & gt; & Lt; / Li & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "http://webdev.spsu.edu/~cmilam/public/l1p4.html" & gt; Lab 1, Part 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Lab 2 link & lt; / A & gt; & Lt; / Li & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "http://webdev.spsu.edu/~cmilam/public/l2p1.html" & gt; Lab 2, Part 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "http://webdev.spsu.edu/~cmilam/public/l2p2.html" & gt; Lab 2, Part 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "http://webdev.spsu.edu/~cmilam/public/l2p3.html" & gt; Lab 2, Part 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Lab 3 link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; This second section is a CSS for style and hover actions.
nav ul {background: #fefef; Background: Linear shield (top, #FEFEF 0%, #BBBBBB100%); Background: -Mo-linear-shield (top, #tech 0%, #bbbbbb100%); Background: -webkit-linear-shield (top, #tefafe 0%, #bbbbbb100%); Box-Shadow: 0 px 0 px 9 px rgba (0,0,0,0.1.15); Padding: 0 6px; Boundary-radius: 5px; List style: none; Status: Relative; Display: Inline-table; } Nav ul: {content: ""; Clean both; Display area; } Nav ul li {float: left; } NAL Lee Lee: Hover {background: # 4B 545F; Background: Linear-gradient (top, # 4f5964 0%, # 5f6975 40%); Background: -Mo-linear-shield (top, # 4f5964 0%, # 5f6975 40%); Background: -webkit-linear-shield (top, # 4f5964 0%, # 5f6975 40%); } Nav ul li: a {color: #fff; } NALLI {display: block; Padding: 10px 20px; Color: # 757575; Text-decoration: None; } Nav ul ul {background: # 5f6975; Range radius: 0 pixels; Padding: 0; Status: Completed; top 100%; display none; } NAL Ull ul li {Float: none; Border-top: 1px solid # 6b727c; Border bottom: 1px solid # 575f6a; Status: Relative; } NAL Ull ul li {padding: 6px 20px; Color: #fff; } NAV Ul ULL: Hover {background: # 4B 545F; } Nevala Ull Lee: Hover & gt; Ul {display: block; } Nevala Ull Ul UL Status: Completed; Left: 100%; Top: 0; } Can someone help me choose why do not I see drop down for Lab 1 links and Lab 2 links when I hover over them?
Correct your html like this
& Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "http://webdev.spsu.edu/~cmilam/public/index.html" & gt; Home page & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Lab 1 link & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "http://webdev.spsu.edu/~cmilam/public/l1p4.html" & gt; Lab 1, Part 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Lab 2 link & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "http://webdev.spsu.edu/~cmilam/public/l2p1.html" & gt; Lab 2, Part 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "http://webdev.spsu.edu/~cmilam/public/l2p2.html" & gt; Lab 2, Part 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "http://webdev.spsu.edu/~cmilam/public/l2p3.html" & gt; Lab 2, Part 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Lab 3 link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; Task belt example
Comments
Post a Comment