CSS3 - HTML Navlist background issue -
I am currently in my last year of high school and I need to create an original website. Although I've hit the wall with my drop-down making shavings, it works very well, but I do not know how to make it that if you scroll to a sub-theme, the hole-opper The whole item is covered in the background of the item.
This sentence was very strange, I am quite new to it.
I have used this whole thing to sketch the problem.
On the second list item, you can see that the first two lists
check the jsfiddle link for the best example of my problem.
This is HTML:
& lt; Div class = "navlist" & gt; & Lt; Ul id = "menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item 2 & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Subtitle 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Subtitle 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Creating an example & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item 3 & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Subtitle 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Subtitle 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Subtitle 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Submission 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Subtitle 5 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; And this is CSS:
# menu one {color: # 0070a 2; } #Menu, #MenuUl {margin: 0Auto; Padding: 0; } #Menu {display: inline-block; List-style: none; } # Menu lee (font-size: 14px; Background: # 292a22c; Swim left; Status: Relative; List style: none; } # Menu & gt; Li: Hover & gt; Ul {display: block; } # Menu & gt; Le & gt; UL {display: none; Status: Completed; Background: # 292a22c; White color; } #Menu Li a {display: block; Padding: 10px 10px; Text-decoration: none; font-weight: bold; White-space: Abrop; } #Menu Li A: Hover {Color: white; Background: Gray; } Thanks for checking it
You need to remove Left float for sub menu list item, such as
#menu li li {float: none;}
Comments
Post a Comment