1 reply [Last post]
naz786's picture
Last seen: 6 years 18 weeks ago
Timezone: GMT+1
Joined: 2016-07-26
Posts: 1
Points: 2

Hey can anyone have a look at my code on CodePen and see where I am going wrong? I have a drop down menu on the navbar when the screen is reduced, but the ul list a:hover is acting a little strange and highlighting to a different colour on the first option only for a little while and it completely does not highlight on the second option in the menu.

My second problem is the footer where the background colour is not adapting to grey even when the width is spanned 100%.

Here you'll find my code:


gary.turner's picture
Last seen: 1 year 39 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not fixed, but ...

The hover background on the menu items is due to the following text overlaying them. Trying to fix that was a PITA because:

1) Your css is poorly badly organized. Classes, ULs, LIs and what not are scattered all over your stylesheet. I think you're trying to put colors, fonts and layout properties in their own groups. Bad idea; it makes debugging and maintenance more difficult (read expensive).

2) Your indiscriminate use of the position and related properties. If you don't have a specific, explicit and compelling reason for {position: xx;} don't do it.

3) Likewise the float property. The selfie image is the only thing I saw that justified float.

4) Likewise declaring the height property. Its use here created overflow; one element underlaying another.

Items 2–4 were each adding to the problems. As a first prior, remove all height, float (except for the image) and position related properties from the css. That fixes most, if not all the problems. The next iteration (without multiple properties affecting a given element) will be simpler to deal with.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.