Hello everyone! I am currently working on creating a horizontal dropdown menu. I have created a JS Fiddle to showcase my issue along with an image of the desired outcome.
The problem I am facing is that I cannot get the submenu to align where I want it (on the right side of the container). Additionally, when I set my sub UL to absolute positioning, it does not expand beyond its parent and remains in a vertical orientation. I have only worked on vertical dropdown menus in the past.
<div id="head">
<div class="container">
<a href="#"><strong class="logo pull-left"><h1>CAVO</h1>
</strong></a> <!-- end logo !-->
<ul class="nav pull-right">
<li><a href="#">Menu</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Breakfast and Brunch</a></li>
<li><a href="#">Salads</a></li>
<li><a href="#">Sandwiches and Wraps</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Mains</a></li>
<li><a href="#">Pizza</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- end container !-->
</div> <!-- end header !-->
CSS
body, html {
height: 5000px;
font-size: 18px;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
color: #fff;
background-color: #222;
}
a {
text-decoration: none;
color: inherit;
}
#head {
height: 76px;
width: 100%;
background-color: #472626;
position: fixed;
z-index: 10000;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.container {
max-width: 1400px;
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 75px;
text-align:left;
-webkit-transition: font-size 2s ease , line-height 0.5s ease;
-moz-transition: font 0.3s ease , line-height 0.5s ease;
-o-transition: font 0.3s ease , line-height 0.5s ease;
-ms-transition: font 0.3s ease , line-height 0.5s ease;
}
.logo h1 {
font-size: 2.8em;
font: "Segoe UI Semibold";
display:block;
}
.pull-left {
float: left;
}
.pull-right {
float:right;
}
.nav {
font-size: 1.3em;
font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
font-weight: 100;
}
.nav li {
float:left;
padding-left: 15px;
line-height: 80px;
-webkit-transition: line-height 0.5s ease;
-moz-transition: line-height 0.3s ease;
-o-transition: line-height 0.3s ease;
-ms-transition: line-height 0.3s ease;
position: relative;
}
.nav li a {
opacity: 1;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
}
.nav li a:hover {
opacity: .6;
}
.nav li ul {
background-color: #2B0909;
}
.nav li ul li a , .nav li ul li{
display: block;
float: left;
line-height:none;
}
Desired result:
Here is the link to my fiddle: