fmz 14

I am fine tuning a PSD to XHTML conversion and was chagrined to see that the navigation bar jumps from its proper position to the very top of the header when you click on the links.

Here is the html:

<ul id="nav-one" class="dropmenu"> 
        <li class="current"> 
            <a class="about" href="#">About Us</a> 
        </li> 
        <li> 
            <a class="web" href="#">Web Design</a> 
            <ul> 
                <li><a href="#">Support</a></li> 
                <li><a href="#">Help</a></li> 
                <li><a href="#">Examples</a></li>
                <li><a href="#">Your work</a></li>
            </ul> 
        </li> 
        <li><a class="graphic" href="#">Graphic Design</a></li>  
        <li><a class="internet" href="#">Internet Marketing</a></li>
        <li><a class="biz-dev" href="#">Business Development</a> 
            <ul> 
                <li><a href="#">Programming</a></li> 
                <li><a href="#">Inspiration</a></li> 
                <li><a href="#">My websites</a></li> 
                <li><a href="#">Clients</a></li> 
                <li><a href="#">Cool stuff</a></li> 
            </ul> 
        </li>
        <li><a class="portfolio" href="#">Portfolio</a></li>
        <li><a class="blog" href="#">Blog</a></li>          
    </ul>

Here is the css:

ul#nav-one.dropmenu         {
                        float: right;
                        margin: 25px 0 0 0; 
                        padding: 0px;
                        background:url("_images/navigation.png") repeat-x scroll 0 0 transparent;
                        display:block;
                        height: 29px; 
                        font-size: 14px; 
                        font-weight: bold;
                        letter-spacing: -.25px; 
                        }
.dropmenu li a, 
.dropmenu li                { float: left; }
ul#nav-one.dropmenu li a:hover      { border-bottom: none; text-decoration: none; }

.dropmenu li a:hover, 
.dropmenu li.open > a       { 
                        color: #0657AD; 
                        background: #FFFFFF url("_images/gradient.png") repeat-x scroll 0 0;    
                        }                       

.dropmenu li                { list-style: none; position: relative; top: 1px; }

.dropmenu li span           {
                        display: block;
                        height: 10px;
                        width: 10px;
                        position: absolute;
                        top: 12px;
                        right: 10px;
                        background:url("_images/arrow_up.png") repeat-x scroll 0 0 transparent;
                        }

.dropmenu li a              { text-decoration: none; color: #FFF; border-bottom: none; }
.dropmenu li a.about:link   {
                        width: 76px;
                        height: 29px;
                        display: block; 
                        text-indent: -9999px; 
                        background: url(../_images/btn_about.png) no-repeat center bottom; 
                        }                                   
.dropmenu li a.web:link {
                        width: 91px;
                        height: 29px;
                        display: block; 
                        text-indent: -9999px; 
                        background: url(../_images/btn_web.png) no-repeat center bottom; 
                        }
.dropmenu li a.graphic:link {
                        width: 112px;
                        height: 29px;
                        display: block; 
                        text-indent: -9999px; 
                        background: url(../_images/btn_graphic.png) no-repeat center bottom; 
                        }
.dropmenu li a.internet:link    {
                        width: 130px;
                        height: 29px;
                        display: block; 
                        text-indent: -9999px; 
                        background: url(../_images/btn_internet.png) no-repeat center bottom; 
                        }
.dropmenu li a.biz-dev:link {
                        width: 163px;
                        height: 29px;
                        display: block; 
                        text-indent: -9999px; 
                        background: url(../_images/btn_biz-dev.png) no-repeat center bottom; 
                        }                                                                                                                       
.dropmenu li a.portfolio:link   {
                        width: 67px;
                        height: 29px;
                        display: block; 
                        text-indent: -9999px; 
                        background: url(../_images/btn_portfolio.png) no-repeat center bottom; 
                        }
.dropmenu li a.blog:link    {
                        width: 45px;
                        height: 29px;
                        display: block; 
                        text-indent: -9999px; 
                        background: url(../_images/btn_blog.png) no-repeat center bottom; 
                        }


.dropmenu li a.about:hover,
.dropmenu li a.web:hover,
.dropmenu li a.graphic:hover,
.dropmenu li a.internet:hover,
.dropmenu li a.biz-dev:hover,
.dropmenu li a.portfolio:hover,
.dropmenu li a.blog:hover       { background-position: center top; border-bottom: none; }

.dropmenu li.current a.about,
.dropmenu li.current a.web,
.dropmenu li.current a.graphic,
.dropmenu li.current a.internet,
.dropmenu li.current a.biz-dev,
.dropmenu li.current a.portfolio,
.dropmenu li.current a.blog     { background-position: center top; }                                    

/* Submenu */
.dropmenu li > ul           {
                        display: none;
                        position: absolute;
                        left: 0;
                        top: 100%;
                        padding: 0px;
                        margin: 0px;
                        z-index: 100;
                        background:url ("_images/gradient.png") repeat-x scroll 0 0 #FFFFFF;

                        border-bottom:1px solid #fff;
                        }

.dropmenu li:hover > ul     { display: block; background-color: rgba(255,254,255,0.8); }

.dropmenu li ul li, 
.dropmenu li ul li a        { float: none; color: #3773B6; text-transform: none; text-decoration: none; text-indent: 5px; }
.dropmenu li ul li          { display: inline;  }

.dropmenu li > div          { width: 200px; }


/* Sub submenu */

.dropmenu li ul li a        {
                        width: 150px;
                        display: block; 
                        border-bottom: 1px solid #fff;
                        line-height: 20px;
                        }

.dropmenu li ul li a:hover  { color:#fff; background: #3773B6; }

I would sure appreciate some help understanding why it jumps like that.

Thanks!

1 answer

kemie 247
1
point
This was chosen as the best answer

You're specifying styles for unvisited but not for visited links. If you remove all the :link parts of your selectors, the menu stops jumping

Answered about 6 years ago by kemie