Hi! I'm trying to recreate this menu bar, but everything that I've looked for never goes BELOW the div on hover. Help me, please? http://www.jamesmcavoycentral.com/ PS - I looked inside the source code, and it said something about Flexnav....what's that? and is it a requirement to recreate this particular menu bar?
Hi there audra, and a warm welcome to these forums. Try it like this... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>untitled document</title> <link rel="stylesheet" href="some.css" media="screen"> <style media="screen"> body { font:100%/100% arial,helvetica,sans-serif; background:#000; } #nav { display:inline-block; height:45px; padding:0 10px; background-color:#892020; } #nav ul { padding:0; margin:0; list-style:none; overflow:hidden; } #nav li { display:inline-block; padding:0 1px; } #nav a { display:block; padding:15px 3px; border-bottom:3px solid transparent; font-size:80%; font-weight:bold; color:#fff; text-decoration:none; text-transform:uppercase; transition: 0.5s ease-in-out; } #nav a:hover { border-color:#fff; } </style> </head> <body> <div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">james mcavoy</a></li> <li><a href="#">filmography</a></li> <li><a href="#">pictures gallery</a></li> <li><a href="#">site/web</a></li> </ul> </div> </body> </html> Code (markup): coothead