How do I change CSS submenu width so it doesn't used the same width as the main menu?


Tags: css

Problem :

I'm currently using CSS submenus by working with ul > li > ul > lu. My current CSS code is using:

#nav li:hover ul.sub 
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; width:100%; height:auto;}

The width is find for the top menu, but within the sub menu, it uses the original width value from the top menu. If I change the width to 325%, then the submenu is wide enough but then the top menu is too wide.

I've been messing with the CSS format, but can't seem to get the submenu to hold its own 100% width value separate from the top menu.

Does anyone have a solution on how to use 100% width to match its contents, and not the value of the top menu?

If anyone wants a peak to see what I mean, they can have a look here: http://

I have it currently set to 100% width to show you the results of the submenu.



Solution :

Due to the way that you have your CSS written, you will want to change the following rule in your css file:

#nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {
  left: 100%;
  /* you may want to use "left:calc(100% + 3px);" to account for the padding */
  width: auto;
}

    CSS Howto..

    How to add a border on a table to a generated file from PrinceXML?

    How to use min-width for “float:right” element in CSS?

    How to control the css for two instance of Google Maps autocomplete on the same page?

    How do I add a CSS class to a BoundField, so I can find it with jQuery?

    How to adjust the size of the input component?

    How to vertically align both image and text in a DIV using CSS?

    How to animate sections in pure CSS when scrolling the page?

    How do you properly apply hover css to
  • elements with list-style-type: none?
  • Child div's evenly spaced and flushed to side of parent: how to?

    How can I get a button on the side of a text box to be perfectly aligned all the time?

    How to change default theme color teal to blue without using custom CSS in materilaize

    How to style 3 unorderd lists horizontally in 1 div

    How do I get these hover effects but with diamonds instead of circles

    How to generate image background that flips with each duplication in css? [duplicate]

    How to use relative/absolute paths in css URLs?

    How do I set background-image height using jQuery?

    Slideshow picture disapears

    How to add JS to Wordpress and reference CSS or other scripts?

    How to create this type of element using XHTML & CSS?

    jQuery glowing animations : how to improve?

    Want to override Bootstrap, but how to avoid the use of !important?

    How to create item detail view with css

    Don't understand how to control css elements with jQuery css

    ASP.NET - IIS 7 - DotNetNuke - How do I force browsers to reload the site's CSS?

    How to start ordered list from 2 not 1 with w3c validity and IE 6 compatibility?

    How to hide label on radio checked using css

    How can I apply CSS selector to attribute values being case sensitive?

    How do you replicate this box-shadow effect?

    CSS/JS: How do I copy the edge pixels and repeat them

    How to style “submit” inputs on mouseover, click?