overlapping menu - For the first time in ages, I am having issues with a menu. I am trying to create an overlapping

saltedm8 · 14th February 2010, 04:45 PM

For the first time in ages, I am having issues with a menu. I am trying to create an overlapping menu, where when you hover over it, it goes blue.. the problem is I cant seem to 'cover' all the red.. please check it out to see what I mean

Code:

#menu{
    float: left;
    width:324px;
    height:130px;
    margin-top:15px;

}

#menu ul { 
     list-style-type:none; 
     margin-left:70px;
     font-family:Verdana, Geneva, sans-serif;
     font-size:14px;
     line-height:25px;
     color:#FFF;
}
.shift { margin-left:10px;}
.shift a { color: #FFF; text-decoration:none; }
.home { background-color:#a10006; width:90px; display:block;}
.about { background-color:#b20f18; width:140px; display:block;}
.prices { background-color:#a10006; width:100px; display:block; margin-top:-5px;}
.view { background-color:#b20f18; width:210px; display:block;}
.contact { background-color:#a10006; width:115px; display:block; margin-top:-5px;}

.home a:hover { background-color:#00006b; padding:4px 40px 4px 0; }
.about a:hover { background-color:#00006b; width:140px; }
.prices a:hover { background-color:#00006b; width:100px; margin-top:-5px;}
.view a:hover { background-color:#00006b; width:210px;}
.contact a:hover { background-color:#00006b; width:115px; margin-top:-3px;}

HTML Code:

<div id="menu">
<ul>
<li class="home"><span class="shift"><a href="#">Home</a></span></li>
<li class="about"><span class="shift"><a href="#">About All Star</a></span></li>
<li class="prices"><span class="shift"><a href="#">Our Prices</a></span></li>
<li class="view"><span class="shift"><a href="#">View All Star Belt Gallery</a></span></li>
<li class="contact"><span class="shift"><a href="#">Contact</a></span></li>
</ul>

</div>

this is pretty urgent if anyone can help.. cheers

saltedm8 · 14th February 2010, 06:54 PM

dont worry, thanks for looking, succeeded with this

Code:

#menu{
    float: left;
    width:324px;
    height:130px;
    margin-top:15px;

}

#menu ul { 
     list-style-type:none; 
     margin-left:70px;
     font-family:Verdana, Geneva, sans-serif;
     font-size:14px;
     line-height:25px;
     color:#FFF;
}

.shift a { color: #FFF; text-decoration:none; padding-left:10px;
}
.home { background-color:#a10006; width:100px; display:block;}
.about { background-color:#b20f18; width:150px; display:block;}
.prices { background-color:#a10006; width:110px; display:block; margin-top:-5px;}
.view { background-color:#b20f18; width:220px; display:block;}
.contact { background-color:#a10006; width:125px; display:block; margin-top:-5px;}

.home a:hover { background-color:#00006b; width:90px; display:block; }
.about a:hover { background-color:#00006b; width:140px; display:block; }
.prices a:hover { background-color:#00006b; width:100px; margin-top:-5px; display:block;}
.view a:hover { background-color:#00006b; width:210px; display:block;}
.contact a:hover { background-color:#00006b; width:115px; margin-top:-3px;display:block; }

kozata-xakep · 14th February 2010, 06:57 PM

Hey mate,

Do you want to hover the link and make it all blue ?

Edit:

I've noticed that you made every list item display: block; By default they are block elements; or else just use #menu ul li { display: block; } ?

saltedm8 · 14th February 2010, 07:28 PM

thanks for the reply, and nice to finally chat lol

the reason for the display blocks is because otherwise it only surrounded the text and refused to stretch along further than the actual links name.

I would however be curious if you can think of a way to get a:active to work.. that is currently stumping me a little lol

kozata-xakep · 14th February 2010, 07:33 PM

Code:

#menu ul li a:active { color: #000; background: yellow; }

That works fine for me :)

saltedm8 · 14th February 2010, 07:54 PM

sweet, and I must be really tired.. lol.. what about selected ?

kozata-xakep · 14th February 2010, 08:01 PM

a:active is when you click;
selected... Do you mean when have visited the link?
a:visited

saltedm8 · 14th February 2010, 08:04 PM

the page you are on... current page highlighted..

soz, shows how tired I am when I cant even describe what I want right lol

kozata-xakep · 14th February 2010, 08:12 PM

You can use a class for that:

Code:

<div id="navigation">
        <ul>
            <li><a href="#" class="active">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>

or the a:visited {}

saltedm8 · 14th February 2010, 08:17 PM

nah lol.. it wont work with visited, I dont think I will bother.. the guy is not paying enough for me to be messing about with it this much lol

thanks

14th February 2010, 06:57 PM	#3
kozata-xakep Join Date: Feb 2010 Location: Varna, Bulgaria Posts: 50 Thanks: 0 Thanked 11 Times in 11 Posts Expertise: Web Development Experience: Professional	Hey mate, Do you want to hover the link and make it all blue ? Edit: I've noticed that you made every list item display: block; By default they are block elements; or else just use #menu ul li { display: block; } ? Last edited by kozata-xakep; 14th February 2010 at 07:02 PM..

14th February 2010, 07:28 PM	#4
saltedm8 Join Date: Dec 2008 Location: Kent Uk Posts: 1,595 Blog Entries: 6 Thanks: 15 Thanked 49 Times in 49 Posts Expertise: (X)HTML / CSS Experience: Professional	thanks for the reply, and nice to finally chat lol the reason for the display blocks is because otherwise it only surrounded the text and refused to stretch along further than the actual links name. I would however be curious if you can think of a way to get a:active to work.. that is currently stumping me a little lol __________________ web design kent

14th February 2010, 07:33 PM	#5
kozata-xakep Join Date: Feb 2010 Location: Varna, Bulgaria Posts: 50 Thanks: 0 Thanked 11 Times in 11 Posts Expertise: Web Development Experience: Professional	Code: #menu ul li a:active { color: #000; background: yellow; } That works fine for me :)

14th February 2010, 07:54 PM	#6
saltedm8 Join Date: Dec 2008 Location: Kent Uk Posts: 1,595 Blog Entries: 6 Thanks: 15 Thanked 49 Times in 49 Posts Expertise: (X)HTML / CSS Experience: Professional	sweet, and I must be really tired.. lol.. what about selected ? __________________ web design kent

14th February 2010, 08:04 PM	#8
saltedm8 Join Date: Dec 2008 Location: Kent Uk Posts: 1,595 Blog Entries: 6 Thanks: 15 Thanked 49 Times in 49 Posts Expertise: (X)HTML / CSS Experience: Professional	the page you are on... current page highlighted.. soz, shows how tired I am when I cant even describe what I want right lol __________________ web design kent

14th February 2010, 08:01 PM	#7
kozata-xakep Join Date: Feb 2010 Location: Varna, Bulgaria Posts: 50 Thanks: 0 Thanked 11 Times in 11 Posts Expertise: Web Development Experience: Professional	a:active is when you click; selected... Do you mean when have visited the link? a:visited

14th February 2010, 08:12 PM	#9
kozata-xakep Join Date: Feb 2010 Location: Varna, Bulgaria Posts: 50 Thanks: 0 Thanked 11 Times in 11 Posts Expertise: Web Development Experience: Professional	You can use a class for that: Code: <div id="navigation"> <ul> <li><a href="#" class="active">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> or the a:visited {}

14th February 2010, 08:17 PM	#10
saltedm8 Join Date: Dec 2008 Location: Kent Uk Posts: 1,595 Blog Entries: 6 Thanks: 15 Thanked 49 Times in 49 Posts Expertise: (X)HTML / CSS Experience: Professional	nah lol.. it wont work with visited, I dont think I will bother.. the guy is not paying enough for me to be messing about with it this much lol thanks __________________ web design kent

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode