I have created a drop-down menu which works fine in Firefox but the alignment of the third level dropdown menu is out in IE, and I can't work out why.
The HTML:
<nav class="main-navigation clearfix">
<ul class=" main-nav-ul">
<li>Main Link 1</li>
<li>Dropdown
<ul>
<li>Level 2 Item 1</li>
<li>Level 2 Item 2
<ul>Level 3 Item 1
</ul>
</li>
<li>Level 2 Item 3</li>
</ul>
</li>
<li>Main Link 3</li>
</ul>
</nav>
And the CSS from styles.less file:
.main-navigation {
text-align: center;
font-family: #body-font;
}
.main-navigation ul {
li {
display: inline;
text-align: center;
position: relative;
a {
color: lighten(#dark-color, 10%);
display: inline-block;
font-size: 14px;
font-weight: bold;
height: 42px;
line-height: 42px;
margin-right: 14px;
position: relative;
&:hover {
color: black;
}
&::before {
content: '|';
position: absolute;
font-size: 10px;
right: -1em;
top: -1px;
color: lighten(#dark-color, 50%);
}
} //end a
ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
background: #light-text-color;
border: 1px solid darken(#light-text-color, 10%);
border-bottom: 0;
position: absolute;
left: -49px;
li {
float: none;
white-space: nowrap;
position: relative;
a {
padding: 0 14px;
margin-right: 0;
border-bottom: 1px solid darken(#light-text-color, 10%);
&::before {
content: '';
}
} //end a
ul {
position: absolute;
left: 92px;
top: -15px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
} //end 3rd level ul
} //end 2nd level li
} //end ul
&:hover > ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
} //end li
} //end main-navigation ul
I am using bootstrap CSS as well. I'm still quite new to CSS so my apologies if coding isn't so good!
Thanks
Related
I am trying to create a navigation bar that slides out from the left side of the screen, without the use of JavaScript. All of the navigation elements are there, but hidden for the initial page opening, clicking on the "V" in the top right corner should open up the navigation but doesn't. Also, There is no other styling included on my page, I just want to make this work before moving forward.
I have tried a few different methods for creating this effect but to no avail. This most recent method was pulled directly from a tutorial on creating exactly what I was hoping to achieve, and still nothing.
nav {
width: 100%;
text-align: center;
}
nav a {
display: block;
padding: 15px 0;
}
nav li:first-child {
padding-top: 100px;
}
a {
text-decoration: none;
color: black;
}
li {
list-style-type: none;
}
.menu {
width: 240px;
height: 100vh;
position: absolute;
background-color: red;
left: -240px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
font-family: "lobster two";
font-size: 48px;
cursor: pointer;
float: right;
margin-top: 20px;
margin-right: 25px;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked - .menu {
position: absolute;
left: 0;
}
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">V</label>
<header>
<div id="brand"><img class="top-logo" src="https://res.cloudinary.com/spacecatind/image/upload/v1560968515/Vinyl/placeholder_bjekss.png"></div>
</header>
<div id="nav-div">
<nav class="menu">
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">Menu</li>
<li class="nav-item">Cocktails</li>
<li class="nav-item">Events</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>
Your selector is wrong, - isn't a valid selector
Change
#menu-toggle:checked - .menu
To
#menu-toggle:checked ~ #nav-div>.menu
nav {
width: 100%;
text-align: center;
}
nav a {
display: block;
padding: 15px 0;
}
nav li:first-child {
padding-top: 100px;
}
a {
text-decoration: none;
color: black;
}
li {
list-style-type: none;
}
.menu {
width: 240px;
height: 100vh;
position: absolute;
background-color: red;
left: -240px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
font-family: "lobster two";
font-size: 48px;
cursor: pointer;
float: right;
margin-top: 20px;
margin-right: 25px;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked~#nav-div>.menu {
position: absolute;
left: 0;
}
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-icon">V</label>
<header>
<div id="brand"><img class="top-logo" src="https://res.cloudinary.com/spacecatind/image/upload/v1560968515/Vinyl/placeholder_bjekss.png"></div>
</header>
<div id="nav-div">
<nav class="menu">
<ul>
<li class="nav-item">Home</li>
<li class="nav-item">Menu</li>
<li class="nav-item">Cocktails</li>
<li class="nav-item">Events</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
</div>
I guess that you forgot to add animation.
#keyframes slidefFromRight{
0%{
transform:translateX(100px);
opacity:0;
}
50%{
transform:translateX(-30px);
}
100%{
transform:translateX(0);
opacity: 1;
}
}
Put the animation name under selector
#nav-div{
animation:slidefromRight;
animation-duration: 4s;
animation-delay: 0.5s;
opacity:0;
animation-fill-mode:forwards;
}
I have a question regarding the text color of my drop down menu. The drop down text color is based off of the main link text color. When I select that link it changes to the current tab color, but also changes the drop down text color. I was wondering how to make the drop down menu color independent from the main tab text color.
Here is the HTML:
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li>Home</li>
<li class="current">Blog
</li>
<li><span>Resources</span>
<ul>
<li>Alcohol</li>
<li>Drugs</li>
<li>Mental Health</li>
<li>Suicide</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
And here is the CSS:
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
Any help would be awesome!
add the following at the end of your css script
ul#nav ul li a:hover{
color:red;
}
Example:
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
ul#nav ul li a:hover{
color:red;
}
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
<ul id="nav" class="nav">
<li>Home</li>
<li class="current">Blog
</li>
<li><span>Resources</span>
<ul>
<li>Alcohol</li>
<li>Drugs</li>
<li>Mental Health</li>
<li>Suicide</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
I created the fiddle using your code. While hovering over the drop down menu links, the text color changes to the blue as being used on the current menu tab. In case you don't want to use blue on text hover in the drop down menu and want to go with the white text links, just remove "ul#nav li:hover > a," from your code and it'll do the work.
Now your new CSS code should look like :-
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
/* nav-wrap */
#nav-wrap {
position: relative;
font: 15px raleway-heavy, sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
float: right;
margin-top: 32px;
margin-right: 20px;
z-index: 99999;
}
/* hide toggle button */
#nav-wrap > a.mobile-btn {
display: none;
border-radius: 3px;
}
ul#nav {
min-height: 48px;
width: auto;
/* left align the menu */
text-align: left;
}
ul#nav li {
position: relative;
list-style: none;
height: 48px;
display: inline-block;
}
/* Links */
ul#nav li a {
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
display: inline-block;
padding: 8px 11px;
line-height: 32px;
text-decoration: none;
text-align: left;
color: #ffffff;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #00b2ee; }
/* adds down arrow */
ul#nav span:after {
width: 0;
height: 0px;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #00b2ee;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
/* Sub Menu
----------------------------------------------------- */
ul#nav ul {
position: absolute;
top: 100%;
left: 0;
background: #c7c7c7;
min-width: 100%;
border-radius: 5px 5px 7px 7px;
/* for transition effects */
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* Third level sub menu
ul#nav ul ul {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 3px 3px 3px;
}
*/
ul#nav ul li {
padding: 0;
display: block;
text-align: left;
/* for transition effects */
height: 0;
overflow: hidden;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
/*On Hover */
ul#nav li:hover > ul {
opacity: 1; filter: alpha(opacity=100);
}
ul#nav li:hover > ul li {
height: 42px;
overflow: visible;
border-bottom: 1px solid #26272C;
color: #ffffff;
}
ul#nav li:hover > ul li:last-child { border: none; }
/* Sub Menu Anchor links */
ul#nav ul li a {
padding: 6px 15px;
margin: 0;
white-space: nowrap;
font-size: 13px;
}
In case you want to use some different color while hovering over the drop down text links, you need to use this code separately in the css :-
ul#nav li:hover > a {color:your color name or color code}
My page no longer applies the :hover effect to my .tabs li element, but I can't for the life of me figure out why. I commented out my jQuery script and it still won't work.
Here's a JSFiddle: https://jsfiddle.net/qpmg4wzq/
<div id="tabs-container">
<ul class="tabs">
<li class="tab current" data-tab="tab-1">tab 1</li>
<li class="tab" data-tab="tab-2">tab 2</li>
<li class="tab" data-tab="tab-3">tab 3</li>
<li class="tab" data-tab="tab-4">tab 4</li>
</ul>
</div>
#tabs-container {
float: left;
width: 100%;
overflow: hidden;
}
.tabs {
padding: 0px;
list-style: none;
clear: left;
float: left;
left: 50%;
}
.tabs li {
display: block;
float: left;
right: 50%;
margin: 0;
padding: 10px 20px 5px 20px;
cursor: pointer;
font-size: 1.1em;
line-height: 2em;
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-ms-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;
-ms-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
}
.tabs li:hover {
background: #88abc2!important;
}
.tabs li.current {
background: #d0e0eb;
color: #49708a;
}
.tab-content {
display: none;
padding: 15px;
line-height: 1.4;
}
.tab-content.current {
display: inherit;
}
Thanks.
Your .tab-content is overlapping the .tabs-container so any :hover action you make is actually registering as a hover on the .tab-content element.
A couple of options to solve this
Move the tab-content down using margin-top
.tab-content.current {
display: inherit;
margin-top: 60px;
}
Remove float: left from #tabs-container
I've created a drop down menu with pure CSS and I've gotten it to a place that I like EXCEPT I want it to be "drop-up" not drop-down since the menu bar is going at the bottom of the layout. I can't figure out what to add or change to make it "drop-up," help please!!
The CSS I used:
#cssmenuf {
position: relative;
height: 50px;
background: #2b2f3a;
width: auto;
}
#cssmenuf ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenuf > ul {
position: relative;
display: block;
background: #2b2f3a;
height: 32px;
width: 100%;
z-index: 500;
bottom:100%;
}
#cssmenuf > ul > li {
display: block;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#cssmenuf ul li a {
display: block;
font-family: Helvetica, sans-serif;
text-decoration: none;
}
#cssmenuf > ul > li > a {
font-size: 12px;
font-weight: bold;
padding: 15px 20px;
color: #7a8189;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenuf > ul > li.has-subf > a {
padding-right: 25px;
}
#cssmenuf > ul > li:hover > a {
color: #ffffff;
}
#cssmenuf li.has-subf::after {
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
}
#cssmenuf > ul > li.has-subf::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #7a8189;
}
#cssmenuf > ul > li:hover::after {
border-top-color: #ffffff;
}
#cssmenuf ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenuf ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenuf ul ul li {
position: relative;
}
#cssmenuf > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenuf ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenuf ul ul li a {
width: 130px;
border-bottom: 1px solid #eee;
padding: 10px 20px;
font-size: 12px;
color: #9ea2a5;
background: #fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenuf ul ul li:hover > a {
background: #f6f6f6;
color: #8c9195;
}
#cssmenuf ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenuf ul ul li.has-subf::after {
border: 4px solid transparent;
border-left-color: #9ea2a5;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenuf ul ul li.has-subf:hover::after {
border-left-color: #fff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
HTML
<div id='cssmenuf'>
<ul>
<li class='active'><a href='index.html'>
<span>About Us</span></a>
</li>
<li class='active'><a href='#'>
<span>FAQ</span></a>
</li>
<li class='active'><a href='#'>
<span>Contact Us</span></a>
</li>
<li class='active'><a href='#'>
<span>Testimonial</span></a>
</li>
<li class='has-subf'><a href='#'><span>Share On</span></a>
<ul>
<li class='has-subf'><a href='#'>
<span>Facebook</span></a></li>
<li class='has-subf'><a href='#'>
<span>Google+</span></a></li>
<li class='has-subf'><a href='#'>
<span>linkedIn</span></a></li>
<li class='has-subf'><a href='#'>
<span>Twitter</span></a></li>
</ul></li>
</ul>
</div>
In "#cssmenuf ul ul" and "#cssmenuf > ul > li:hover > ul" you use "top" instead of "bottom" to position your element. Change "top: 70px;" to "bottom: 70px;" and "top: 44px;" to "bottom: 44px;" and it should work.
In my code, I have a drop-down menu. However, the grey box extends to the end of the screen. How can I limit the grey box?
Code from here: http://cssdeck.com/labs/7rsznauv
HTML:
<nav>
<ul class="cf">
<li><a class="dropdown" href="#">Menu Item 2</a>
<ul>
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
min-width: 25%;
}
nav a {
background: #ddd;
color: #444;
display: block;
font: bold 16px/50px sans-serif;
padding: 0 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav .dropdown:after {
content: ' ▶';
}
nav .dropdown:hover:after{
content:'\25bc'
}
nav li:hover a {
background: #ccc;
}
nav li ul {
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
opacity: 1;
top: 50px;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
background: #bbb;
}
/* Clearfix */
.cf:after, .cf:before {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
nav ul {
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 #FFF;
background: #ddd;
list-style: none;
margin: 0;
padding: 0;
width: 90%; // I made it 90% you can make it even narrower
}
Just reduce the width by reducing the percentage or like width: 180px;
just change the width in hnav ul{....}, actually is 100%, change it to 50% or whatever you want