SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with a drop down menu

    Hi all

    Please have a look at the following file:

    http://www.condottiero.com/test/test.html

    I'm trying to build a drop down CSS menu which I found on the web (uses a .htc file as well) but I can't get it to perform correctly.

    The first link in the list does what it's supposed to do - the text color on hover changes even if you only hover over the div area and not the text.

    However, the other links below it do not act as hyperlinks if I hover over the div area (only the div background color changes). I 'need' to hover over the link text for it to be recognised as a hyperlink.

    Can you see what's wrong with this code - or can you suggest a better alternative which is multiple browser friendly?

    Thanks in advance,
    Steiner

  2. #2
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Use Brainjar's Revenge of the menu code instead of that script. http://www.brainjar.com/dhtml/menubar/demo.html check out the main page here http://www.brainjar.com/dhtml/menubar/. Just view source to get the code.
    Good luck,

    Grim

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to give dimensions to the ul ul a. I also took the liberty of tightening up your code a bit:

    Code:
     <ul>
       <li class="toplevel1"><a href="#">Hyperlink1</a>
     	   <ul><!-- drop down menu items -->
     		<li><a href="http://www.arc1.com">Our Services</a></li>
     		<li><a href="http://www.arc2.com">FAQs</a></li>
     		<li><a href="http://www.arc3.com">Sign Up</a></li>
     		<li><a href="http://www.arc4.com">Support</a></li>
     		<li><a href="http://www.arc5.com">What's New</a></li>
     	  </ul>
     	</li>
       <li class="toplevel2"><a href="#">Hyperlink2</a>
     	<ul><!-- drop down menu items -->
     		<li><a href="#">Our Services</a></li>
     		<li><a href="#">FAQs</a></li>
     		<li><a href="#">Sign Up</a></li>
     		<li><a href="#">Support</a></li>
     		<li><a href="#">What's New</a></li>
     	  </ul>
     	</li>
       <li class="toplevel2"><a href="#">Hyperlink3</a></li>
       <li class="toplevel2"><a href="#">Hyperlink4</a></li>
     
       </ul>
    Code:
     div#listmenu {
     	font-size: 1.2em;
     	color: #E3E3E3;
     	border: 1px solid #FFFFFF;
     	border-width: 1px 0;
     	height: 24px;
     	background-image: url(../images/tile_linkbar_bkgd1.gif);
     	font-weight: bold;
     	line-height: 2em;
     
     }
     
     div#listmenu ul { height: 24px; }
     
     div#listmenu li {
     	float: left;
     	border-right: 1px solid #A59ABB;
     	list-style-type: none;
     	position: relative;
     	background: #4B0681 url(../images/tile_linkbar_bkgd1.gif);
     	text-align: left;
     }
     
     div#listmenu li.toplevel1{ 	
     	color: #E3E3E3;
     	background-image: url(../images/tile_linkbar_bkgd1.gif);
     	margin: 0 0 0 2px;
     	border-left: 1px solid #A59ABB;
     }
     
     div#listmenu li.toplevel2{ 	
     	color: #E3E3E3;
     	background-image: url(../images/tile_linkbar_bkgd1.gif);
     }
     
     div#listmenu li li {
     	color: #E3E3E3;
     	border-bottom: 1px solid #A59ABB;
     	background-image: url(../images/tile_linkbar_bkgd1.gif);
     }
     	
     div#listmenu li a {
     	color: #EDE6FF;
     	text-decoration: none;
     	display: block;
     	padding: 0 6px;
     }
     
     div#listmenu li a:hover {
     	color: #56008C;
     	background-color: #DBDBE7;
     	background-image: url(../images/tile_linkbar_bkgd2.gif);
     }
     
     div#listmenu ul li ul {
     	margin: 0px;
     	position: absolute;
     	width: 10em;
     	left: -1px;
     }
     
     div#listmenu ul li ul li {
     	width: 100%;
     	border: 1px solid #A59ABB;
     	border-width: 0 1px 1px;
     	height: 26px;
     }
     
     div#listmenu ul ul a {
     	width: 10em;
     	height: 24px;
     }
     
     div#listmenu ul li ul li:first-child {
     	border-top: 1px solid #A59ABB;
     }
     
     div#listmenu ul li ul { display: none; }
     
     div#listmenu ul li:hover ul {
     	display: block;
     	background: url(../images/tile_linkbar_bkgd2.gif);
     }

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tyssen - thanks so much buddy! I've been knocking my head over this one all weekend!

    There's just one small problem with this that I can't identify. The hover state on the child links seems to extend out and beyond the divs they're sitting in (in Firefox). Can you recognse the offending tag?

    Thanks again!

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I understand what the problem is. Have you updated the CSS in the link?

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    I'm not sure I understand what the problem is. Have you updated the CSS in the link?
    Sorry Tyssen, I didn't give you the new link (would've helped):

    http://www.ideasdrama.org/test/test2/test.html

    You'll need to view the roll overs in Firefox to see what I'm referring to.

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's the 6px padding on the anchors which is being added to the 10em making it 12px too wide. You'll need to reset the padding on the dropdown list item anchors to an appropriate amount, probably in ems so you can work it out easily (e.g. 0.5em left and right) and then readjust the width so that it all adds up to 10.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tyssen, sorry, is it just the ' div#listmenu li a' tag I need to change or do I need to ammend something else as well?

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No it's the ul ul a that you need to change the width/padding.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    UK
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK Tyssen, understood thanks. Hope you don't mind but I've one last (probably obvious) question for you.

    At present, if the child link content goes beyond the present div width, the text linewraps. What elements do I need to change in order to have the divs increase with the text? I would have thought 100% instead of 10em but that simply stretches the div across the page.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •