Need help Navigation bar!

Question

After creating a navigation bar with one <li> are dropdown menu, what code i should use if i want all sub-menu of the dropdown menu display horizontal, not vertical when i hover over. my code:
#container li{display:inline-block; position: relative;.....}
....{
.....
}
.sub-menu{display: none; position:absolute;}
#container li:hover .sub-menu{display:block;}

Answer 1

Without anyelse context, it's quiet impossible to help you: it depends on it for tell accuratly how to fix your problem... Css rules you've posted can do the trick ( displaying items horizontaly ), with both kind of html structure:

<ul id="container">
<li class="submenu">item</li>
<li class="submenu">item</li>
<li class="submenu">item</li>
</ul>

<ul id="container">
<li><span class="submenu">item</span></li>
<li><span class="submenu">item</span></li>
<li><span class="submenu">item</span></li>
</ul>

... but there is no hover effect, and I don't success to guess what's your real coding way, and what's you are expected as behovior for hovering ^^

Answer 2

Add:

white-space:nowrap;

... to your '.sub-menu' class css rules: If I right understand, this will do the trick ^^

Answer 3

https://www.w3schools.com/cssref/pr_text_white-space.asp

It's almost a question of habits, and observation: with positionning, you'll often loose the parent context, so your <ul> submenu element is trying to keep the minimum width for its content... preventing breaking line, force let inline-content on once line ^^

Answer 4

Hi Luminous,

According to the w3schools site here: https://www.w3schools.com/css/css_navbar.asp

you need to change the display element of the list items inside the block of items dropping down from your menu to display:inline; this should remove line breaks and make them display horizontally.

Answer 5

tried as you said. it doesnt work. I thought this trick quite simple, just need something else. I will try figure out myself, thank you,sir!

Answer 6

my html code:
<div id="container">
<ul class="main-menu">
<li><a href=" ">item 1</a><li>
<li<a href=" ">item 2></a>
<ul class="sub-menu">
<li><a href=" ">item 1</a></li>
<li><a href=" ">item 2</a></li>
</ul>
<li>.....</li>
so on...
</ul>
ok! normally when design with css we can creating a dropdown menu based on my code above. it mean that when you hover your mouse over item 2, sub menu will show up and display vertically from item 2(dropdown). The thing i want is submenu display inline(horizontally) from item 2 when i hover over. The code i gave from my css is main code to make submenu dropdown from item 2 and lie vertically. what should i fix or add to make them display inline?

Answer 7

So damn amazing!!! It work out. Is this code belong to css3? why cant i find it in my text book? where you got it?

Answer 8

thank you very much, sir. it made my day ^^