I can't figure out how to position a dropdown menu below the list item that activates it. Right now each dropdown menu is placed independently.
ul{
display:inline-block;
list-style:none;
text-align:center;
width: 100%;
margin:0 auto;
}
ul li
{
display:inline;
padding:10px;
background-color:black;
color:white;
}
#listaUgn
{
display:block;
position:absolute;
}
#listaUgn li
{
display:block;
padding:10px;
background-color:black;
color:white;
max-width: 100px;
}
<div class="izborSrednji">
<ul id="listaSrednja">
<li class="izborLinije">Programiranje I</li>
<li class="izborLinije">WRD</li>
<li class="izborLinije" >Klikni za jos
<ul id="listaUgn" >
<li class="izborLinijeUg">Programiranje I</li>
<li class="izborLinijeUg">WRD</li>
<li class="izborLinijeUg">PSR</li>
<li class="izborLinijeUg">SP</li>
</ul>
</li>
<li class="izborLinije">SP</li>
</ul>
</div>
If you add position: relative to the dropdown element's parent, then the dropdown will be positioned absolutely, relative to it's parent element.
For example:
ul{
display:inline-block;
list-style:none;
text-align:center;
width: 100%;
margin:0 auto;
}
ul li
{
display:inline;
padding:10px;
background-color:black;
color:white;
position: relative;
}
ul li:hover #listaUgn {
display: block;
}
#listaUgn
{
display:none;
position:absolute;
padding: 0;
left: 0;
}
#listaUgn li
{
display:block;
padding:10px;
background-color:black;
color:white;
max-width: 100px;
}
<div class="izborSrednji">
<ul id="listaSrednja">
<li class="izborLinije">Programiranje I</li>
<li class="izborLinije">WRD</li>
<li class="izborLinije" >Klikni za jos
<ul id="listaUgn" >
<li class="izborLinijeUg">Programiranje I</li>
<li class="izborLinijeUg">WRD</li>
<li class="izborLinijeUg">PSR</li>
<li class="izborLinijeUg">SP</li>
</ul>
</li>
<li class="izborLinije">SP</li>
</ul>
</div>
this site can be a good reference for you: https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
Update:
nav {
display: block;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav a {
display: block;
background: #111;
color: #fff;
text-decoration: none;
padding: 0.8em 1.8em;
text-transform: uppercase;
font-size: 80%;
letter-spacing: 2px;
text-shadow: 0 -1px 0 #000;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
border-radius: 6px;
}
.nav li {
position: relative;
}
.nav>li {
float: left;
border-bottom: 4px #aaa solid;
margin-right: 1px;
}
.nav>li>a {
margin-bottom: 1px;
box-shadow: inset 0 2em .33em -0.5em #555;
}
.nav>li:hover,
.nav>li:hover>a {
border-bottom-color: orange;
}
.nav li:hover>a {
color: orange;
}
.nav>li:first-child {
border-radius: 4px 0 0 4px;
}
.nav>li:first-child>a {
border-radius: 4px 0 0 0;
}
.nav>li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.nav>li:last-child>a {
border-radius: 0 4px 0 0;
}
.nav li li a {
margin-top: 1px;
}
.nav li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50%;
right: 5px;
}
/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border-bottom: 5px solid orange;
z-index: 1;
left: -99999em;
}
.nav>li:hover>ul {
left: auto;
margin-top: 5px;
min-width: 100%;
}
.nav>li li:hover>ul {
left: 100%;
margin-left: 1px;
top: -1px;
}
/* arrow hover styling */
.nav>li>a:first-child:nth-last-child(2):before {
border-top-color: #aaa;
}
.nav>li:hover>a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: orange;
margin-top: -5px
}
.nav li li>a:first-child:nth-last-child(2):before {
border-left-color: #aaa;
margin-top: -5px
}
.nav li li:hover>a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: orange;
right: 10px;
}
<html>
<head>
<title>test</title>
</head>
<body>
<nav>
<ul class="nav">
<li>About</li>
<li>Portfolio
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Resume
<ul>
<li>item a lonng submenu</li>
<li>item
<ul>
<li>Ray</li>
<li>Veronica</li>
<li>Bushy</li>
<li>Havoc</li>
</ul>
</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Download</li>
<li>Rants
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Related
I simply want the nav bar to stretch to full height.
i'm quite new to html,css and have little knowledge about it. have tried almost every solution on the internet but still nothing.below is the styling and html code.I gave all the parent containers full height.Don't know what's causing the problem. I picked the style up from the internet and understand what most of it does.I don't
body,
html {
height: 100vh;
}
div {
overflow: hidden;
height: 100%;
position: relative;
background-color: aqua;
}
nav {
display: block;
text-align: center;
height: 100vh !important;
float: left;
position: absolute;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
height: unset !important;
}
.nav a {
display: block;
background: #111;
color: #fff;
text-decoration: none;
padding: 0.8em 1.8em;
text-transform: uppercase;
font-size: 80%;
letter-spacing: 2px;
text-shadow: 0 -1px 0 #000;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
border-radius: 6px;
height: 100vh !important;
}
.nav li {
position: relative;
}
.nav>li {
float: left;
border-bottom: 4px #aaa solid;
margin-right: 1px;
}
.nav>li>a {
margin-bottom: 1px;
box-shadow: inset 0 2em .33em -0.5em #555;
}
.nav>li:hover,
.nav>li:hover>a {
border-bottom-color: orange;
}
.nav li:hover>a {
color: orange;
}
.nav>li:first-child {
border-radius: 4px 0 0 4px;
}
.nav>li:first-child>a {
border-radius: 4px 0 0 0;
}
.nav>li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.nav>li:last-child>a {
border-radius: 0 4px 0 0;
}
.nav li li a {
margin-top: 1px;
}
.nav li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50%;
right: 5px;
}
/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border-bottom: 5px solid orange;
z-index: 1;
left: -99999em;
}
.nav>li:hover>ul {
left: auto;
margin-top: 5px;
min-width: 100%;
}
.nav>li li:hover>ul {
left: 100%;
margin-left: 1px;
top: -1px;
}
/* arrow hover styling */
.nav>li>a:first-child:nth-last-child(2):before {
border-top-color: #aaa;
}
.nav>li:hover>a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: orange;
margin-top: -5px
}
.nav li li>a:first-child:nth-last-child(2):before {
border-left-color: #aaa;
margin-top: -5px
}
.nav li li:hover>a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: orange;
right: 10px;
}
<div>
<nav>
<ul class="nav">
<li>About</li>
<li>
Portfolio
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>
Resume
<ul>
<li>item a lonng submenu</li>
<li>
item
<ul>
<li>Ray</li>
<li>Veronica</li>
<li>Bushy</li>
<li>Havoc</li>
</ul>
</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Download</li>
<li>
Rants
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
why would you want to set the max height oft the nav element to 100vh? If you want it to use the full width you need to set the width: 100vw; vw = "Relative to 1% of the width of the viewport" and vh is the height.
a simple bar would be like:
<body>
<nav></nav>
</body>
<script>
body { padding: 0; margin: 0}
nav { width: 100vw;height: 50px;background-color: blue;position: fixed;top: 0}
</script>
I'm building a simple horizontal menu with some sub-menus.
But I'm stuck trying to make the sub-items respect the width of the parent items.
Here some images what I'm talking about:
Here's what I get:
Fiddle
Check it out:
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
.menu {
list-style: none;
border: 1px solid #c0c0c0;
float: left;
}
.menu li {
position: relative;
float: left;
border-right: 1px solid #c0c0c0;
}
.menu li a {
color: #333;
text-decoration: none;
padding: 5px 10px;
display: block;
}
.menu li a:hover {
background: #333;
color: #fff;
-moz-box-shadow: 0 3px 10px 0 #CCC;
-webkit-box-shadow: 0 3px 10px 0 #ccc;
text-shadow: 0px 0px 5px #fff;
}
.menu li ul {
position: absolute;
top: 25px;
left: 0;
background-color: #fff;
display: none;
}
.menu li:hover ul,
.menu li.over ul {
display: block;
}
.menu li ul li {
border: 1px solid #c0c0c0;
display: block;
width: 150px;
}
<nav>
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>What we do?
<ul>
<li>What we do? 01
</li>
<li>What we do? 02
</li>
<li>What we do? 03
</li>
</ul>
</li>
<li>Links
<ul>
<li>Myotherwebsiteiscool
</li>
</ul>
</li>
<li>Contact
<ul>
<li>Form Contact
</li>
<li>Find us
</li>
</ul>
</li>
</ul>
</nav>
Change the css here- note that I've change left: 0 to right: 0
.menu li ul {
position: absolute;
top: 25px;
right: 0;
background-color: #fff;
display: none;
}
check it out:
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
.menu {
list-style: none;
border: 1px solid #c0c0c0;
float: left;
}
.menu li {
position: relative;
float: left;
border-right: 1px solid #c0c0c0;
}
.menu li a {
color: #333;
text-decoration: none;
padding: 5px 10px;
display: block;
}
.menu li a:hover {
background: #333;
color: #fff;
-moz-box-shadow: 0 3px 10px 0 #CCC;
-webkit-box-shadow: 0 3px 10px 0 #ccc;
text-shadow: 0px 0px 5px #fff;
}
.menu li ul {
position: absolute;
top: 25px;
right: 0;
background-color: #fff;
display: none;
}
.menu li:hover ul,
.menu li.over ul {
display: block;
}
.menu li ul li {
border: 1px solid #c0c0c0;
display: block;
width: 150px;
}
<nav>
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>What we do?
<ul>
<li>What we do? 01
</li>
<li>What we do? 02
</li>
<li>What we do? 03
</li>
</ul>
</li>
<li>Links
<ul>
<li>Myotherwebsiteiscool
</li>
</ul>
</li>
<li>Contact
<ul>
<li>Form Contact
</li>
<li>Find us
</li>
</ul>
</li>
</ul>
</nav>
I try to create a horizontal navigation, but there are some problems:
The first element is displaced
Is there a better way to place the Text centered below the icon. Now I did that just with a . And how should I use the optional arrow-down-icon - here I used the span-tag. I think the html-markup for that is not the best.
And the second-level ul (=subelements) isn't shown correctly and doesn't enclose the subelements.
JSFiddle: http://jsfiddle.net/pqubgt2d/
nav {
background-color: #f2f2f2;
padding: .3em 0;
border-radius: 7px;
}
nav ul {
list-style: none;
height: 2.5em;
padding: .25em;
color: #555;
margin: 0;
}
nav ul li {
font-family: "Source Sans Pro";
font-size: .5em;
margin: .5em 0;
display: inline-block;
width: 4em;
text-align: center;
}
nav ul li i {
font-size: 3em !important;
}
nav ul li ul {
font-size: 3em;
background-color: #f2f2f2;
}
.button-arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #B4B4B4;
margin: 0 auto;
position: relative;
bottom: -7px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<ul>
<li><i class="fa fa-file-o"></i><br>New</li>
<li>
<i class="fa fa-floppy-o"></i><br>
Save<br>
<span class="button-arrow-down"></span>
<ul>
<li>Subelement 1</li>
<li>Subelement 2</li>
<li>Subelement 3</li>
</ul>
</li>
</ul>
</nav>
nav {
background-color: #f2f2f2;
padding: .3em 0;
border-radius: 7px;
height: 2.5em;
}
nav > ul {
list-style: none;
padding: .25em;
color: #555;
margin: 0;
}
nav > ul > li {
font-family:"Source Sans Pro";
font-size: .5em;
margin: .8em;
text-align: center;
float:left;
width:4em;
}
nav > ul > li i {
font-size: 2.8em !important;
}
nav > ul > li>ul {
font-size: 3em;
background-color: #f2f2f2;
}
.button-arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #B4B4B4;
margin: 0 auto;
position: relative;
bottom: -7px;
}
.drop {
float:left;
display:none;
}
li:hover > .drop {
display:block;
}
.drop {
list-style-type:none;
font-family:"Source Sans Pro";
font-size: 20px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
<ul>
<li class="item"><i class="fa fa-file-o"></i>New</li>
<li class="item"><i class="fa fa-floppy-o"></i>Save<span class="button-arrow-down"></span>
<ul class="drop">
<li>Subelement 1</li>
<li>Subelement 2</li>
<li>Subelement 3</li>
</ul>
</li>
</ul>
</nav>
Try this. This looks more like you want it. If it helps +1.
Edit. I have updated the answer due to your comment.
All, I've searched around and I have a feeling it's something simple. When hovering over any of my navigation items it displays all levels of my navigation bar. I have tried a couple of different ways to select but here is my CSS code.
div#topnav {
margin: -1px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
height: 21px;
background-color: #666;
border-bottom: 1px solid black;
}
div#topnav ul {
margin: 0;
padding: 0px;
background: #666;
text-align: left;
width: auto;
font-size: 10px;
font-weight: bold;
}
div#topnav li {
position: relative;
list-style: none;
margin: 0px;
padding: 3px 8px 2px 8px;
float: right;
border-left: 1px solid silver;
}
div#topnav li:hover {
background-color: #0038A8;
}
div#topnav li li.submenu:hover {
background-color: #0038A8;
}
div#topnav li a {
display: block;
padding: 0;
text-decoration: none;
width: auto;
color: white;
}
div#topnav li a:hover {
text-decoration: none;
}
div#topnav>ul a {
width: auto;
}
ul.level2 {
position: absolute;
width: 175px;
display: none;
border-top: 1px solid black;
}
div#topnav ul ul li {
float: left;
width: 158px;
border-bottom: 1px solid gray;
}
div#topnav ul.level2 {
top: 19px;
left: -1px;
margin-top: 2px;
font-weight: normal;
}
div#topnav ul.level3 {
top: -1px;
left: 174px;
border: 1px solid #000;
font-weight: normal;
}
ul.level1:hover > li ul.level2 {
display: block;
}
<div id="topnav" class="menu">
<ul class="level1">
<li>Item 1</li>
</ul>
<ul class="level1">
<li>Help
<ul class="level2">
<li>Email us</li>
<li>Call Us</li>
<li>Online Support</li>
<li>Forums</li>
</ul>
</li>
<li>Shopping
<ul class="level2">
<li>Shoes</li>
<li>Shirts</li>
<li>Pants</li>
</ul>
</li>
<li>Home</li>
</ul>
</div>
I have also put the CSS as a direct descendant but still had the same problem (Below is what I used).
ul.level1:hover > li ul.level2
Here a working fiddle : http://jsfiddle.net/7w68q1f4/
ul.level1 li:hover > ul.level2 {
display:block;}
I have a drop down ul menu that is working in every browser except IE8. I have tried messing with the Z-index but haven't had much luck. When the user hovers over the first element, there is it displays the 2nd list as a drop down but then once the user tries to navigate to it, it disappears. Is there something else that I may be missing? Please help.
Here is the generated HTML:
<div id="topNav" class="topNavMenu">
<ul>
<li>Home</li>
<li><a rel="submenu1">Account Information</a></li>
<li><a rel="submenu2">Financial</a></li>
<li><a rel="submenu3">Pricing</a></li>
<li><a rel="submenu4">Operations</a></li>
<li><a rel="submenu5">Support</a></li>
<li><a rel="submenu6">Document Management</a></li>
<li><a rel="submenu7">Administration</a></li>
</ul>
<ul id="submenu1" class="ddsubmenustyle">
<li>Bill To/Ship To Search</li>
<li>Customer Account Information</li>
</ul>
<ul id="submenu2" class="ddsubmenustyle">
<li>Statement Search</li>
</ul>
<ul id="submenu3" class="ddsubmenustyle">
<li>Price Notification Summary</li>
</ul>
<ul id="submenu4" class="ddsubmenustyle">
<li>Online Environmental Compliance</li>
</ul>
<ul id="submenu5" class="ddsubmenustyle">
<li>Manage Profile</li>
<li>Administrative Interfaces</li>
</ul>
<ul id="submenu6" class="ddsubmenustyle">
<li>HES</li>
<li>Marketing Services</li>
<li>Sunoco University Classes</li>
<li>Credit Card Program Information</li>
</ul>
<ul id="submenu7" class="ddsubmenustyle">
<li>Create a New User</li>
<li>User Administration</li>
<li>Create a New Role</li>
<li>Maintain Menu Items</li>
<li>Refresh Menu</li>
</ul>
</div>
and the CSS:
/* Top navigation menu
topNavMenu = the class used on the menu div.
ddsubmenustyle = dropdown div css.
-----------------------------------------------------------*/
.topNavMenu ul
{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
background: #C3C9D9; /* #153371 */
overflow: hidden;
width: 100%;
background-image:url(../images/menu_bg.png);
height:35px;
float:left;
}
.topNavMenu li
{
display: inline;
margin: 0;
z-index: 100;
}
.topNavMenu li a
{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 0px 10px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: black;
background: #6c94b0; /* #153371 */
background-image:url(../images/menu_bg.png);
height:35px;
line-height:35px;
font-family:Verdana, Arial, Helvetica, sans-serif;
/*font-size:10px;*/
}
.topNavMenu li a:visited
{
color: black;
}
.topNavMenu li a:hover
{
background:#4D77A7; /*background of tabs for hover state */
color:White;
text-decoration:bold;
}
.topNavMenu a.selected
{
background: #4D77A7; /*background of tab with "selected" class assigned to its LI */
color:White;
}
.ddsubmenustyle, .ddsubmenustyle div
{ /*topmost and sub DIVs, respectively*/
font: normal 12px Verdana;
margin: 0;
font-weight:bold;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border-bottom-width: 0;
visibility: hidden;
z-index: 300;
}
.ddsubmenustyle ul
{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
z-index: 300;
}
.ddsubmenustyle li a
{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: white;
background-color: #aec6f6;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid white;
background-color:#4D77A7;
line-height:24px;
z-index: 300;
}
.ddsubmenustyle li ul li a, .ddsubmenustyle li ul li:first-child a
{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: white;
background-color: #aec6f6;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid white;
background-color:#4D77A7;
line-height:24px;
background-image:none;
-moz-border-bottom-radius: none;
-webkit-border-bottom-radius: none;
-khtml-border-bottom-radius: none;
border-bottom-radius: none;
}
.ddsubmenustyle li:first-child a
{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: white;
background-image:url(../images/arrow_first-child.png);
background-repeat:no-repeat;
background-position:top left;
background-color: #4D77A7;
text-decoration: none;
padding: 16px 5px 4px 5px;
border-bottom: 1px solid white;
background-color:#4D77A7;
}
.ddsubmenustyle li ul li:last-child a
{
-moz-border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-khtml-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-bottom-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-khtml-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: none;
}
.ddsubmenustyle li ul li a:hover
{
background-color:#4D77A7;
color: 40638A;
line-height:24px;
}
.ddsubmenustyle li:last-child a
{
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-khtml-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
}
* html .ddsubmenustyle li
{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover
{
background-color:#38587C;
color: white;
line-height:24px;
}
/* Neutral CSS */
.downarrowpointer
{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer
{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim
{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
I tried to view this in Chrome but couldn't get it to work properly. Why are the sub-menus separate ul's? Perhaps you could try a nested list, like this:
<nav>
<ul class="top-nav">
<li>
Item 1
<ul class="sub-nav">
<li>Item 1a</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
</li>
<li>
Item 2
<ul class="sub-nav">
<li>Item 2a</li>
<li>Item 2b</li>
<li>Item 2c</li>
</ul>
</li>
</ul>
</nav>
And here's some CSS to make it work:
* {
margin: 0;
padding: 0;
list-style: none;
color: inherit;
text-decoration: none;
}
body {
font-family: sans-serif;
}
nav {
margin: 0 auto;
}
.sub-nav {
display: none;
}
.sub-nav li {
background: #333;
color: #fff;
padding: 4px 2px;
border-bottom: 1px solid #e0e0e0;
}
.top-nav {
overflow: hidden;
}
.top-nav > li {
float: left;
width: 100px;
padding: 4px 0;
background: #e0e0e0;
}
.top-nav > li:hover ul {
display: block;
}
Just tested in Chrome and IE, and worked fine.