3 Years
Discussion Span
Last Post by diafol

That would likely be the HUGE margin from the media query.

Your CSS is a little broken. I would encourage you to revisit it, and rethink the use of media queries if you can.

Start simple and get the site working on a PC as you need, then worry about tweaking for mobile or whatever other medium you plan on having used.


This is the html...

<ul id="navlist">
    <li id="about"><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>             
    <li id="services"><a href="services.php">SERVICES</a></li>
    <li id="blog"><a href="blog.php">BLOG</a></li>
    <li id="contact"><a href="contact.php">CONTACT</a></li>

It doesn't look quite right to me. Are you sure the HTML is as you want it?


I follow this tutorial: http://css.maxdesign.com.au/listutorial/horizontal01.htm

and change the nav list to:


<link href= "style.css" rel="stylesheet" type="text/css" media="screen">

<div id="navcontainer">
<li><a href="#">HOME</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>


#navcontainer { background-color: #ffff00; width: 700px; height: 50px; border-radius: 10px; margin: 100px 0 0 0;}

#navcontainer ul { list-style-type: none; margin: 0 0 0 100px; padding: 15px; }

#navcontainer ul li { display: inline; }

#navcontainer ul li a { text-decoration: none; padding: .5em 1em; font-weight: bold; color: #000; background-color: #ffff00;}

#navcontainer ul li a:hover { color: #000; background-color: #c8fa7f; }

Just one more thing: how to do the drop down menu?


I'm no CSS guru, but


is useful as you can apply padding/margins to the li instead of the child element. As sometimes, depending on your setup, you may want static text instead of a link for the active pageitem.

Anyway. For dropdown menus, you have about a thousand choices for pure CSS and js-powered solutions on the internet. Just choose one.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.