para - menu horizontal html sin css
Submenú horizontal para un menú principal vertical usando bootstrap (2)
¡Aquí vamos!
Los menús desplegables funcionan con "ul" anidado, posiciones absolutas y cambiaremos desde la display: none; para display:block; cuando sea necesario con los titulares.
Algo como esto:
<ul>
<li><a href="#">…</a>
<ul>
<li><a href="#">…</a>
<ul> … <!-- And so on. -->
</ul>
</li>
<li>
</ul>
El html de tu ejemplo
<nav id="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#">Project 1</a>
<ul>
<li><a href="#">Project 2</a>
<ul>
<li><a href="#">Project 3</a>
<ul>
<li><a href="#">Project 4</a>
<ul>
<li><a href="#">Project 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
SCSS de su explicación: (Utilicé sass porque es más fácil de leer y escribir, pero también pegaré CSS a continuación)
#main-nav{
ul{ /* Those lines are used only for styling */
margin: 0;
padding: 0;
border-right: 1px solid black;
width: 150px;
list-style-type: none;
li{
position: relative; /* This is important when using absolute positions. */
&:hover{
&:before{ /* arrow styles */
content: "";
top: 0;
bottom: 0;
right: 0;
border-top: 5px solid transparent;
border-right: 5px solid #999;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
height: 0px;
width: 0px;
margin: auto;
}
> ul{
display: block; /* IMPORTANT: This will show your dropdown menus when hover in the parent li. */
/*&:before { // I don''t like this part but if you enable it, it will make child ul''s look closer to your design.
content: "";
position: absolute;
right: 0;
top: -65px;
bottom: -35px;
width: 1px;
background-color: #ccc;
}*/
}
}//:hover
a{ /* Those lines are used only for styling */
padding: 7px 10px;
display: block;
&:hover{
color: red;
}
}// a
> ul{ /* This is what makes the magic happen. */
display: none; /* Dropdown menus are always hidden, except when you hover it''s li parent */
position: absolute; /* This will position the ul */
top: 0;
left: 100%; /* This will push the ul where it is needed. */
border-right: 1px solid #ccc;
}
}// li
}// ul
}
Un ejemplo en vivo: https://jsfiddle.net/xwazzo/3spxxk1z/
Y la versión prometida de CSS:
#main-nav ul {
margin: 0;
padding: 0;
border-right: 1px solid black;
width: 150px;
list-style-type: none;
}
#main-nav ul li { position: relative; }
#main-nav ul li:hover:before {
content: "";
top: 0;
bottom: 0;
right: 0;
border-top: 5px solid transparent;
border-right: 5px solid #999;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
height: 0px;
width: 0px;
margin: auto;
}
#main-nav ul li:hover > ul { display: block; }
#main-nav ul li a {
padding: 7px 10px;
display: block;
}
#main-nav ul li a:hover { color: red; }
#main-nav ul li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
border-right: 1px solid #ccc;
}
Esto podría ser útil para ti. se puede encontrar aquí
HTML:
<div class="container-fluid">
<ul class="nav nav-justified navbar-default">
<li class="dropdown">
<a href="#" data-toggle="collapse" data-target="#one">One</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="collapse" data-target="#two">Two</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="collapse" data-target="#three">Three</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="collapse" data-target="#four">Four</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="collapse" data-target="#five">Five</a>
</li>
</ul>
</div>
<div class="container-fluid">
<nav id="submenu">
<ul class="nav nav-justified">
<li>
<ul class="nav nav-justified collapse" id="one">
<li><a href="#" id="">One sub 1</a></li>
<li><a href="#" id="">One sub 2</a></li>
<li><a href="#" id="">One sub 3</a></li>
<li><a href="#" id="">One sub 4</a></li>
</ul>
</li>
<li>
<ul class="nav nav-justified collapse" id="two">
<li><a href="#" id="">Two sub 1</a></li>
<li><a href="#" id="">Two sub 2</a></li>
<li><a href="#" id="">Two sub 3</a></li>
</ul>
</li>
<li>
<ul class="nav nav-justified collapse" id="three">
<li><a href="#" id="">Three sub 1</a></li>
<li><a href="#" id="">Three sub 2</a></li>
</ul>
</li>
<li>
<ul class="nav nav-justified collapse" id="four">
<li><a href="#" id="">Four sub 1</a></li>
<li><a href="#" id="">Four sub 2</a></li>
</ul>
</li>
<li>
<ul class="nav nav-justified collapse" id="five">
<li><a href="#" id="">Link</a></li>
<li><a href="#" id="">Link</a></li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
.navbar {
margin-bottom:-1px;
border-radius:0;
}
#submenu {
background-color: none;
margin-bottom:10px;
padding-bottom:15px;
margin-top:-20px
margin-left:10px;
margin-right:10px;
display:none;
}
.collapsing {
display:none;
}
#submenu.navbar {
background-color:transparent;
border:0;
}
JS:
$(''.collapse'').on(''shown.bs.collapse'', function (e) {
$(''.collapse'').not(this).removeClass(''in'');
});
$(''[data-toggle=collapse]'').click(function (e) {
$(''[data-toggle=collapse]'').parent(''li'').removeClass(''active'');
$(this).parent(''li'').toggleClass(''active'');
$("#submenu").show();
});