www.webdeveloper.com
Results 1 to 4 of 4

Thread: want 2nd level menus to be wider

  1. #1
    Join Date
    Oct 2007
    Posts
    161

    want 2nd level menus to be wider

    I'm using csshover.htc to create a drop down menu, however I want the drop down part of the menus to have a larger width area to fit longer links in. Currently the top level menu items have a width of 97px, and the drop downs are using the same width - just need to know which element of the css to amend to give more room to the drop down items!

    Here is the css:

    Code:
    #menu {
    	float: none;
    }
    #menu ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	width: 97px;
    	float: left;
    	line-height: 32px;
    }
    #menu a, #menu h3 {
    	display: block;
    	margin: 0;
    	font-family:  Arial, Helvetica, sans-serif;
    	font-size: small;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #FFFFFF;
    	font-weight: normal;
    	background-image: url(images/menubkgd-mid.gif);
    	background-repeat: repeat-x;
    }
    #menu h3 {
     color: #fff!important;
     text-align: center;
    }
    #menu a {
     color: #FFFFFF!important;
     text-decoration: none;
    }
    #menu a:focus, #menu a:hover {
    	color: #FFFFFF!important;
    	background-image: url(/images/menu-on.jpg);
    	background-repeat: repeat-x;
    }
    #menu li {
    	position: relative;
    }
    
    #menu ul ul ul {
    	position: absolute;
    	top: 0;
    	left: 100%;
    }
    #menu ul ul {
    position: absolute;
    z-index: 500;
    }
    div#menu ul ul {
    display: none;
    }
    div#menu ul li:focus, div#menu ul li:hover ul
    {
    	display: block;
    }
    div#menu ul ul,
    div#menu ul li:focus, div#menu ul li:hover ul ul,
    div#menu ul ul li:focus, div#menu ul ul li:hover ul ul
    {
    	display: none;
    }
    
    div#menu ul li:focus, div#menu ul li:hover ul,
    div#menu ul ul li:focus, div#menu ul ul li:hover ul,
    div#menu ul ul ul li:focus, div#menu ul ul li:hover ul
    {
    	display: block;
    }
    body {
    behavior: url(/csshover.htc);
    }
    and here's a link to see what I'm trying to amend: http://dyffryntraining.org.uk/index-new.php

  2. #2
    Join Date
    Jul 2006
    Posts
    207
    Code:
    #menu h3 + ul a {
    width: 100px;
    }
    That will control the width of the drop menu links.

  3. #3
    Join Date
    Jun 2011
    Posts
    10

    Start from scratch

    Cory is right, but I'd most definetly recommend making your own drop-down menu from scratch, so you get the complete grasp of how it works and how to customize it instead of using a preconfigured one.

    Trust me, it's worth the effort, especially in the future, if you decide to make one or more websites.

  4. #4
    Join Date
    Oct 2007
    Posts
    161
    Thanks for your help

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles