I'm trying to make my mobile menu load expanded (top level links only) on page load. I've got a second level of nested links I'd like to stay hidden. I'm sure this is a super simple fix but I've already spent an afternoon fiddling with my code that I think it's time to ask the professionals ;)
My code:
https://jsfiddle.net/ubxsksz2/
<nav id="nav" role="navigation">
<font size="+2">MENU</font>
<font size="+2">HIDE MENU</font>
<ul>
<li><b><font color="#CC9933">HOME:</font></b></li>
<li>
FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif">
<ul>
<li>SECOND LEVEL LINK</li>
</ul>
</li>
</ul>
</nav>
/* New Responsive Menu CSS */
#crumbs {
width: 97%;
overflow: hidden;
}
#nav {
/* container */
background: #333;
}
#nav > a {
display: none;
}
#nav a {
color: #FFF;
}
#nav li {
position: relative;
background: #CC9;
color: #000;
padding: 15px 15px;
padding-bottom: 15px;
border-bottom: 1px solid #333;
}
/* first level */
#nav > ul {
font: bold 14px Verdana;
}
#nav li ul li a {
color: black;
}
#nav > ul > li {
height: 100%;
float: left;
padding: 15px 10px;
background: #333;
}
/* second level */
#nav li ul {
display: none;
position: absolute;
top: 100%;
width: 100%;
}
#nav li:hover ul {
display: block;
}
#media only screen and ( max-width: 640px)
/* 640 */
{
#sticky-element {}
.nav-container {}
.f-nav {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#nav {
position: relative;
}
#nav > a {}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 93%;
float: none;
}
/* second level */
#nav li ul {
position: static;
}
}
It actually took me a while to get this working...
Man, you are making some crazy navbar! +1
I hope this helps you!
Keep on coding!
/* New Responsive Menu CSS */
#crumbs {
width: 97%;
overflow: hidden;
}
#nav {
/* container */
background: #333;
}
#nav > a {
display: none;
}
#nav a {
color: #FFF;
}
#nav li {
position: relative;
background: #CC9;
color: #000;
padding: 15px 15px;
padding-bottom: 15px;
border-bottom: 1px solid #333;
}
/* first level */
#nav > ul {
font: bold 14px Verdana;
}
#nav li ul li a {
color: black;
}
#nav > ul > li {
height: 100%;
float: left;
padding: 15px 10px;
background: #333;
}
/* second level */
#nav li ul {
display: none;
position: absolute;
top: 100%;
width: 100%;
}
#nav li:hover ul {
display: block;
}
#media only screen and ( max-width: 640px)
/* 640 */
{
#sticky-element {}
.nav-container {}
.f-nav {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#nav {
position: relative;
}
#nav > a {}
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 93%;
float: none;
}
/* second level */
#nav li ul {
position: static;
}
}
<body onload="window.location.href+='#nav';">
<nav id="nav" role="navigation">
<font size="+2">MENU</font>
<font size="+2">HIDE MENU</font>
<ul>
<li><b><font color="#CC9933">HOME:</font></b></li>
<li>
FIRST LEVEL <img src="ddlevelsfiles/arrow-down.gif">
<ul>
<li>SECOND LEVEL LINK</li>
</ul>
</li>
</ul>
</nav>
</body>
Related
I have a multi-level dropdown but it opens to the right by default. I have tried to tweak it a lot but doesn't seem to work no matter what I try.
I'll provide the code here. The HTML might be a little messed up because I had to remove the rails code in there and only leave plain HTML.
The dropdowns open to the right and overflow the window. If anyone has a better way to do it, I am all ears.
.dropdown-wrapper {
ul {
list-style: none;
padding: 0;
margin: 0;
// background: #1bc2a2;
}
li>ul {
margin-right: 190px;
}
ul li {
font-size: 16px !important;
margin-top: 10px;
display: block;
position: relative;
color: goldenrod;
float: left;
min-width: 100px;
cursor: pointer;
// background: #1bc2a2;
}
ul li:not(:last-child) {
border-bottom: 1px solid goldenrod;
}
li ul {
display: none;
}
ul li a {
display: block;
padding: 10px;
text-decoration: none;
white-space: nowrap;
color: goldenrod;
border-radius: 0;
box-shadow: none;
}
ul li a:hover {
background: #FAF9F6;
border-radius: 0;
}
ul li:hover {
background: #FAF9F6;
}
li:hover>ul {
display: block;
position: absolute;
margin-left: 2px;
}
.main-navigation {
ul {
background: white;
}
}
li:hover li {
float: none;
}
// li:hover a { background: #1bc2a2; }
li:hover li a:hover {
background: #FAF9F6;
}
.main-navigation li ul li {
border-top: 0;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
}
<ul class="main-navigation">
<li>Treatments Provided
<ul>
<li>1</li>
</li>
<li>2
<ul>
<li class="">
<a href=>a</a>
</li>
</ul>
</ul>
</li>
</ul>
I have a menu, for which I put at the end 3 images, measuring 30x30 px each. After the images being inserted, it appeared a space between the bottom line of the menu and only the text. For the image there is no space between the bottom of the menu and the images. What I would like now to do, would be to have the text having the exact size (I managed to fix this space by increasing font size, but this is not a solution for me) as now and get rid of that space. Again, the space is only below the text and not the images. *Check with full-screen the menu.
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 245px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 100;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study
<ul>
<li>Present Simple</li><li>
Possesives</li><li>
Articles</li><li>
Modal Verbs</li><li>
Prepositions</li><li>
Plural of nouns</li><li>
Countability</li>
</ul>
</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Shop</li><li>
Contact</li><li>
About Us</li>
<li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>
</ul>
</div>
</div>
The simplest would be to set the same height to your texts as you have on your images
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
height: 30px; /* added */
text-decoration: none;
}
Stack snippet
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 245px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
height: 30px; /* added */
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
z-index: 100;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
#nav {
display: table;
width: 100%;
}
.alignright { float: right; }
<div id="nav">
<div id="wrap">
<ul>
<li>Home</li><li>
Study
<ul>
<li>Present Simple</li><li>
Possesives</li><li>
Articles</li><li>
Modal Verbs</li><li>
Prepositions</li><li>
Plural of nouns</li><li>
Countability</li>
</ul>
</li><li>
Games
<ul>
<li>Riddles</li><li>
Flip card game</li><li>
Spot the mistake</li><li>
Multiple choice</li>
</ul>
</li><li>
Shop</li><li>
Contact</li><li>
About Us</li>
<li style="float:right"><a><img src="gmail.png" height="30px" width="30px"></a></li> <li style="float:right"><a><img src="twitter.png" height="30px" width="30px"></a></li><li style="float:right"><a><img src="facebook.png" height="30px" width="30px"></a></li>
</ul>
</div>
</div>
this might be a bit complicated but I really need some help here..
I made a HTML menu and a css file for it. This was for a desktop version of my website.
I was in need of a mobile menu and due to my low skills of html and css, I asked a friend to make a mobile css file for the menu.
He ended up changing a little bit of code of the original HTML menu, this means that the mobile version is working, but I have to update my original css file for desktop a bit.
That's where the problem is, I just can't get it done, I can't find the right tag to update the file.
Original Desktop HTML menu and css file
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" class="show-menu" role="button">
<div id="Logo"><img src="Images/logo.png" alt="logo"></div>
<nav id="primary_nav_wrap">
<ul id="menu" class="menu">
<ul>
<li class="current-menu-item">home</li>
<li>informatie
<ul id="navinformatie">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul id="navverblijf">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul id="navbezienswaardigheden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</ul>
</nav>
</header>
The new HTML menu and mobile css file for it
body {
margin: 0;
}
main {
margin: 0 auto;
width: 480px;
}
/*menu*/
ul{
list-style-type:none;
margin:0;
padding:0;
position: static;
display: none;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
border-bottom:1px solid #CCC;
}
li a {
display:block;
min-width:180px;
height: 50px;
text-align: center;
line-height: 50px;
color: black;
background: white;
text-decoration: none;
}
li:hover a {
border-bottom: 1px solid black;
}
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
border-bottom: 1px solid black;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
text-align:center;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
#Logo {
display: none;
}
.show-menu {
text-decoration: none;
color: white;
background: black;
text-align: center;
padding: 10px;
display: block;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
ul li, li a {
width: 100%;
text-align:left;
}
ul li a{
padding:0 10px;
}
li ul li a {
text-align:center;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
<div id="Logo"><img src="logo.png" alt="logo"></div>
<ul id="menu" class="mobile-top">
<li class="current-menu-item">home</li>
<li>informatie
<ul class="hidden">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul class="hidden">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul class="hidden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</header>
<div style="clear:both;"></div>
So what I need now is some help to adjust the desktop css file to the new html menu, I can't figure it out where to start and what I should change.
You might want to use media queries to apply a different set of CSS for mobile and desktop. You could wrap your original css like this, to only apply the desktop CSS when the width is bigger than 600px.
#media (min-width: 600px) {
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
}
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 7 years ago.
I am fiddling with the this menu for touch screens:
Somehow #nav span:after is causing a down arrow to appear on the spans - how? Where does it come from? How can I change this icon/character?
It does not seem to be from the content property and there is no image file anywhere. When I replicate this in my own system I also get the arrow, in IE and FF. It appears if we change the nav tag to a div and if we remove aria-haspopup. If I F12 in IE or FF I can't find it to see where it is being introduced, unless it is some weird quirk using the borders or something.
HTML:
<nav id="nav" role="navigation">
<span href="#nav" title="Show navigation">Show navigation</span>
<span href="#" title="Hide navigation">Hide navigation</span>
<ul class="clearfix">
<li>Home
</li>
<li> <span>Blog</span>
<ul>
<li>Design
</li>
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</li>
<li> <span>Work</span>
<ul>
<li>Web Design
</li>
<li>Typography
</li>
<li>Front-End
</li>
</ul>
</li>
<li>About
</li>
</ul>
</nav>
CSS:
#nav {
width: 60em;
/* 1000 */
font-family:'Open Sans', sans-serif;
font-weight: 400;
position: absolute;
top: 25%;
left: 50%;
margin-left: -30em;
/* 30 480 */
}
#nav > span {
display: none;
}
#nav li {
position: relative;
}
#nav li a {
color: #fff;
display: block;
}
#nav li a:active {
background-color: #c00 !important;
}
#nav span:after {
width: 0;
height: 0;
border: 0.313em solid transparent;
/* 5 */
border-bottom: none;
border-top-color: #efa585;
content:'';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em;
/* 5 */
}
/* first level */
#nav > ul {
height: 3.75em;
/* 60 */
background-color: #e15a1f;
}
#nav > ul > li {
width: 25%;
height: 100%;
float: left;
}
#nav > ul > li > a {
height: 100%;
font-size: 1.5em;
/* 24 */
line-height: 2.5em;
/* 60 (24) */
text-align: center;
}
#nav > ul > li:not(:last-child) > a {
border-right: 1px solid #cc470d;
}
#nav > ul > li:hover > a, #nav > ul:not(:hover) > li.active > a {
background-color: #cc470d;
}
/* second level */
#nav li ul {
background-color: #cc470d;
display: none;
position: absolute;
top: 100%;
}
#nav li:hover ul {
display: block;
left: 0;
right: 0;
}
#nav li:not(:first-child):hover ul {
left: -1px;
}
#nav li ul a {
font-size: 1.25em;
/* 20 */
border-top: 1px solid #e15a1f;
padding: 0.75em;
/* 15 (20) */
}
#nav li ul li a:hover, #nav li ul:not(:hover) li.active a {
background-color: #e15a1f;
}
#media only screen and (max-width: 62.5em)
/* 1000 */
{
#nav {
width: 100%;
position: static;
margin: 0;
}
}
#media only screen and (max-width: 40em)
/* 640 */
{
html {
font-size: 75%;
/* 12 */
}
#nav {
position: relative;
top: auto;
left: auto;
}
#nav > span {
width: 3.125em;
/* 50 */
height: 3.125em;
/* 50 */
text-align: left;
text-indent: -9999px;
background-color: #e15a1f;
position: relative;
}
#nav > span:before, #nav > span:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content:'';
}
#nav > span:after {
top: 60%;
}
#nav:not(:target) > span:first-of-type, #nav:target > span:last-of-type {
display: block;
}
/* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 100%;
float: none;
}
#nav > ul > li > span {
height: auto;
text-align: left;
padding: 0 0.833em;
/* 20 (24) */
}
#nav > ul > li:not(:last-child) > span {
border-right: none;
border-bottom: 1px solid #cc470d;
}
/* second level */
#nav li ul {
position: static;
padding: 1.25em;
/* 20 */
padding-top: 0;
}
}
It looks like they are using CSS3 to draw an arrow in span:after.
They use the border property to get it to work.
#nav span:after {
width: 0;
height: 0;
border: 0.313em solid transparent;
border-bottom: none;
border-top-color: #efa585;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em;
}
<div id="nav"><span>Test Arrow</span></div>
The CSS you are using for #nav span:after is the triangle.
Check out this site https://css-tricks.com/examples/ShapesOfCSS/ and scroll down to "Triangle Down".
The dropdown arrow appears to be attached to the :after pseudo-element of the span child element within the a link of the li.
This is where the span is in the markup:
<ul class="clearfix">
<li class="active">
<span>Blog</span>
This is the css rule:
#nav span::after
The content and border-color properties for this rule appear to be what is rendering and stylistically modifying the dropdown arrows.
Guys for the life of me I can't work out why the dropdown on 'option two' is not displaying properly, the list elements all seem to be sitting on top of each other and only shows the last option when hovering over, any ideas?
http://jsfiddle.net/38pbvpx1/
body {
margin: 0;
}
header {
position: relative;
width: 80%;
height: 80px;
padding: 0;
margin: 0 auto;
background: #ff6;
max-width: 1200px;
}
/* nav and submenu */
nav {
position: absolute;
top: 0;
right: 0;
width: auto;
height: 80px;
padding: 0;
margin: 0;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
zoom: 1;
*display: inline;
_height: 80px;
list-style-type: none;
}
nav li a {
display: block;
height: 80px;
}
nav li a:hover {
background: #448f69;
}
/* submenu navigation
---------------------------------------- */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
width: auto;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
width: auto;
text-decoration: none;
color: #000;
padding: 0 15px;
display: block;
font-size: 16px;
}
ul#menu li {
position: relative;
}
ul#menu li ul.sub-menu {
display:none;
postion: absolute;
top: 80px;
left: 0;
width: auto;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu li:hover ul.sub-menu li {
position: absolute;
display:block;
width: 100%;
background-color: #red;
}
ul#menu li:hover ul.sub-menu li a:hover {
display:block;
width: auto;
color: #000;
background-color: green;
}
<body>
<header>
<nav>
<ul id="menu">
<li>Option One</li>
<li>Option Two
<ul class="sub-menu">
<li>Section A</li>
<li>Section B</li>
<li>Section C</li>
</ul><!-- /.sub-menu -->
</li>
<li>Option Three</li>
<li>Option Four</li>
</ul><!-- /#menu -->
</nav>
At a basic level it's because you have positioned all of the sbnmenu's li abolsutely so they are sitting on top of each other.
The positioning being used here is quite odd so I've updated it slightly.
JSfiddle
CSS
body {
margin: 0;
}
header {
position: relative;
width: 80%;
height: 80px;
padding: 0;
margin: 0 auto;
background: #ff6;
max-width: 1200px;
}
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
zoom: 1;
*display: inline;
_height: 80px;
list-style-type: none;
position: relative;
vertical-align: top;
}
nav li a {
display: block;
height: 80px;
}
nav li a:hover {
background: #448f69;
}
/* submenu navigation
---------------------------------------- */
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu li,
ul#menu ul.sub-menu li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#menu li {
width: auto;
}
ul#menu li a, ul#menu li ul.sub-menu li a {
width: auto;
text-decoration: none;
color: #000;
padding: 0 15px;
display: block;
font-size: 16px;
}
ul#menu li {
position: relative;
}
ul#menu li ul.sub-menu {
display:none;
postion: absolute;
top:100%;
left: 0;
width: auto;
}
ul#menu li:hover ul.sub-menu {
display:block;
}
ul#menu li:hover ul.sub-menu li {
//position: absolute;
display:block;
width: 100%;
background-color: #red;
}
ul#menu li:hover ul.sub-menu li a:hover {
display:block;
width: auto;
color: #000;
background-color: green;
}
Make the following changes:
ul#menu li:hover ul.sub-menu li {
position: relative;/*Change position from absolute to relative*/
display:block;
width: 100%;
background-color: #red;
}
ul#menu li:hover ul.sub-menu li {
position: relative;
display:block;
width: 100%;
/*top: 80px;Remove this*/
background-color: #red;
}
fiddle