html5 - Can't get last-child with hover to work on nav sub menu -
My range radius on the last option in my sub menu "Get Ready!" Works, but I can not get it to do it only when you hover over it. I have tried to see the last answer, but for my life I can not get it to work. The code is as follows:
HTML:
& lt; Nav> & Lt; Ul & gt; & Lt; Li id = "active" & gt; & Lt; A href = "index.html" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "team.html" & gt; Team & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "trips.html" & gt; Trips & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "availability html" & gt; Availability & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Get ready! & Lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "what_to_bring.html" & gt; Bring what & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "map.html" & gt; Maps & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "gallery.html" & gt; Gallery & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "contact_us.html" & gt; Contact us & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;
CSS:
/ * nav container * / navigation (float: right;) nav ul {status: relative; Display: Inline-Block; Padding: 0 px 20px; List style: None; Background: #dbfffb; border-radius: 10px;} Nav ul li (Status: Relative; Swimming Left;) Neowl UL Lee: Hover {Background : # 80c5ff;} NAL Li Li A, NAUL Lee: Hauv Ul Li {Display: Block; Font-Family: Maven Pro, Myriad Pro, Without-Serif; Text-Decoration: Someone Color; # 181818; padding: 10px 8px; font-size: 0.8 AM; text-transform: uppercase;} nal ul li al [position: absolute; do not display anything; boundary-radius: 0 10 10x x 10px ; Width: 120px; Top: 36px; left: 0 pixel; Z-index: 1000;} Nevala Ul Lee: Hover> UL {display: block; margin: 0; padding: 0;} NAL Lee # Active A , NAL Li Li A: Hover, NAL Lee Li Ul Li & gt; A: Hover {background: # 80c5ff; color: #fff;} Nevala Ul Lee: Hover> Ul li {float: none; Exhibit No area;} Nevala ul li ul li: The last child> One: hover {boundary-radius: 0 10px 10px; }
I believe there is something with CSS that is in the second line from the bottom and bottom line, but I have tried different combinations and to work it Can not get it
Thank you in advance for your help, it would be greatly appreciated!
I have webkit & amp; The Mage Range radius to ensure that all browsers display it properly. It was not working for me in the local environment, but JSFDial displayed it properly.
Neowal ul-ul li: The last child: Mandal {boundary-radius: 0 10 10x x 10px; -Vibit-boundary-radius: 0 10 10x x 10px; -max-boundary-radius: 0 10 10x10px; }
Comments
Post a Comment