1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Responsive Menu Bar On Hover??

Discussion in 'HTML & Website Design' started by audra, Feb 12, 2016.

0
  1. #1
    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? [​IMG]

    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?
     
    Solved! View solution.
    audra, Feb 12, 2016 IP
  2. #2
    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
     
    denis bayly, Feb 13, 2016 IP
  3. audra

    audra Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Denis, it worked!!!! thank sooo much!!!! :) Web designing is fun. :)
     
    audra, Feb 13, 2016 IP
  4. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #4

    No problem, you're very welcome.
    ​

    coothead
     
    denis bayly, Feb 13, 2016 IP