[Another Solution]: Using Jquery it's possible to know the distance of the menu to the window, so to each menu it's needed to test if its distance is less than 0 when the mouse is hover it. If it's less than 0 ,use css to reposition.
JQUERY:
var distance = $(window).width() - ($('#your-element').offset().left + $('#your-element').width());
if(distance<0){
/* manage if the menu that exceeds the window*/
}
I am trying to code a sub-menu with Html and CSS.
Till now it's working fine, but if the menu has too much levels, it exceeds the margin.
Is there a way to fix this, re-positioning the level when it exceed the margin?
Here's the code: http://jsfiddle.net/mag2v/19/
HTML
<div class="menu">
<ul>
<li><a href="javascript:void(0)">HOME</a>
</li>
<li><a href="javascript:void(0)">PRODUCTS</a>
<ul class="sub-menu">
<li><a href="javascript:void(0)">E-COMMERCE</a>
</li>
<li><a href="javascript:void(0)">INTRANET</a>
</li>
<li><a href="javascript:void(0)">MARKETING</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">HELP</a>
<ul class="sub-menu">
<li><a href="javascript:void(0)">F.A.Q</a>
</li>
<li><a href="javascript:void(0)">CHAT ONLINE</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">BLOG</a>
</li>
<li><a href="javascript:void(0)">ABOUT US</a>
<ul class="sub-menu">
<li><a href="javascript:void(0)">OUR TEAM ></a>
<ul class="sub-sub-menu">
<li><a href="javascript:void(0)">DEVELOPERS</a>
</li>
<li><a href="javascript:void(0)">DESIGNERS</a>
</li>
<li><a href="javascript:void(0)">COMMERCIAL</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">WHERE ARE WE? ></a>
<ul class="sub-sub-menu">
<li><a href="javascript:void(0)">BRAZIL ></a>
<ul class="sub-sub-menu">
<li><a href="javascript:void(0)">SÃO PAULO</a>
</li>
<li><a href="javascript:void(0)">RIO DE JANEIRO</a>
</li>
<li><a href="javascript:void(0)">PORTO ALEGRE ></a>
<ul class="sub-sub-menu">
<li><a href="javascript:void(0)">TESTE</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">USA</a>
</li>
<li><a href="javascript:void(0)">GERMANY</a>
</li>
<li><a href="javascript:void(0)">CHINA</a>
</li>
<li><a href="javascript:void(0)">RUSSIA</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">MEDIA</a>
</li>
<li><a href="javascript:void(0)">JOIN US</a>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">CONTACT US</a>
</li>
</ul>
</div>
CSS
#header .container {
padding:30px 0 50px 0;
}
#header .container .logotipo {
float:left;
height:22px;
width:97px;
}
#header .container .menu {
float:left;
margin-left:20px;
margin-top:-30px;
}
.menu ul li {
float:left;
list-style:none;
margin-left:40px;
position:relative;
}
.menu ul li:hover > ul {
display:block;
}
/* 1 */
.menu ul li:nth-child(1) a {
border-top:3px solid #7F9614;
color:#7F9614;
display:block;
padding:29px 0 9px 0;
}
.menu ul li a {
color:#000;
cursor:pointer;
display:inline-block;
font-family:Gisha;
font-size:16px;
padding:32px 0 9px 0;
text-decoration:none;
}
.menu ul li:hover a {
border-top:3px solid #7F9614;
color:#7F9614;
display:block;
padding:29px 0 9px 0;
}
/* 2 */
.menu ul li > ul {
border-top:3px solid #7F9614;
display:none;
position:absolute;
width:240px;
}
.menu ul li > ul.sub-menu li {
float:left;
margin-left:-40px;
width:100%;
}
.menu ul li > ul.sub-menu li a {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
background:rgba(255, 255, 255, 0.8);
border-bottom:1px dotted #7F9614;
border-top:none;
color:#7F9614;
font-size:14px;
padding:10px 0px 10px 20px;
word-break:break-all;
}
.menu ul li > ul.sub-menu li a:hover {
background:#7F9614;
color:#fff;
}
/* 3... */
.menu .sub-sub-menu {
position:absolute;
left:100%;
top:0;
}
.menu .sub-sub-menu {
border-left:1px dotted #7F9614;
border-top:none;
word-break:break-all;
}
note: a menu like this is a bad idea, and the issue you're having is a good example of why that is. Look around, there're good reasons most sites don't do this, and even more reasons not to do this without javascript.
That being said, it is possible to make it work with just HTML AND CSS.
You would want to use media queries to alter the CSS based on the window size; like:
@media (max-width: 800px) {/*just change 800 to whatever you need*/
/*css here*/
}
I made a working example in this fiddle...
It's not without issues/bugs, but it's just to illustrate the concept. I did add an empty li with a class of trigger which shows when the menus need to collapse.
I also made just a few changes to your existing CSS, and added comments so that you can see what's changed.
This kind of issue is typically solved by the main menu having only one dropdown level, and the pages inside of it that have additional links would display those additional links in a secondary navigation on those pages instead of trying to put 10lbs of "stuff" in a 5lb bag.
Like this where they've made a secondary navigation out of the 3 blocks below the page introductory content (for you, for business, for developers). Most sites handle this issue in a similar fashion.