0

I am making this simple work list/client/stock management platform for a friend who just started his business.

It is being built in html, php and css.

The problem I am facing is with the page CSS. The sub-menu's width are being shrunk down and am not being able to change it. The menu was based from w3schools examples with a change here and there I found googling/SO searching. But can't find the reason and how to fix my problem.

body { margin: 0; } ul { list-style-type: none; position: fixed; top: 0; width: 100%; margin: 0; padding: 0; background-color: #003366; } li { display: inline-block; position: relative; float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: #0066CC; } li.dropdown { display: inline-block; border-right: 1px solid #bbb; } li.right { float: right; } .arrow { font-size: 8px; line-height: 0%; } .dropdown-content { display: none; position: absolute; top: 100%; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; }
<!-- Header --> <header id="header"> <nav id="nav"> <ul> <li class="dropdown"> <a href="#" class="dropbtn">Reparações <span class="arrow">&#9660;</span></a> <div class="dropdown-content"> <a href="#">Adicionar Pedidos de Reparação</a> </div> </li> <li class="dropdown"> <a href="#" class="dropbtn">Clientes <span class="arrow">&#9660;</span></a> <div class="dropdown-content"> <a href="#">Adicionar Cliente</a> </div> </li> <li class="dropdown"> <a href="#" class="dropbtn">Stocks <span class="arrow">&#9660;</span></a> <div class="dropdown-content"> <a href="#">Adicionar Stock</a> </div> </li> <li class="right"><a href="#">Deltronic</a></li> </ul> </nav> </header> <!-- Header --> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p>

I have set a jsfiddle example as well.

Hope some one can help me understand why it is happening like that and eventually achieve the result am seeking.

Improve this question
1
  • I can't face your problem. Can you add images examples to demonstrate the expected look in comparison to the atcual look? Commented Jun 24, 2017 at 13:31

2 Answers 2

Reset to default
1

If I understand you correctly, you don't want the contents of the dropdown menus to wrap into two lines.

To achieve that, just add white-space: nowrap; to the rule for dropdown-content a:

body { margin: 0; } ul { list-style-type: none; position: fixed; top: 0; width: 100%; margin: 0; padding: 0; background-color: #003366; } li { display: inline-block; position: relative; float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: #0066CC; } li.dropdown { display: inline-block; border-right: 1px solid #bbb; } li.right { float: right; } .arrow { font-size: 8px; line-height: 0%; } .dropdown-content { display: none; position: absolute; top: 100%; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; white-space: nowrap; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; }
<!-- Header --> <header id="header"> <nav id="nav"> <ul> <li class="dropdown"> <a href="#" class="dropbtn">Reparações <span class="arrow">&#9660;</span></a> <div class="dropdown-content"> <a href="#">Adicionar Pedidos de Reparação</a> </div> </li> <li class="dropdown"> <a href="#" class="dropbtn">Clientes <span class="arrow">&#9660;</span></a> <div class="dropdown-content"> <a href="#">Adicionar Cliente</a> </div> </li> <li class="dropdown"> <a href="#" class="dropbtn">Stocks <span class="arrow">&#9660;</span></a> <div class="dropdown-content"> <a href="#">Adicionar Stock</a> </div> </li> <li class="right"><a href="#">Deltronic</a></li> </ul> </nav> </header> <!-- Header --> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p> <p> weeeeeeeeeee </p>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I was going to clarify the OP while I was thinking about it. Yes, you understood correctly.
0

You could have compared the CSS file from w3schools to yours. Then you would have noticed that you added position: relative; to your li element. And this is exactly the reason for your problem.

li { display: inline-block; position: relative; // This is what's causing the problem float: left; }

Unless there is any specific reason for the change, just get rid of it and you are good to go.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.