Variable length centered drop down menus

HTML & CSS
1

I was trying to construct drop-down menus. I wanted them variable length set by text in the first unordered list item. I cannot for the life of me target the hover property to make it match the width. If some can help, I will also take any advice on the best way or better ways to do this. Thanks

2

Hi,
Actually you’ve got some bigger problems that need attention first.

You are setting your <nav> element as position:absolute which will cause other content that follows your navbar to be layered under your links until there is enough content to clear the nav.

Add some dummy text after closing nav and you will see some of it hidden.


  </nav>		
      <p>Test text</p>
      <p>Test text</p>
      <p> Test text</p>

The only thing that needs to be absolute positioned are the sub ul s’

I would steer clear of floats too and use display flex or table for the main ul
Then the main list items will be flex items or display:table-cell

4 Likes
3

I want my nav bar to be absolutely positioned. If I remove it can that still be accomplished? Thanks

4

It doesn’t seem as though you do want it absolutely positioned with the snippet you posted . It just looks like it needs to follow after your banner. If you are absolutely placing the nav then make sure you allow for content that may be underneath,

To me it just looks like it should follow in the flow.

Hers’s a very rough re-jig of your code.

You will of course need to add rules for small screen and handle devices that don’t understand hover. A dropdown menu done well is quite complicated to achieve for all devices.

3 Likes
5

Hi, thanks so much. I started to look at things to make a better set of code. Your stuff helps a lot. Thanks

2 Likes
6

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