html - How do I make my navigation link have a box around it upon hover? -
sorry odd title, didn't know call it. i'm new designing, stick back-end friend suggested give go. i'm trying
to this
my current css follows.
#main-nav { margin-top:70px; } #main-nav ul { list-style-type: none; } #main-nav li { display:inline-block; position:relative; } #main-nav { text-transform: uppercase; text-decoration: none; color: #ffffff; } #main-nav a:hover { background-color: #2c3e50; }
i have no clue i'm doing when comes designing , may easy solution don't have slightest idea.
thanks in advance.
you need add padding
, border
css:
padding: 10px; border: 1px solid #333;
the complete css might need is:
#main-nav { text-transform: uppercase; text-decoration: none; color: #ffffff; padding: 10px; display: block; } #main-nav a:hover { background-color: #2c3e50; border: 1px solid #333; }
Comments
Post a Comment