Hey there! I've been trying to figure out how to move my 'Facebook' and 'Twitter' links to the right side of my navigation bar while keeping all the other links on the left. It's been quite a challenge so far!
I've been going through my HTML code but haven't been able to spot where the problem lies. Here's what I have:
<!DOCTYPE html>
<html>
<head>
<link href="dropdown-menu.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<br />
<br />
<div id="navdiv">
<ul id="navigation" class="nav-main">
<li class="list"><a href="index.html">PORTFOLIO</a>
<ul class="nav-sub">
<li><a href="logo.html">LOGO DESIGN</a></li>
<li><a href="clothing.html">CLOTHING DESIGN</a></li>
<li><a href="photoshop.html">PHOTOSHOP</a></li>
<li><a href="layout.html">LAYOUT</a></li>
</ul>
</li>
<ul>
<li><a href="about.html">ABOUT</a></li>
</ul>
</li>
<li><a href="contact.html">CONTACT</a></li>
<li class="social"><a href="https://www.facebook.com/dbgraphicdesign" title="Facebook"><img src="images/facebook.png"></a></li>
<li class="social"><a href="https://twitter.com/dbergmandesigns" title="Twitter"><img src="images/twitter.png"></a></li>
</ul>
</div>
</body>
</html>
The CSS styling is as follows:
#navigation{
margin:auto;
width:850px;
height:45px;
background-color:rgba(194, 6, 6, 0.6);
}
ul.nav-main,
ul.nav-main li{
list-style: none;
margin: 0;
padding: 0;
}
ul.nav-main{
position: relative;
}
ul.nav-main li:hover > ul{
visibility: visible;
}
ul.nav-main li.hover,
ul.nav-main li:hover{
position: relative;
cursor: pointer;
background:rgba(50, 50, 50, 0.9);
}
ul.nav-main li{
float:left;
display:block;
height: 45px;
color: #ededed;
font: 14px Arial, Helvetica, sans-serif;
}
ul.nav-main li a{
display:block;
padding: 16px 16px 0 16px;
height: 35px;
color: #ededed;
font: 14px Arial, Helvetica, sans-serif;
text-decoration:none;
}
ul.nav-main li a:hover{
color:#ededed;
}
ul.nav-sub{
visibility: hidden;
position: absolute;
padding:5px;
top: 45px;
left: 0;
background:rgba(194, 6, 6, 0.8);
}
ul.nav-sub li{
list-style:none;
display:block;
padding-bottom:3px;
height: 22px;
float: none;
width:120px;
background: none;
}
ul.nav-sub li a{
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 15px;
width:165px;
background: none;
font: 12px Arial, Helvetica, sans-serif;
}
ul img{
height:25px;
}
If anyone has any insights or solutions, I would greatly appreciate it!