Hello,
I have this navigation:
navigation.php
<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div>
<div id="navcontainerbar">
<ul>
<li><a href="index.php">HOME</a></li>
<ul id="nav">
<li><a class="fly" href="#">PORTFOLIO</a>
<ul class="dd">
<li><a href="portfolio.php">Web Porfolio</a></li>
<li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>
</ul>
</li>
</ul>
<li><a href="services.php">SERVICES</a></li>
<li><a href="blog.php">BLOG</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</div>
style.css
/* navigation */
#navigation {margin: 20px 0 0 280px; width: 700px; height: 50px; background-color: yellow; border-radius: 10px;}
#navcontainerbar { margin: -30px 0 0 0;}
#navcontainerbar ul { margin: 0 0 0 0; list-style-type: none; margin: 0; padding: 0; text-align: center; }
#navcontainerbar ul li { display: inline; font-family:arial;}
#navcontainerbar ul li a { text-decoration: none; padding: .2em 1em; color:black; background-color: green;}
#navcontainerbar ul li a:hover { color:white; background-color:orange; }
Everything works fine, until I insert a popup navigation button between index & service menu button. Therefore, I have to shift my service menu to the right so that I won't overlap my portfolio menu.
I have it in my localhost (with the portfolio menu - unless it overlaps the service menu).
This is my temporary view without the portfolio menu (online): website