0

I'm finding script that can make my menu like

enter image description here

I find some script but sub menu will align left, not like this.

<div id="menu-container"> <ul class="menu" style="background-color:#1DBAA5;"> <li style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" > <a href="#" style="color:#fff"> <span>TEST</span> </a> <ul class="dropdown-menu" id="menu1" style="background:#111;width:600px"> <li> <a href="#" style="color:#fff">TEST</a> </li> <li><a href="#" style="color:#fff">TEST</a></li> <li><a href="#" style="color:#fff">TEST</a></li> <li><a href="#" style="color:#fff">TEST</a></li> </ul> </li> </ul> </div>

My css

.dropdown-menu .sub-menu { left: 100%; position: absolute; } .menu{ max-width: 600px; } .menu>li{ } .dropdown-menu li { width: 30%; display: inline-block; }
Improve this question

2 Answers 2

Reset to default
1

Try this .It will be align with in left

I was change the value of <ul class="dropdown-menu" id="menu1" style="background:#111;width:475px"> for same sizing.you change as your wish.

They will be use for left position alignment

.dropdown-menu .sub-menu { left: 100%; position: absolute; } .menu{ max-width: 600px; padding-top:10px; } .menu>li{ display: inline; padding-left: :20px; } .dropdown-menu li { width: 30%; display: inline-block; } 
<div id="menu-container"> <ul class="menu" style="background-color:#1DBAA5;"> <li style="padding-left:10px;padding-top:10px" class="level1 nav-2-<?php echo $demmn; ?> first dropdown" > <a href="#" style="color:#fff"> <span>TEST</span> </a> <ul class="dropdown-menu" id="menu1" style="background:#111;width:475px"> <li> <a href="#" style="color:#fff">TEST</a></li> <li><a href="#" style="color:#fff">TEST</a></li> <li><a href="#" style="color:#fff">TEST</a></li> <li><a href="#" style="color:#fff">TEST</a></li> </ul> </li> </ul> </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

This part .dropdown-menu .sub-menu has not been included on your code

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.